Shader Atlas
한국어
⌖ Interactive

Reaction Diffusion

반응-확산

Coral-like patterns grow across the layer and bloom where the pointer drags.

Also known as: ReactionDiffusionGray-Scottreaction-diffusion pattern

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, ReactionDiffusion } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ReactionDiffusion />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, ReactionDiffusion } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ReactionDiffusion/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, ReactionDiffusion } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ReactionDiffusion />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, ReactionDiffusion } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ReactionDiffusion />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ReactionDiffusion',
    }
  ]
}, { disableTelemetry: true })

Props · ReactionDiffusion

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
presetPatterncoralcoral · mitosis · spots · maze · worms · fingerprints · holes · solitons · bubbles · waves · flowers · customNamed Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand
feedFeed0.05450.01 – 0.1 (step 0.001)Feed rate — how fast chemical U is replenished (used when Pattern = Custom)
killKill0.0620.03 – 0.07 (step 0.001)Kill rate — how fast chemical V is removed (used when Pattern = Custom)
diffusionRatioDiffusion Ratio0.50.2 – 0.9 (step 0.01)Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like)
featureSizeFeature Size31 – 6 (step 0.1)Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells
speedSpeed61 – 16 (step 1)Simulation steps per frame — higher evolves the pattern faster
brushSizeBrush Size0.040.01 – 0.3 (step 0.01)Radius of the cursor brush that seeds new reagent as you drag
brushStrengthBrush Strength0.60 – 1 (step 0.01)How much reagent the cursor injects while dragging
colorABackgroundtransparent—Background color (empty regions between cells)
colorCWall Color#38bdf8—Accent color at the cell walls (mid pattern values)
colorBCell Color#e2f5ff—Color of the dense cell interiors (high pattern values)
contrastContrast0.50 – 1 (step 0.01)Sharpness of the cell walls — higher gives crisper, more graphic edges
thresholdThreshold0.280.05 – 0.6 (step 0.01)Pattern level the colors are centered on — shifts the balance of background vs. cells
colorSpaceColor Spaceoklchlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
reliefRelief0.40 – 1 (step 0.01)Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look)
lightAngleLight Angle1350 – 360 (step 1)Direction the surface light comes from, in degrees
childInfluenceInfluence0.60 – 1 (step 0.01)When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child)
childContrastContrast0.50 – 1 (step 0.01)Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading
childThresholdThreshold0.50 – 1 (step 0.01)Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it
childInvertInvertfalse—Flip which tones of the child grow the pattern (bright vs. dark areas)

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ink Flow잉크 플로

Colorful ink spreads under a drag and keeps swirling after the pointer lifts.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Voronoi보로노이

A cellular pattern that colors each pixel by its distance from scattered points, with adjustable cell edges.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Plasma플라즈마

An animated glow of color that swirls and flows across the canvas.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Marble대리석 무늬

A marble-like swirl with veins formed by noise-distorted waves.

Connected patterns like coral, cells, or stains grow across the screen, with new marks blooming where you drag. It resembles pigments spreading and meeting to form organic boundaries.

`preset` chooses the pattern’s starting character; its default is `coral`. `feed` (default 0.0545, range 0.01–0.1) and `kill` (default 0.062, range 0.03–0.07) let you tune the pattern when `preset` is Custom. `featureSize` changes pattern scale (default 3, range 1–6), and `speed` changes simulation steps per frame (default 6, range 1–16).

This generator fills the screen without an input image. A plain background keeps its boundaries clear; the pattern keeps moving and accepts drag input, so keep it separate from text people need to read.

When to use

Use it for an organic hero background, interactive pattern-making, or visuals that explain biological or chemical forms. Avoid it where prose or small information is the focus.

Open as page ↗