Split Plate Slider
A click-through slider whose single image is cut into two offset plates. The top and bottom halves carry different clip-paths inset from opposite sides, so at rest the picture reads as two staggered bands; hovering pulls both to a symmetrical inset on a one second transition, snapping the halves back into alignment. Advancing stacks a new pair of images that wipe in from the right at scale two and settle to one, staggered by 150ms so the halves arrive slightly apart, and anything past five layers is pruned once the tween completes. The title strip steps by exactly one cell, with the incoming title lit a beat after the movement starts.
npx shadcn@latest add https://ui.aryank.space/r/split-plate-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 |
|---|---|---|---|
| titles / images | string[] | 7 titles / 8 images | The strip renders titles plus its first two repeated; the step size is derived from that count. |
brandtextWordmark in the nav.
footerNotetextHint in the footer.
gsap