Scroll Scrub Slider

A pinned full-screen slider scrubbed by scroll. Each step cross-fades a new image, rebuilds the headline line-by-line, and updates numbered indices with sliding markers and a vertical progress bar.

Component

Scroll to explore the rhythm of still images that move quietly between story and sensation.

Under the soft hum of streetlights she watches the world ripple through glass, her calm expression mirrored in the fragments of drifting light.

As the sequence slows the silence takes over, holding the last traces of motion in the air.

Install

npx shadcn@latest add @compronents/scroll-scrub-slider

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

Prop	Type	Default	Description
slides	{ title: string; image: string }[]	7 BLANK-hosted JPGs	Scrub steps; pin length is one viewport per slide.
embedded	boolean	true	Own the scroll container; set false to ride the window scroll.

Customize

slideslinks

Image and headline per step.

introText / outroTexttextarea

The full-screen copy before and after the pin.

Dependencies

gsaplenis