Scroll Reveal Text

Premium scroll-linked text reveal — words, characters, or lines emerge from muted gray to bright white as the user scrolls, with optional blur dissolve and staggered cascade.

Motion Effectsscrollscrolltextrevealanimationtypographyblurframer-motionstorytelling

Scroll Reveal Text

WORD · BLUR

Crafted for the

next generation

of ambitious

builders.

CHAR · SCALE

MAKE IT

BIG, BOLD

AND LOUD.

WORD · SLIDE X

Every great product

starts with a single

thoughtful decision

made boldly.

WORD · SLIDE Y

Move faster

than anyone

thought was

possible.

WORD · ROTATE

The future of

interfaces starts

with words that

come alive.

WORD · SKEW

Ship products

your users will

genuinely love

forever.

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.

Installation