Split Click Slider
The whole frame is the control: clicking its left half goes back, the right half goes forward. Each change stacks a new full-bleed layer on top and wipes it open from the edge you came from, while the picture inside both the old and the new layer slides five hundred pixels in that same direction, so the two images parallax against each other instead of one simply covering the other. The counter and title are single strips stepped by exactly one row, and the two plus marks accumulate a quarter turn per change so they keep winding rather than resetting. Layers past the slide count are dropped.
npx shadcn@latest add https://ui.aryank.space/r/split-click-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 | SplitClickSlide[] | 5 BLANK slides | Title and image. Drives the layers, the title strip, the counter, and the thumbnails. |
| counterStep / titleStep | number | 20 / 60 | Both strips step by exactly one row, so these must match the CSS line heights. |
navLinkstextLinks centred at the top.
counterSteptextRow height of the counter strip, in px.
gsap