CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/typographic-fluid-simulation

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.

ReactWebGLInteractiveFont#typography#fluid#shader#webgl#interactive#creative#ai#saas#premium

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.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-typographic-fluid-simulation
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <TypographicFluidSimulation />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <TypographicFluidSimulation
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

AI Video Generation Portal

A floating prompt card streams a current of energy particles across to a glowing portal ring, through which the generated video or image materializes with a shimmer-dissolve reveal.

Neon Fluid

GPU Eulerian fluid simulation (Stam 1999). Advected dye + velocity ping-pong textures with a Jacobi pressure solve give true divergence-free flow. Drag to inject momentum and colour; additive bloom on the dye field paints glowing smoke through the void.

Typography In Portal

Your headline rendered inside a glowing circular portal — text drifts across the opening, the rim glows and ripples with noise, and the pointer bends the portal in real time. Built as a single fullscreen WebGL shader that samples a canvas-rendered text texture with chromatic aberration.

Typographic Black Hole

A headline warped by a glowing gravitational center. The cursor moves the singularity — letters bend, chromatic-aberrate, and pour toward the event horizon while a starfield lenses behind it.

Thermal Logo

Your logo rendered as a live thermal-camera image — a flowing heat field clipped to the silhouette and mapped through a cold-to-white-hot gradient, with the cursor leaving a glowing heat trail that slowly cools.

Water Ripple Headline

A bold headline printed on a moonlit pool. Stacked Gerstner waves and pointer-driven Gaussian wakes bend the letters in real time, and the CTA fires a circular wavefront across the surface. Reflective night water with soft moon highlights and a low cinematic camera.Live customizer

Typographic Fluid Simulation

Fluid Scale1.4Spatial frequency of the swirls. Low = lava lamp blobs; high = nervous marbled veins. Sweet spot 1.0-1.8.Fluid Speed1Ambient drift rate of the color palette. 0 freezes the marble; above 2 looks frantic.Ambient Swirl1Strength of the always-on curl-noise flow that peels dye tendrils off the letters. 0 = letters sit still; 1 = lively drifting wisps; 2+ = turbulent.Fluid Viscosity0.5How long the velocity and dye linger. Low = whippy paint that snaps back; high = thick honey that holds its swirl and trails for seconds.Color ADominant pigment — the warm hue that swirls into B.Color BSecondary pigment — the cool counter-hue.Color CAccent — highlights at the brightest swirl tips.BackgroundNegative space outside the letters. Keep dark for max color punch.Pointer Injection1.2How forcefully cursor motion stirs the fluid. 0 = decorative cursor; 2 = the cursor leaves a strong dye trail.Pointer Color Shift0.7How much cursor speed shifts the injected hue along the A→B→C palette.Text Opacity1Master opacity of the fluid-filled letters.Tendril Glow0.6Glow that rides the low-density dye wisps so the fluid leaks past the letter silhouette. 0.4-0.8 stays crisp; 1.2+ reads atmospheric and smudged.Heading FontBig bold sans-serifs with large counters work best — Inter Tight, Sora, Archivo Black.Heading Weight900InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.