Scroll
React Scroll Animation Components
Scroll-linked parallax, on-enter reveals, progress rails, and pinned sequences for React. Every component is one TypeScript file styled with Tailwind, ready to copy-paste or install with the CLI. Each collapses to a calm, readable static state under prefers-reduced-motion.
An infinite marquee whose speed and skew react to scroll velocity, smoothed so it never jitters. Stamped outline text fills bright white past a velocity threshold; hover slows it to a crawl, it idles offscreen, and reduced motion freezes it to a static outline row.
A scroll-scrubbed container rotator with a beveled slab face: a gunmetal plate starts tilted back in 3D perspective and rotates flat while scaling up as it scrolls through the viewport, header text traveling in coordinated motion, cool white edge-light glowing at max tilt and dimming upright, and a neutral reflection band sliding down the plate face with the angle.
A vertical tracing beam that draws itself along your content as the user scrolls, its white-to-blue-violet stroke tipped with a glowing white head.
A scroll-pinned card stack: full-width cards slide up and seat at a fixed point with a 2px settle-and-lock, then pile into a receding deck as later cards pin over them — depth carried by cool desaturation, a hair of scale and a soft downward shadow, never color. Reverses cleanly and falls back to a plain legible list under reduced motion.
A pinned scroll section where an inline media card grows to full-bleed through a shaped SVG aperture (rounded, circle, pill or any custom path) — corners relax to square, a scrim rises, and the caption rides the aperture's edge before settling as an overlay. Reduced motion skips the pin for a static crossfade.
A pinned scroll section that scrubs an image sequence like a product turntable — pass your own frames or get a seeded faceted gem rendered and cached on the fly, loaded coarse-to-fine behind a hairline progress bar, with neighbour crossfades and captions that fade in at their progress points.
A scroll-linked vertical timeline: dated entries with sticky pinned titles, a progress beam that draws down the spine, and node dots that ignite with an escapement pop as the beam reaches them.
A composable in-view reveal wrapper with fade/slide/scale/blur presets and staggered children. Default melt preset rises and sharpens with a soft white under-glow, like surfacing out of the dark.