A first-class shader resource for coding agents

Paste one URL.
Ship a real shader.

Give Codex, Claude Code, or another coding agent this page. It gets a stable API, machine-readable parameters, working source, a live example, and the constraints needed to integrate a Ditherlab background properly.

https://ditherlab.app/agents/

SMOKEBAYER 8×8WEBGL2

Ready-to-paste instruction

Tell the agent what good integration means.

Use the Ditherlab agent kit at https://ditherlab.app/agent-kit/v1/manifest.json to add one shader background to this project. Match the existing stack and design. Preserve semantic HTML and interaction contrast; provide a static no-WebGL fallback, a reduced-motion state, visibility pause, resize handling, context-loss recovery, and cleanup. Do not import the full editor.

Import, configure, start.

<canvas id="dither-bg" aria-hidden="true"></canvas>

<script type="module">
  import { createDitherlabBackground } from
    "https://ditherlab.app/agent-kit/v1/ditherlab-background.js";

  const shader = createDitherlabBackground(
    document.querySelector("#dither-bg"),
    {
      scene: "smoke",
      dither: "bayer8",
      palette: ["#050510", "#312e81", "#7c6cff", "#e0e7ff"],
      pixelSize: 4,
      speed: 0.11,
      seed: 0.42
    }
  );

  shader.start();
  // Later: shader.set({ scene: "voronoi" });
  // On teardown: shader.destroy();
</script>

Remote import is ideal for prototypes. For production, vendor the module with its LICENSE and NOTICE so your build stays pinned.

What agents can choose

Six scenes. Five treatments. Explicit controls.

Scenesmesh · neuro · warp · smoke · voronoi · blobs

Ditherquantize · bayer8 · noise · halftone-dots · halftone-lines

Controlspalette · pixel size · halftone size · scale · speed · seed · DPR

Lifecyclestart · pause · set · resize · destroy

Read the complete machine-readable contract →

Integration contract

A shader is the atmosphere, not the interface.

Keep text, controls, and semantic structure in HTML—not inside the canvas.
Maintain readable contrast across every animated frame.
Use a static background when WebGL2 is unavailable or JavaScript is off.
Respect reduced motion and pause work when the page is hidden.
Destroy the renderer when its component unmounts.
Use one deliberate shader surface instead of covering every section.

Source and permission

Built to be copied responsibly.

The standalone background kit is Apache-2.0 licensed and may be used in personal, client, and commercial websites. Keep its license and attribution when redistributing the source. This grant covers the background kit, not the complete Ditherlab editor.

The procedural scene work acknowledges Paper Shaders by paper.design. The kit is a compact Ditherlab implementation derived from those techniques; details are preserved in the NOTICE.