Wheel Clip Slider
A wheel-driven slider where the incoming frame is not moved, it is unclipped. The next slide sits at full size with its clip-path collapsed to the edge you are scrolling from and opens to the full rectangle, while its image travels from scale two down to one and the outgoing image travels the opposite way, so the two pictures cross in depth rather than sliding. The word column is one strip stepped by exactly its line height, a magnetic ring follows the pointer at half strength, and the ring's stroke is drawn out and back with a dash offset on every change. Slides are built on demand and any slide more than two away is dropped, so the list never exceeds five nodes.
npx shadcn@latest add https://ui.aryank.space/r/wheel-clip-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 |
|---|---|---|---|
| images / words / linkUrls | string[] | 5 BLANK entries | Indexes are wrapped, so the slider loops in both directions regardless of count. |
| lineHeight / fontSize | number | 150 / 120 | The word column steps by exactly lineHeight, so the two must move together. |
| accent | string | #f9b165 | Title, indicator, ring, and label colour. |
prefixtextFixed first word of the title.
wordstextColumn stepped one row per slide.
gsap