Sfuma

Animated, grainy gradient canvases from a JSON document. One WebGL2 canvas, no dependencies. Sfuma renders large blurred masses of colour under fine film grain, from a plain JSON composition you can store, diff, generate and hand to an agent.

Install

npm install sfuma

Use

import { createSfuma } from "sfuma";

const canvas = document.querySelector("#hero");
const sfuma = createSfuma({ canvas, config: composition });

// Sfuma reads the canvas box but does not watch it.
new ResizeObserver(() => sfuma.resize()).observe(canvas);

The complete reference

/llms.txt is the whole reference as plain text — every layer, effect, parameter, range and default, generated from the renderer's own metadata. It needs no JavaScript and it is the right thing to give a coding agent.

Layers: solid, linear-gradient, radial-gradient, ellipse, blob, aurora. Effects: blur, displace, domain-warp, flow, swirl, ripple, pinch, kaleidoscope, moire, halftone, pixelate, ascii, chromatic-aberration, vignette, grain, hue, saturation, contrast, brightness. Animation drivers: sine, ping-pong, noise, keyframes.

The interactive parts of this site — the editor, the live examples and the documentation browser — need JavaScript and WebGL2.