PRO

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.

Component
Serene Space

Serene Space

1/7

Serene Space

Gentle Horizon

Quiet Flow

Ethereal Light

Calm Drift

Subtle Balance

Soft Whisper

Experiment 0394, 24

By BLANK

Install
npx shadcn@latest add https://ui.aryank.space/r/rotating-panel-slider.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
slidesRotatingPanelSlide[]7 BLANK entriesName and image per slide. The index list, counter, title, and backdrop all read from this one array.
brand / navLinkstringBLANK copyNavigation row.
footerLeft / footerRightstringBLANK copyFooter row.
Customize
brandtext

Wordmark in the nav.

footerLefttext

Experiment label, bottom right.

Dependencies
gsap