Hero made by @ybouane.

@crazygl/hero-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.

Demo

Word Blur

Install

npm install @crazygl/hero-word-blur

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.