PRO

Parallax Drag Rail

An endless horizontal rail you can wheel or drag. Six copies of the set are laid end to end and the track silently jumps back a full sequence whenever it drifts past the safe band, so the loop never runs out and never visibly seams. Each image is held at 2.25 zoom and slid against its own frame by its distance from center, so cards read as windows onto one continuous scene. Captions only appear once the rail is genuinely still, and a real drag suppresses the click.

Component

Experiment 0471

Built by BLANK

Install
npx shadcn@latest add https://ui.aryank.space/r/parallax-drag-rail.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
slidesRailSlide[]Eight BLANK projectsTitle, image, and link per card.
scrollSpeed / lerpFactor / maxVelocitynumber1.75 / 0.05 / 150Wheel multiplier, easing factor, and the per-event clamp that stops a trackpad flick from teleporting the rail.
Customize
slidestext

Project titles, images, and links.

scrollSpeed / lerpFactortext

Wheel multiplier and how hard the rail eases.

Dependencies
None.