# Paint reaction diffusion
Mount an interactive reaction-diffusion layer with a typed brush.

## APIs demonstrated

- [ReactionDiffusion](/reference/components/reaction-diffusion/) from `@pibbl/core/textures`
- [ReactionDiffusionProps](/reference/types/textures/) from `@pibbl/core/textures`
- [TextureBrush](/reference/types/textures/) from `@pibbl/core/textures`

## Complete example

[Plain source](/minimal/textures/texture-reaction-component.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
/** @jsxImportSource @pibbl/core */
import { pibbl } from "@pibbl/core";
import {
  ReactionDiffusion,
  texturePalettes,
  type ReactionDiffusionProps,
  type TextureBrush,
} from "@pibbl/core/textures";

const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 200;
document.body.append(canvas);

const brush: TextureBrush = { radius: 6, strength: 0.8 };
const props: ReactionDiffusionProps = {
  seed: 7,
  preset: "spots",
  palette: texturePalettes.ember,
  resolution: { width: 128, height: 80 },
  brush,
};
const controller = pibbl(canvas, <ReactionDiffusion {...props} style={{ width: 320, height: 200 }} />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

```

## Usage notes

- The layer owns its simulation until the Pibbl controller is disposed.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.