# Send paint to a living ink texture
Create a reaction-diffusion recipe and send a typed paint command on click.

## APIs demonstrated

- [reactionDiffusion](/reference/types/textures/) from `@pibbl/core/textures`
- [ReactionDiffusionOptions](/reference/types/textures/) from `@pibbl/core/textures`
- [InkMessage](/reference/types/textures/) from `@pibbl/core/textures`

## Complete example

[Plain source](/minimal/textures/texture-ink-recipe.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, Rectangle } from "@pibbl/core";
import {
  reactionDiffusion,
  useTexture,
  type InkMessage,
  type ReactionDiffusionOptions,
} from "@pibbl/core/textures";

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

function Ink() {
  const options: ReactionDiffusionOptions = { seed: 12, preset: "stripes" };
  const texture = useTexture(reactionDiffusion(options), {
    resolution: { width: 128, height: 80 },
  });
  return (
    <Rectangle
      style={{ width: 320, height: 200, fill: texture }}
      onClick={(event) => {
        const paint: InkMessage = {
          type: "paint",
          u: event.x / 320,
          v: event.y / 200,
          radius: 8,
          strength: 0.9,
        };
        texture.send(paint);
      }}
    />
  );
}

const controller = pibbl(canvas, <Ink />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

```

## Usage notes

- Messages are sent from the event handler, outside component evaluation.

## Documentation version

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