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

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.

ReactFont#scroll-reveal#typography#blur#slide#scale#rotate#wave#glow

Usage

import UnblurTextReveal from '@crazygl/hero-unblur-text-reveal';

export default function Page() {
  return (
    <UnblurTextReveal
      text={'Clarity is a feature. We sweat the words so your users never have to.'}
      animationStyle="blur"
      initialColor="#5b6480"
      revealedColor="#ffffff"
      scrollStart={15}
      scrollEnd={70}
    />
  );
}

onCTAClick accepts either a URL string or a function callback when used in React.

Customise

  • Content — text, ctaLabel, onCTAClick (url string or function).
  • Animation — animationStyle (blur / slideUp / scale / rotate / wave / glow), direction (forward / reverse), blurAmount, speedPreset (slow / natural / fast), fadeDelay.
  • Scroll mapping — scrollStart, scrollEnd, autoplaySeconds.
  • Colour — initialColor, revealedColor, glowColor.
  • Type & layout — textAlign, fontSize, lineHeight, letterSpacing, maxWidth, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground, bgColor, vignetteStrength.

Best for

  • Manifesto / mission statements and editorial intros.
  • Brand storytelling where copy should feel like it's "coming into focus."
  • Scroll-narrative transitions between sections.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-unblur-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 UnblurTextReveal from '@crazygl/hero-unblur-text-reveal';

export default function Landing() {
  return (
    <UnblurTextReveal />
  );
}
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 UnblurTextReveal from '@crazygl/hero-unblur-text-reveal';

export default function Page() {
  return (
    <section>
      <UnblurTextReveal
        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

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.

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.

Rotate Text FX

Each letter rotates independently with offset phase. Trigger the rotation as a one-shot entrance on load, or let it spin forever.

Mouse Wave Text

A wave travels along the heading following the cursor — each letter pops up as the wave passes, then settles back. Switch to auto mode for a hands-off demo.

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.Live customizer

Unblur Text Reveal

Animation styleHow each word transitions from initial to revealed state.DirectionBlur amount10pxInitial blur magnitude. Only used by Blur and Wave styles.SpeedPer-word delay0.04sScroll start (%)5%Scroll progress at which the reveal starts. 0% = element just entering viewport.Scroll end (%)70%Scroll progress at which the reveal completes.Initial colourWord colour before reveal.Revealed colourWord colour after reveal.AlignmentFont size64pxLine height1.2Letter spacing-0.01emMax width900pxHeading fontHeading weight600Transparent backgroundBackground colourVignette0.3InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.