Ink Background for React

Ink blooms in clear water behind your content: soft plumes unfurl from points across the box, curl into veils and fine filaments as they spread, sink a little and thin out, while new ones bloom somewhere else. They sit at three depths, so the far ones are larger, softer, fainter and slower, and about half the box is always inked. Each plume is one element in its ink's colour, masked by an image the browser draws once from an SVG filter: noise that billows a soft mass and then warps itself, which folds it into the swirls of real ink; the far ones are soft, out-of-focus lumps. CSS keyframes then grow, turn, move and fade each plume, three blooms in three places per loop, so no script runs and nothing repaints. It's indigo ink in a light page and luminous cyan and violet on a dark one.

Use it behind an editorial hero, a studio's landing page or a quote. For soft pigment washes that dry on paper, use Watercolor; for rising smoke, Smoke; for water rings where drops land, Drops; for blobs that fuse instead of spreading, Metaballs.

Installation

Usage

import { Ink } from "@/components/ui/ink";

<Ink className="flex min-h-[32rem] items-center justify-center">
  <h1 className="font-serif text-5xl">The first stroke</h1>
</Ink>

Ink is a container: whatever you put inside sits on top of the ink, in normal flow. It fills its own box, so give it a height or content. The water is whatever is behind it, your page's background by default; for a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Sumi and vermilion

colors takes any CSS colours, theme variables too, and plumes take turns with them: here your text colour, twice, and a vermilion red, like brush ink with a seal.

In a card

A card with count={5} plumes, intensity="subtle" for thinner ink and speed={0.6} for slower blooms, quiet enough to sit behind body copy.

Accessibility

The ink is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion the plumes hold still, mid-bloom, so a calm still of ink in water stays. Nothing flashes: each bloom takes 14 to 31 seconds to unfurl and fade.

Put copy over it in your foreground colour (text-foreground). At the default intensity the ink is thinned so text keeps at least 4.5:1 over a hero's copy area at the densest moment we measured (about 5:1 on a light page, 5.5:1 on a dark one, where the ink is thinner because light ink glows). intensity="strong" darkens every plume by about a third, so use it for headlines; for small body copy, use intensity="subtle" or set it on a surface.

FAQ

API Reference