Ink Vortex Shader for React

Ink Vortex Shader draws drops of ink falling into a clear tank lit from behind. Each one rolls into a vortex ring that sinks, slows and widens, trailing a thin thread; as it ages, its rim swells into lobes that droop and tear, the start of the smaller rings real ink breaks into. Two rings at a time sink at different depths, Prussian blue at their cores and soft grey at their edges, on off-white water. A WGSL fragment shader on WebGPU ray marches each ring as a volume of noisy ink and lets the light through it by how much ink it crosses, so the rings read as smoke in water rather than as flat shapes.

Use it behind a design-studio, fragrance, gallery or editorial hero that wants one slow, physical motion on a light ground. For ink floated on paper and combed, use Marbling Shader; for a single thread of smoke on charcoal, Incense Shader; for ink plumes in plain CSS, the Ink background. It's heavy, so it renders at half resolution by default. It runs only while it's on screen, holds a still frame with reduced motion, and shows soft gradients of the same ink in browsers without WebGPU.

Installation

Usage

import { InkVortexShader } from "@/components/ui/ink-vortex-shader";

<InkVortexShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-[#f4f1ea]/80 px-8 py-6">
    <h1 className="text-5xl font-semibold text-slate-900">Studio Nine</h1>
  </div>
</InkVortexShader>

Ink Vortex Shader is a container: your content sits on top of the water, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The water is off-white in both color schemes, so use dark text. Most of the box is clear water, but a ring sinks through wherever it likes, so put copy on a panel of the water color, like the bg-[#f4f1ea]/80 one above, which keeps text-slate-900 above 10:1 everywhere.

Demos

Glow on black

emissive makes the ink glow instead of absorbing the light, for dark pages: here cyan ink in near-black water, with backlightColor turned down to a deep navy so the top of the tank only faintly lifts.

In a card

The tank scales with its box, and the rings with its height. intensity={0.8} thins the ink a little, so a small surface stays light.

Performance

About 1.2 ms of GPU time a frame at 1280×720 on an M2 Max laptop at the default quality={0.5}, and 2.9 ms at full resolution; slower GPUs take several times longer. On a 2× screen the default renders as many pixels as full resolution does on a 1× one, so about 2.9 ms. The rings are soft, so half resolution looks the same. Each pixel marches only the rings its ray passes near, takes big steps through clear water and small ones inside the ink, at most 40, so the empty parts of the tank cost little. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows two soft ellipses of ink on the backlit water, in your colors, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The ink is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, a young ring above an older one breaking into lobes, and stops. Nothing flashes: a ring takes 12 seconds to sink through the tank and fades in and out over more than a second. Dark text on a bg-[#f4f1ea]/80 panel stays above 10:1; bare, it drops to nothing where a ring's core passes behind it.

FAQ

API Reference