Rotating Panel Slider
Three panels on an arc where the side ones are turned a quarter turn on their own axis while the picture inside is counter-rotated by the same amount, so the image stays upright while its frame lies flat. Advancing moves each panel to the next station and re-opens or re-closes its clip-path at the same time, so a card does not slide in, it unfolds into place. A fourth panel is built off-frame at scale zero for the vacated slot and the far one is scaled away, so the arc is always exactly three visible. The title is split per character and enters from the direction of travel, and a blurred pan of the active image sits behind everything.
npx shadcn@latest add https://ui.aryank.space/r/rotating-panel-slider.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | RotatingPanelSlide[] | 7 BLANK entries | Name and image per slide. The index list, counter, title, and backdrop all read from this one array. |
| brand / navLink | string | BLANK copy | Navigation row. |
| footerLeft / footerRight | string | BLANK copy | Footer row. |
brandtextWordmark in the nav.
footerLefttextExperiment label, bottom right.
gsap

