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, damped through a spring. Stamped outline text fills bright white past a velocity threshold.
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 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.