Hero made by @ybouane.

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

Demo

Progressive Blur Text

Install

npm install @crazygl/hero-progressive-blur-text

Usage

import ProgressiveBlurText from '@crazygl/hero-progressive-blur-text';

export default function Hero() {
  return (
    <ProgressiveBlurText
      text="DRIFT"
      eyebrow="Aether Studio"
      tagline={"Where sharp ideas soften\ninto something quietly new."}
      backgroundColor="#f51d10"
      textColor="#0b0b0b"
      maxBlur={58}
    />
  );
}

Customise

• Content — text (the big word), eyebrow, tagline.
• Blur — maxBlur, blurStart, blurCurve, direction (sharp at top or bottom).
• Type — fillWidth, position, verticalAdjust, letterSpacing, fontFamily, fontWeight.
• Colours — backgroundColor, transparentBackground, textColor, eyebrowColor, taglineColor.

Best for

• Bold editorial / fashion landing pages.
• Studio and agency wordmark heroes.
• Minimal, type-forward splash 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.