Hero made by @ybouane.

@crazygl/hero-text-flow

A wordmark assembled out of thousands of soft particles, each parked at a sampled pixel of the rasterised text. Move the cursor through it and the particles flee from your hand, then spring back to their target positions.

Demo

Text Flow

Install

npm install @crazygl/hero-text-flow

Usage

import TextFlow from '@crazygl/hero-text-flow';

<TextFlow
  heading="Pola"
  particleDensity={3}
  particleSize={2}
  mouseRadius={100}
/>;

Customise

• Content — heading (the wordmark), optional subheading and ctaLabel / onCTAClick.
• Particles — particleSize, particleDensity (sampling step; every Nth pixel becomes a particle), particleColor, particleAlpha.
• Interaction — mouseRadius, pushStrength, returnSpeed (spring-back), ambientJitter (idle drift that keeps it alive in a static preview).
• Typography — fontSize, letterSpacing, headingFontFamily, headingFontWeight (heavier weights give more lit pixels per glyph).
• Backdrop — transparentBackground, bgColor.

Best for

• Branded landing pages with a single one-word wordmark.
• Agency, portfolio, and art-collective splash covers.
• Music drops and interactive case-study headers where the heading should read as a substance you can disturb.

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.