CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/floating-ink

Floating Ink

Ink clouds drifting through water — domain-warped FBM noise, layered with transparency, slowly evolving so the silhouettes never repeat.

ReactWebGLInteractiveFont#ink#fluid#fbm#smoke#premium

Usage

import FloatingInk from '@crazygl/hero-floating-ink';

export default function Page() {
  return (
    <FloatingInk
      heading="Ink in water."
      inkA="#4d18ff"
      inkB="#ff3aa1"
      inkC="#19e0ff"
      warp={1.4}
      speed={0.4}
    />
  );
}

Customise

  • Content — contentType, heading, subheading, columns / custom node.
  • Ink — transparent background toggle, waterColor, three ink colours inkA/inkB/inkC.
  • Field — density, scale (cloud feature size), speed (drift), warp (domain-warp amount).
  • Interaction — pointerInjection (strength of the cursor's local ink boost).

Best for

  • Beauty, fragrance, and cosmetics brands.
  • Artists and creative / design portfolios.
  • Music and audio products.
  • Abstract editorial covers and premium landing pages.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-floating-ink
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 FloatingInk from '@crazygl/hero-floating-ink';

export default function Landing() {
  return (
    <FloatingInk />
  );
}
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 FloatingInk from '@crazygl/hero-floating-ink';

export default function Page() {
  return (
    <section>
      <FloatingInk
        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

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.

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.

Liquid Aurora Gradient

A full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow lava-lamp / aurora flow with deep black negative space; the pointer gently pulls the fluid toward the cursor.

Shader Playground

A live, full-bleed procedural shader background — domain-warped fractal Brownian motion mixed through an iridescent fresnel palette, with the headline and CTA layered cleanly on top. The pointer subtly steers the flow.

Floating Origami

Paper polygons fold and unfold as they drift across soft directional light. Each shape has its own crease line and fold cycle.

Floating Monolith

A glossy obsidian monolith floats on screen, rotating slowly, sampling a procedural HDRI for genuine mirror reflections. Emissive light strips travel down its faces in a hypnotic loop.Live customizer

Floating Ink

Transparent backgroundDrop the water bg so the ink blooms float over the page bg.WaterInk AInk BInk CDensity1Cloud scale1Drift speed0.4Warp amount1.4Pointer injection1Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.