Install
Add the runtime and draw your first shader.
Install
npm install shadertownvgpu comes along as a dependency. There is no WGSL loader to configure and no
bundler plugin: shader sources ship as strings inside the package.
Draw one
import { ShaderCanvas } from "shadertown/react";
export function Hero() {
return (
<div style={{ position: "relative", height: "70vh" }}>
<ShaderCanvas
shader="aurora"
params={{ speed: 0.4, intensity: 1.05 }}
play="visible"
style={{ position: "absolute", inset: 0 }}
/>
</div>
);
}The canvas fills its parent, so give the parent a size. play="visible" means
the shader animates only while it is on screen. See
Performance for the other modes.
Without React
import { createShaderRenderer } from "shadertown";
const renderer = createShaderRenderer(document.querySelector("canvas")!, {
shader: "voronoi",
params: { jitter: 0.4, edge: 0.02 },
dpr: [1, 2],
});
renderer.setParams({ speed: 0.2 }); // live, no recompile
renderer.setPaused(true); // stop drawing, keep the last frame
renderer.destroy(); // release the surfaceWhat the runtime does for you
Every renderer on a page shares one Gpu context and one frame loop. Twenty
cards are twenty passes in a single command buffer, not twenty devices. When
nothing is animating the loop stops entirely, so an idle tab costs nothing.