Radiant
Zero-dependency generative shaders as single HTML files, embedded by iframe
Radiant is Paul Bakaus's MIT-licensed collection of generative shader art for the web. Each effect is one self-contained HTML file with no dependencies and no build step, mixing WebGL and Canvas 2D; you drop it in as a full-bleed iframe and change its parameters at runtime through postMessage. Effects handle mouse and touch input, pause when off-screen, and render device-pixel-ratio aware capped at 2x. The README advertises 94 shaders and the live gallery currently lists 87. There is no npm package - you copy the file.
<iframe src="event-horizon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1"></iframe>Reach for Radiant instead of pulling in three.js or react-three-fiber when all you need is an animated backdrop - it adds literally zero bytes of dependency and cannot break your bundler, because the shader lives in its own iframe document. Copy the single HTML file into /public and iframe it; change look at runtime with postMessage({type:'param',name:'ROTATION_SPEED',value:0.6}), and recolor without touching GLSL by applying a CSS filter to the iframe, which is how the gallery does its six color schemes. The tradeoff is that the iframe is opaque to your app - no React state, no SSR, no easy screenshot - and the shader count in the README (94) is ahead of the published gallery (87).
Why it is here. It solves the animated-background problem with the smallest possible blast radius on a codebase, which is exactly the property an agent should optimise for when adding decoration to someone else's app.
- zero dependencies, zero build step
- single self-contained HTML file per effect
- runtime parameters over postMessage
- CSS-filter recoloring, six schemes
- MIT licensed
Verified 2026-08-15. HTTP 200. https://github.com/pbakaus/radiant, https://raw.githubusercontent.com/pbakaus/radiant/main/README.md, https://radiant-shaders.com/gallery/all, GitHub API repos/pbakaus/radiant
