Reaction–Diffusion
The Gray–Scott model growing coral, mitosis, worms, mazes or spots in real time. Paint new life with your pointer; double-click to reseed. Every frame runs up to 24 simulation steps.
webgl2simulationgenerativepointer5 files · 472 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/reaction-diffusion.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs reaction-diffusionUsage
import { ReactionDiffusion } from "@/components/opus/backgrounds/reaction-diffusion";
<ReactionDiffusion pattern="coral" className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | "coral" | "mitosis" | "worms" | "maze" | "spots" | "waves" | "coral" | Named feed/kill presets. |
| feed / kill | number | — | Override the Gray–Scott parameters directly. |
| colorA / colorB / background | string | — | Low/high concentration colours and the empty medium. |
| speed | number | 12 | Simulation steps per frame (1–24). |
| scale | number | 1 | Sim cell size: 1 = one cell per 2 CSS px. |
| brush | number | 0.02 | Paint radius. |
Notes
- A real GPU simulation: ping-pong framebuffers in half-float textures (WebGL2 + EXT_color_buffer_float/half_float).
- Pauses off-screen / in hidden tabs. Falls back to a static gradient without WebGL2.
prefers-reduced-motion: reducedisables the automatic motion; only your own input moves it.- Exported
REACTION_PRESETSlists the parameter sets if you want to animate between species.