Leopard organic
Stable spotted print in earthy ochre and umber. Embossed for depth.
pnpm add @caustics/reaction-diffusion <!-- Svelte 5 --> <script> import ReactionDiffusion from '@caustics/reaction-diffusion/svelte'; </script> <ReactionDiffusion preset="mitosis" interaction="inject" />
pnpm add @caustics/reaction-diffusion /* React */ import { ReactionDiffusion } from '@caustics/reaction-diffusion/react'; return <ReactionDiffusion preset="coral" visualization="ink" />;
pnpm add @caustics/reaction-diffusion /* Vanilla — programmatic mount() */ import { mount } from '@caustics/reaction-diffusion'; const api = mount(document.querySelector('#hero'), { pattern: 'lambda', visualization: 'embossed', interaction: 'feedMap', }); /* api.update({ ... }), api.pause(), api.reset(), api.destroy() */
Each preset is a curated combination of Pearson class (the math), color palette
(the mood), visualization style (the medium), and tuning. Four aesthetic
categories — organic, geometric, atmospheric, dramatic. Hover any card to
reseed its simulation. Set one with preset="mitosis", override
individual props as needed.
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | — | One of 20 curated configurations (mitosis, coral, …). User props override preset values. |
| pattern | PearsonClass | — | Pearson pattern class. Sets canonical feed/kill values for that family. |
| feed / kill | number | per-pattern | Override the Gray-Scott feed (0.01–0.1) and kill (0.04–0.07) rates directly. |
| visualization | Visualization | 'flat' | How the state is rendered: 'flat' · 'ink' · 'embossed' · 'isolines'. |
| colors | ColorSpec | graphite → indigo | Palette specification. Interpolated in OKLCH by default. |
| interaction | Interaction | 'none' | Pointer mode: inject, grow, matter, erase, perturb, vortex, singularity, feedMap, none. |
| speed | number | 1.0 | Multiplier on simulation steps per frame. Effectively a speed knob. |
| paused | boolean | false | Freeze the simulation. State is preserved; resume continues from the current frame. |
| reducedMotion | ReducedMotionMode | 'pause' | Behaviour under prefers-reduced-motion: reduce. |
caustics-reaction-diffusion/ ├── svelte/ ReactionDiffusion.svelte · index.ts · types.ts ├── react/ ReactionDiffusion.tsx · index.ts · types.ts ├── vanilla/ reaction-diffusion.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
Reaction Diffusion is a real-time GPU implementation of the Gray-Scott model — the mathematics Alan Turing predicted in 1952 would produce the patterns we see in nature. Spots, stripes, mazes, mitosis, traveling waves, soliton-like structures. For 70 years these have lived in academic papers and generative-art experiments. Now they’re a component.
Seventeen named pattern classes (α through σ from Pearson and Munafo’s catalog) let you select by name without tuning the chaotic feed/kill parameter space by hand. Four visualization styles — flat, embossed, isolines, ink — render the same simulation as four distinct aesthetic worlds. Nine interaction modes — none, inject, grow, matter, erase, perturb, vortex, singularity, feedMap — make the pattern respond to your cursor in emergent, unscripted ways, on mouse and touch alike. Twenty curated presets, four aesthetic categories, OKLCH color interpolation, smooth scroll reactivity, three framework adapters, ~29KB gzipped, 60 fps on integrated graphics.
There is no other paid implementation of this in the JavaScript ecosystem. We checked.
Caustics Commercial License · lifetime updates within v1