Hero made by @ybouane.

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

Demo

Unblur Text Reveal

Install

npm install @crazygl/hero-unblur-text-reveal

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.

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.