Ink Bloom — React Animated Background

Ink drops blooming and feathering across wet paper — each front is an fbm-perturbed radius, denser at the core and ring-deposited at the edge, paling as it ages. Light paper base.

View source

Starting live preview

Usage

import { InkBloom, INK_BLOOM_PRESETS } from "@/components/InkBloom";

export function SumiHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <InkBloom {...INK_BLOOM_PRESETS.sumi}
        {...{
          interactive: true,
          speed: 1,
          intensity: 0.92,
          drops: 4,
          spread: 0.26,
          from: "#f4eee2",
          to: "#b9ac96",
          accent: "#191621"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Written in water</h1>
      </div>
    </section>
  );
}

Implementation notes & API

Purpose: sumi-e ink-wash backdrop on a warm fiber paper tone; drops respawn on staggered cycles so the page keeps breathing. Mount: full-bleed layer behind content; the paper is opaque and LIGHT — use dark type over it. Props: speed, intensity, drops (concurrent count), spread, feather, from/to/accent (paper, wash, ink colors). Pointer: interactive is off by default; set it and the freshest drop falls at the cursor. Guardrails: WebGPU required with fallback prop; reduced motion shows a settled page of blooms; one of the few light-background effects here.

Property	Type	Notes / default
`interactive`	`boolean`	false in the library; enabled in this preview
`fallback`	`ReactNode`	Shown when the renderer is unavailable
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT