Scroll-driven effects tie what is on screen to how far or how fast the page moves: words that light up as you read, text that leans with scroll speed, a heading that follows scroll through a spring. Each element here reads the real scroll position, so it works with native scrolling and with smooth-scroll libraries, and each stops moving for people who ask for reduced motion.
Scroll-driven elements
Word read highlightWords in a paragraph light up one by one as it scrolls through the viewport.
Scroll velocity skewText that leans and splits into two colour fringes in proportion to how fast the page scrolls.
Scroll spring headingAn oversized heading slides sideways with scroll progress through a spring, lagging and settling.
Scrubbed stats bandA framed band that grows to full width while its numbers count up, tied to scroll position and reversible.
Mask shape sectionsThe same image revealed through a circle, a diamond and a band as each section scrolls into view.
Grid overlay explainerColumn and gutter bands fade in over a live layout as it scrolls into view, to show how the grid is built.
Scroll camera landscapeA procedural low-poly mountain range that the camera flies through as you scroll, with a sun that moves from dawn to dusk.
How to choose
- Word read highlight: scroll text highlight, read progress text, scroll-linked paragraph.
- Scroll velocity skew: scroll speed effect, kinetic headline on scroll, rgb split text.
- Scroll spring heading: oversized heading scroll, horizontal text on scroll, spring scroll text.
- Scrubbed stats band: count up numbers on scroll, stats section, animated statistics.
- Mask shape sections: image mask reveal, clip path scroll, shaped image sections.
- Grid overlay explainer: show the grid, layout grid overlay, column gutter visualisation.
- Scroll camera landscape: scroll controlled 3d camera, mountain landscape hero, cinematic scroll 3d.
Check how a real site does it
Not sure which technique a site you like uses? Run it through the animation library checker or open the gallery of site breakdowns.
Animation library checkerFind out whether a site runs GSAP, Three.js, Lenis or Framer Motion.
Website font finderThe fonts a page really loads, from just a URL.
Color palette from URLThe colors a site really uses, ranked, as copy-ready CSS.
Design token extractorPull a site's CSS variables and tokens as JSON or Tailwind.