PRO

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.

Component

Neo Forge Towers

Arcadian Complex

Shadowline Spire

Echo Nexus Habitat

Cascade Enclave

Prism Sector

Iron Eden Colony

Neo Forge Towers

Arcadian Complex

Install
npx shadcn@latest add https://ui.aryank.space/r/split-plate-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
titles / imagesstring[]7 titles / 8 imagesThe strip renders titles plus its first two repeated; the step size is derived from that count.
Customize
brandtext

Wordmark in the nav.

footerNotetext

Hint in the footer.

Dependencies
gsap