CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/word-blur

Word Blur

Heading that comes in word-by-word — each word lifts out of a deep blur and slides into focus on a small stagger.

ReactFont#blur#stagger#intro#typography

Usage

import WordBlur from '@crazygl/hero-word-blur';

export default function Hero() {
  return (
    <WordBlur
      heading="We design with intent and ship with confidence."
      wordDuration={700}
      staggerMs={90}
      blurAmount={18}
    />
  );
}

Customise

  • Content — heading, subheading.
  • Reveal — wordDuration (per-word in-time), staggerMs (lag between words), blurAmount (start blur px), yOffset (lift px), loopDelay (0 = play once).
  • Typography — textColor, subColor, fontSize, headingFontFamily, headingFontWeight, lineHeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • SaaS / marketing landing headlines that want a polished entrance.
  • Agency and portfolio statement heroes.
  • Product launch and "manifesto" intro sections.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-word-blur
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 WordBlur from '@crazygl/hero-word-blur';

export default function Landing() {
  return (
    <WordBlur />
  );
}
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 WordBlur from '@crazygl/hero-word-blur';

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

Path Text Reveal

Multi-line heading where each line wipes in via a CSS clip-path from top, bottom, left, right, or centre — with a configurable stagger between lines.

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.

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.

Clip Type Stagger

Each character is clipped from below and rises into place on a stagger — like setting movable type one piece at a time. Plays once on load or loops with a configurable hold.

Progressive Blur Text

A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable.

Text Cycler

A wordmark that cycles between several words or phrases, each one entering with a character-, word-, or line-staggered fade — pick the stagger order from first / last / center / random.Live customizer

Word Blur

Per-word duration (ms)700msStagger (ms)90msBlur start18pxLift offset24pxLoop after (s, 0 = no loop)0sText colourSubheading colourFont size88pxFontWeight700Line height1.1Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.