The same element, a different context
Everything here draws into an ordinary canvas — it asks it for a webgpu context rather than a 2d one. So the element sizes, positions and stacks exactly as any html canvas background animation does, and the surrounding CSS does not have to know the difference.
Where the per-frame work goes
A 2D canvas animation computes each frame in JavaScript and issues draw calls for it, which puts the frame budget on the main thread — the same thread as your page. A shader is handed to the GPU once and evaluated there, per pixel, so the JavaScript per frame is a handful of uniforms. The main thread stays free.
What you write
One component in React, or a call to the renderer in Svelte, Solid, Astro or plain HTML. It starts drawing when the element is on screen and stops when it leaves, holds a still frame for readers who ask for reduced motion, and caps resolution and frame rate where you tell it to.
import { ShaderCanvas } from "shadertown/react";
export function Background() {
return <ShaderCanvas shader="flow" play="visible" />;
}
