Hero made by @ybouane.

@crazygl/hero-floating-ink

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

Demo

Floating Ink

Install

npm install @crazygl/hero-floating-ink

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.

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.