CrazyGLNeon 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.
Usage
import NeonFluid from '@crazygl/hero-neon-fluid';
export default function Page() {
return (
<NeonFluid
colorA="#ff2d8a"
colorB="#5cf2ff"
colorC="#a26cff"
glow={1.2}
/>
);
}Customise
- Style —
backgroundColor, the three-stop ink palettecolorA/colorB/colorC,glow(bloom), andexposure(tonemap). - Simulation —
flowSpeed,dyeDissipation(how long colour lingers),velocityDissipation(how long momentum lingers), andambientStir(idle background currents). - Pointer —
splatForce(momentum a drag injects) andsplatRadius(stroke size).
Best for
- AI and creative-tool launch pages that want a living, generative feel
- Premium, dark, cinematic product and brand sites
- Music, nightlife, and event landing pages
- Interactive portfolio and agency hero sections
One command, zero config.
npm install @crazygl/hero-neon-fluidImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import NeonFluid from '@crazygl/hero-neon-fluid';
export default function Landing() {
return (
<NeonFluid />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import NeonFluid from '@crazygl/hero-neon-fluid';
export default function Page() {
return (
<section>
<NeonFluid
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
