Hero made by @ybouane.

@crazygl/hero-particle-typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.

Demo

Particle Typography

Install

npm install @crazygl/hero-particle-typography

Usage

import ParticleTypography from '@crazygl/hero-particle-typography';

export default function Hero() {
  return (
    <ParticleTypography
      heading="Words in the dust."
      revealWords="CREATE,DESIGN,BUILD,IMAGINE"
      count={2200}
    />
  );
}

Customise

• Content — heading/subheading, two-columns, or custom node.
• Particles — count, charset, glyphColor, backgroundColor, glyphSize.
• Drift — driftSpeed (curl-noise float), depthFog (atmospheric fade).
• Reveal — revealWords (comma-separated), revealRadius, revealStrength (0 = rings only), ringMode.
• Backdrop — transparent.

Best for

• Premium SaaS, AI, and creative-software landing pages.
• Editorial and typography-led studio brands.
• "Intelligent, crafted" products that want motion with a hint of language.

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.