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 live Gray-Scott reaction-diffusion simulation in WebGL that grows coral and fingerprint patterns across the surface, run on a small ping-pong grid and upscaled with a relief-shaded display pass. Ink, paper and accent colors, feed and kill rates, grid detail, growth speed, self-seeding, a drifting eraser, front accent and relief are all props; growth can steer around an element you pass by ref, and the cursor or a tap seeds new colonies. It fades up softly out of its paper color on load, steps per frame adapt to the device, it pauses offscreen, grows one settled still frame for reduced motion and falls back to a CSS pattern without WebGL.
The import and the props worth knowing about, in one place.
import { ReactionDiffusion } from "@/components/beste/component/reaction-diffusion";
import { useRef } from "react";
// Growth steers around the text block you pass as avoidRef
const copy = useRef<HTMLDivElement>(null);
<section className="relative min-h-[40rem]">
<ReactionDiffusion className="absolute inset-0" avoidRef={copy} />
<div ref={copy} className="relative max-w-2xl">...</div>
</section>
<ReactionDiffusion
className="min-h-[32rem]"
inkColor="var(--foreground)" // any CSS color, tokens included
accentColor="var(--primary)"
feed={0.037} // thinner, wormier pattern
kill={0.06}
resolution={0.8} // finer grid
seeding={0.2} // seeds itself less often
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the grown pattern. Any CSS color, tokens included. |
paperColor | string | — | Color of the empty ground. |
accentColor | string | — | Color of the growing fronts and the faint wash around them. |
feed | number | — | Gray-Scott feed rate: lower thins the pattern into worms, higher fills it into spots. |
kill | number | — | Gray-Scott kill rate: lower spreads coral, higher breaks it into dots. |
resolution | number | — | Grid detail, 0 (soft, cheap) to 1 (fine). |
speed | number | — | Growth speed, 1 is the default pace. |
seeding | number | — | How often new colonies seed themselves, 0 (never) to 1 (often). |
erase | number | — | A slow drifting eraser that keeps the pattern changing, 0 to 1. |
edges | number | — | Strength of the accent on the growing fronts, 0 to 1. |
relief | number | — | Light and shade on the pattern, 0 to 1. |
avoidRef | RefObject<HTMLElement | null> | — | Growth steers around this element, so text laid over it stays readable. |
interactive | boolean | — | The cursor and taps seed new colonies. |
paused | boolean | — | Freeze the growth where it is. |
className | string | — | |
children | ReactNode | — |