React Reaction Diffusion Background
Gray-Scott reaction-diffusion simulation background for React and Next.js — emergent Turing patterns of spots, stripes, mazes, and coral evolve in real time on a low-res grid and upscale to full viewport.
React Reaction Diffusion Background preview
A living, breathing simulation of Alan Turing's morphogenesis math: two virtual chemicals diffuse and react across a grid, and out of the noise come spots, stripes, mazes, and coral-like branches that split, merge, and drift forever. Built from a Gray-Scott PDE solved with two Float32Array buffers at 160×90 resolution and upscaled by the GPU, so the compute cost stays flat regardless of viewport size. Zero dependencies, 60 fps on a mid-range laptop, and tuning the feed and kill props gives you wildly different textures — from mitotic spots to coral thickets to maze walls. Perfect for science-forward landing pages, generative-art portfolios, biotech marketing, math-tool heroes, and anywhere the motion needs to feel organic rather than scripted.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the reaction-diffusion background into my projectRelated Components
Voronoi
Shifting cellular tessellation
Hexagon
Illuminated hex grid
Topography
Flowing contour lines
Resonance
Chladni-plate symmetric nodes
Metaballs
Viscous merging blobs
Mesh Gradient
Stripe/Linear-style blurred gradient blobs
FAQ
Was this page helpful?
Sign in to leave feedback.
Rain
Atmospheric rain animation with realistic falling droplets, depth layers, and subtle lightning flashes
Reflection
Aurora-style flowing gradient sheets mirrored as a rippled water reflection for React and Next.js — the top half drifts like northern lights while the bottom half ripples back as if painted on a still Nordic lake.