Hero made by @ybouane.

@crazygl/hero-blurrytextfx

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

Demo

Blurry Text FX

Install

npm install @crazygl/hero-blurrytextfx

Usage

import BlurryTextFx from '@crazygl/hero-blurrytextfx';

export default function Hero() {
  return (
    <BlurryTextFx
      heading="Out of the haze, into focus."
      trigger="loop"
      startBlur={22}
    />
  );
}

Customise

• Content — heading, optional subheading.
• Trigger — trigger: load (one-shot entrance) or loop (replays after a hold).
• Reveal — startBlur (px), perWordDuration (ms), stagger (ms between words), loopAfter (hold seconds before replay, loop only).
• Typography — textColor, subColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• SaaS and startup landing pages that need a refined headline entrance.
• Editorial / magazine-style hero sections.
• Product launch and announcement pages where the message should "arrive."

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.