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 https://ui.aryank.space/r/scroll-scrub-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

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

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.

components

ui