Scroll Reveal Text — React Component

Scroll-linked text reveal where words, characters, or lines emerge from muted gray to bright white with optional blur dissolve and staggered cascade.

Motion Effectsscrollscrolltextrevealanimationtypographyblurframer-motionstorytelling

Scroll Reveal Text

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

text

The text to reveal. Use \n as line separators in line mode.

mode

Granularity of the reveal unit.

mutedColor

Color of unrevealed units (start state).

activeColor

Color of fully revealed units (end state).

startOffset

Scroll progress (0–1) when the reveal begins.

endOffset

Scroll progress (0–1) when the reveal finishes.

blurAmount

Starting blur in px. Set 0 to disable blur dissolve.

stagger

0 = all units reveal simultaneously · 1 = fully sequential cascade.

Generated JSX

Copy this into your page.

<ScrollRevealText
  text=""
  mode="word"
  mutedColor="#52525b"
  activeColor="#fafafa"
  startOffset={0.05}
  endOffset={0.75}
  blurAmount={6}
  stagger={0.65}
/>

Animation effects

scroll

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Scroll Reveal Text

Scroll Reveal Text is a scroll-driven word illumination effect where words in a paragraph brighten sequentially as the user scrolls through the section. Words start in a muted state and transition to full opacity as the scroll progress advances through each word's position in the text. Built with Framer Motion useScroll and useTransform, the effect creates a reading-pace animation that ties content reveal directly to user attention. Best for mission statements, product stories, and feature descriptions.

Common use cases

Mission statements and manifesto sections
Feature and product story descriptions
Hero section subheading reveals
Scroll-driven marketing copy animations

Installation