Surface study no. 04
A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.
A real-time stable fluids simulation in WebGL: pigments swirl through water with vorticity and pressure solving on a small grid, glowing like light on a dark ground and mixing like ink on a light one. The cursor drags ink through the field, clicks switch pigment and drops land on their own when nobody is drawing. Ground color, pigments, grid sizes, solver passes, vorticity, fade, splash size, force and drop interval are all props. The display resolution adapts to the device, it pauses offscreen, settles into a still for reduced motion and falls back to a soft gradient without half-float support.
The import and the props worth knowing about, in one place.
import { InkFluid } from "@/components/beste/component/ink-fluid";
// As a layer behind content
<section className="relative min-h-[40rem] bg-foreground text-background">
<InkFluid className="absolute inset-0" />
<div className="relative">...</div>
</section>
<InkFluid
className="min-h-[32rem]"
groundColor="#f4efe6" // any CSS color; light grounds mix like ink
pigments={["#1a264c", "#d32f1a", "#b08a2e"]} // colors as they read on white paper
pigment3="#b08a2e" // or set pigments one by one: pigment1, pigment2, pigment3
vorticity={0.8} // tighter eddies, 0 to 1
fade={0.15} // ink lingers longer, 0 to 1
autoInterval={0} // no drops on their own
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
groundColor | string | — | Color of the ground the ink moves over. Dark grounds make the pigments glow; light ones mix them like ink on paper. |
pigments | string[] | — | Pigment colors as they read on white paper. Clicks and drops cycle through them. |
pigment1 | string | — | First pigment; overrides pigments[0] (a single color, so it can be set from a color picker). |
pigment2 | string | — | Second pigment; overrides pigments[1]. |
pigment3 | string | — | Third pigment; overrides pigments[2]. |
simResolution | number | — | Cells on the short side of the velocity grid. Higher is finer and costlier. |
dyeResolution | number | — | Cells on the short side of the dye grid. Higher keeps the ink edges sharper. |
pressureIterations | number | — | Pressure solver passes per frame. More keeps the flow tighter. |
vorticity | number | — | How much the flow curls into eddies, 0 to 1. |
fade | number | — | How quickly the ink fades back into the ground, 0 to 1. |
splatSize | number | — | Size of each splash of ink, 0 to 1. |
force | number | — | How hard the cursor and the drops push the water, 0 to 1. |
autoInterval | number | — | Seconds between drops that land on their own when nobody is drawing. 0 turns them off. |
interactive | boolean | — | The cursor drags ink and a click switches pigment. |
paused | boolean | — | Freeze the water where it is. |
className | string | — | |
children | ReactNode | — |