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

Ink Flow Field

On a near-white page, thousands of very thin charcoal lines drift along a divergence-free curl-noise flow field, leaving long curved trails that layer into delicate spirograph and flower-like ink patterns. Minimal, monochrome, calm.

ReactCanvasInteractiveFont#ink#flow-field#curl-noise#particles#trails#monochrome#minimal#generative#calm

Usage

import InkFlowField from '@crazygl/hero-ink-flow-field';

export default function Hero() {
	return (
		<InkFlowField
			heading="Carved in calm."
			flowScale={1}
			trailFade={0.056}
			pointerSwirl={0.8}
		/>
	);
}

Customise

  • Flow — particleCount, flowScale, flowSpeed, lineWidth, lineDarkness, trailFade (the soul of the look).
  • Colour — inkColor, backgroundColor (the paper).
  • Interaction — pointerSwirl.
  • Backdrop — transparent.
  • Content — heading / subheading / two-column / custom content.

Best for

  • Minimalist studio and agency sites
  • Luxury and editorial brands
  • Calm productivity and wellness products
  • Generative-art and typography-led landing pages
01 · Install the package

One command, zero config.

npm install @crazygl/hero-ink-flow-field
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 InkFlowField from '@crazygl/hero-ink-flow-field';

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

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

Magnetic Field Lines

Thousands of particles stream along smooth, divergence-free flow lines — a live visualisation of an invisible magnetic field. The pointer drops a new magnetic pole into the field; lines visibly bend, swirl, and repel around the cursor.

Floating Ink

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

Aurora Plane

A pure-CSS animated aurora hero. Cheap, calm, and responsive — a great default when CSS is enough.

Breathing Gradient Landscape

A product screenshot floats above an abstract gradient terrain that slowly breathes through stacked low-frequency FBM noise. Warm peach peaks fade into soft sage valleys; motes drift up; the camera pans across a 30-second loop with a hint of bob.

Text Flow

A wordmark assembled out of thousands of soft particles, each parked at a sampled pixel of the rasterised text. Move the cursor through it and the particles flee from your hand, then spring back to their target positions.

Vortex Particle Sphere

Thousands of small white dots are spread evenly over a sphere with a Fibonacci spiral, then a vortex field swirls and pulls them toward a focal point — they spiral, streak, and bunch up like matter falling into an accretion disc. Crisp, monochrome, and scientific on pure black.Live customizer

Ink Flow Field

Particle count3500Number of ink lines flowing at once. More builds the pattern faster and denser; fewer reads as airier and sparse.Flow scale1Spatial frequency of the curl-noise field. Low values make long sweeping arcs; high values make tight, busy swirls.Flow speed1How fast the field evolves and how fast lines advect. 0 freezes the field into static streamlines.Line width0.6pxStroke thickness of each ink line. Hairline values keep the build-up delicate.Line darkness0.55Per-stroke ink opacity. Low keeps individual passes faint so layering does the work; high makes each line bolder.Trail fade0.056How quickly old ink fades back toward the page each frame. Lower = longer, more persistent trails that layer into a denser web; higher keeps more white space between the strands.Ink colourColour of the flowing lines. Charcoal and deep greys read as classic ink.BackgroundThe paper. A warm off-white keeps the monochrome calm and high-key.Pointer swirl0.8How strongly the cursor bends the flow into a vortex around it. 0 leaves the field untouched.Transparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.