Reaction Diffusion Plate
A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
- Category
- Backgrounds
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useEffect, useRef } from "react";
const PRESETS: Record<string, { f: number; k: number }> = {
coral: { f: 0.0545, k: 0.062 },
mitosis: { f: 0.0367, k: 0.0649 },
maze: { f: 0.029, k: 0.057 },
};
function hexToRgb(hex: string): [number, number, number] {
const h = hex.replace("#", "");
const n = parseInt(
h.length === 3 ? h.split("").map((c) => c + c).join("") : h,
16
);
return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Most organic-looking backgrounds are noise dressed up as biology. This one is the biology: a Gray-Scott reaction-diffusion system integrated on every frame, where two chemicals diffuse at different rates and react as A plus two B becomes three B, with a feed term adding the first everywhere and a kill term removing the second. Coral, mitosis and maze are not three effects — they are the same two lines of arithmetic at different feed and kill rates, which is the whole appeal of the model. Three details decide whether it works. The buffers must ping-pong, and not for speed: writing each new value back into the array still being read means a cell's neighbours have already advanced by the time the loop arrives, so the update becomes order-dependent and the pattern shears diagonally in the direction of iteration — it reads as a smear bug and is actually a mathematical one. The timestep is a ceiling rather than a dial, because one is the largest step this kernel is stable at and raising it to speed things up sends the values to NaN within a second, leaving the plate permanently black; more steps per frame is the correct lever. And the Laplacian needs its two-tenths orthogonal and one-twentieth diagonal weights, since a flat kernel is not isotropic at this resolution and the patterns come out visibly square. The seeding is hashed rather than random so the plate is the same picture on every mount, and the solver runs on a low-resolution buffer that CSS stretches, which is both cheaper and softer than solving at device resolution.
Curator’s note
Write the new value back into the array you are reading and the pattern shears diagonally — it looks like a rendering smear, but it is the update order leaking into the mathematics.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Topographic Contour Drift
backgroundsA survey map of terrain that never existed, traced live with marching squares and drifting underfoot.
Ordered Dither Plate
backgroundsA gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.
Pointer Warp Dot Field
backgroundsA canvas dot grid that bulges and brightens away from the cursor.