CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/animated-text-reveal

Animated Text Reveal

A paragraph that unblurs and fades in word by word as the viewer scrolls — with an initial blur and initial opacity that mean even the un-revealed words sit softly on the page rather than disappearing.

ReactFont#scroll-reveal#typography#blur#fade-in#word-by-word

Usage

import AnimatedTextReveal from '@crazygl/hero-animated-text-reveal';

export default function Page() {
  return (
    <AnimatedTextReveal
      text="This text unblurs and fades in word by word as you scroll."
      initialBlur={3}
      initialOpacity={0.15}
      fadeDelay={0.02}
      textColor="#ffffff"
    />
  );
}

Customise

  • Content — text (paragraph copy; Enter for hard line breaks), optional ctaLabel + onCTAClick (URL or function).
  • Reveal — initialBlur, initialOpacity, fadeDuration, per-word fadeDelay, fadeEasing; scrollStart/scrollEnd window (scroll mode) or autoplaySeconds (none mode).
  • Typography — textColor, textAlign, fontSize, lineHeight, letterSpacing, maxWidth, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground, bgColor, accent glow (accentColor, accentStrength) and vignetteStrength.

Best for

  • Brand mission statements and manifesto sections
  • Premium SaaS hero stories and agency landing pages
  • In-page case-study openers where "coming into focus" is the message
01 · Install the package

One command, zero config.

npm install @crazygl/hero-animated-text-reveal
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import AnimatedTextReveal from '@crazygl/hero-animated-text-reveal';

export default function Landing() {
  return (
    <AnimatedTextReveal />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import AnimatedTextReveal from '@crazygl/hero-animated-text-reveal';

export default function Page() {
  return (
    <section>
      <AnimatedTextReveal
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

TextFluxUnveil

A paragraph whose first N words start fully revealed (setting up context) and the rest fade in as the viewer scrolls — perfect for 'context → reveal' headlines.

Reveal Text Scroll

A heading revealed by a directional wipe — one of eight angles — with an optional layered effect: a blur-in, a colour morph from start to end, or a chromatic-aberration split that resolves as the reveal completes.

Unblur Text Reveal

A paragraph that resolves word-by-word as the viewer scrolls, with a choice of six animation styles — blur, slide-up, scale, rotate, wave, or glow — and a colour transition from an initial muted hue to the final readable colour.

Blurry Text FX

Each word starts heavily blurred and resolves into focus on a stagger. Plays once on load or loops with a configurable hold.

Ultimate Scroll Text

A long paragraph that reveals as the viewer scrolls — word-by-word, letter-by-letter, or line-by-line — with a soft ghost copy underneath that hints at the next words just before they arrive.

Rolling Text

Each character rolls through a vertical stack of duplicate copies of itself in a continuous loop, with a blur pulse mid-roll and a per-character stagger.Live customizer

Animated Text Reveal

Initial blur3pxBlur amount on un-revealed words. 3 px is the canonical reference default.Initial opacity0.15Opacity of un-revealed words. 0 = invisible until reached; 0.1–0.3 = ghost; 0.5+ = visible-but-soft.Fade duration0.3sHow long the per-word transition takes.Per-word delay0.02sCumulative stagger between successive words.EasingScroll start (%)15%Scroll progress at which the reveal starts. 0% = element just entering viewport.Scroll end (%)70%Scroll progress at which the reveal completes.Text colourText colour.AlignmentFont size56pxLine height1.2Letter spacing-0.01emMax width900pxHeading fontHeading weight600Transparent backgroundBackground colourAccent glow colourAccent glow strength0.3Vignette0.35InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.