Radiant · Index

Radiant

Zero-dependency generative shaders as single HTML files, embedded by iframe

Tier S · Best in classShader PackAsset PackGallerygithub.com

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.

Install

<iframe src="event-horizon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1"></iframe>

For an agent

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.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: Vanilla JS, Svelte
Styling: Shader / GLSL, Vanilla CSS
Distribution: GitHub repository, Direct download / asset pack, Copy-paste snippet
Platform: Web, Platform agnostic
Content type: Code
Agent readiness: Readable open source, Copy-paste ready code, Structured documentation
Accessibility: Known accessibility gaps
Maturity: Actively maintained
GitHub stars: 927

Components it ships

Gradient Background Particle Background Animation

Helps you build

Homepage Splash Screen Features

Notable for

zero dependencies, zero build step
single self-contained HTML file per effect
runtime parameters over postMessage
CSS-filter recoloring, six schemes
MIT licensed

Provenance

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

Also in Textures, Backgrounds & Assets

github.comTier S