Hero made by @ybouane.

@crazygl/hero-typographic-fluid-simulation

A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the background stays minimal. Move the cursor to inject velocity and color into the letters.

Demo

Typographic Fluid Simulation

Install

npm install @crazygl/hero-typographic-fluid-simulation

Usage

import TypographicFluidSimulation from '@crazygl/hero-typographic-fluid-simulation';

export default function Page() {
  return (
    <TypographicFluidSimulation
      heading="FLOW"
      colorA="#ff5ec4"
      colorB="#5cf2ff"
    />
  );
}

Customise

• Content — heading (acts as the fluid mask), subheading, ctaLabel, onCTAClick.
• Fluid — fluidScale, fluidSpeed, ambientSwirl, fluidViscosity.
• Colors — colorA, colorB, colorC (accent), backgroundColor.
• Pointer — pointerInjection, pointerColorShift.
• Text — textOpacity, bloomStrength (tendril glow).
• Typography — headingFontFamily (heavy sans with big counters), headingFontWeight.

Best for

• Creative-tool launches and generative-art portfolios.
• AI / SaaS heroes that want a personality moment.
• Music, audio, and magazine-tier editorial sites.

Short, bold words (3–8 letters) with large counters give the fluid the most room to swirl. Heavy sans serifs like Inter Tight 900, Sora, or Archivo Black are the sweet spot.

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.