Open source shaders and visual effects for the web.
Drop-in canvas animations — zero dependencies, zero build step.
Every shader is a self-contained HTML file — <style> + <canvas> + <script>. No framework, no bundler, no runtime. Use them anywhere.
Browse the gallery or download the shader pack. You can also grab individual files from the static/ directory in this repo.
<iframe
src="event-horizon.html"
style="position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: -1;"
></iframe>That's it — a full-screen animated background in one tag.
Shaders accept live parameter updates through postMessage:
const iframe = document.querySelector('iframe');
// Adjust any parameter on the fly
iframe.contentWindow.postMessage(
{ type: 'param', name: 'ROTATION_SPEED', value: 0.6 },
'*'
);Each shader's parameters (name, range, default) are listed in src/lib/shaders.ts.
- Website backgrounds — full-viewport ambient animation behind your content
- Hero sections — eye-catching landing page visuals
- Presentations — animated slides and speaker backdrops
- Digital signage — lobby screens, event displays
- Creative coding — remix, fork, and learn from real Canvas 2D and WebGL techniques
94 shaders across Canvas 2D and WebGL, organized by visual style:
| Tag | Description |
|---|---|
fill |
Full-canvas effects (backgrounds, textures) |
object |
Standalone centered elements |
particles |
Particle systems and swarms |
physics |
Physics simulations (springs, waves, gravity) |
noise |
Perlin/simplex noise-driven visuals |
organic |
Fluid, biological, and natural forms |
geometric |
Hard-edged patterns and tessellations |
Every shader includes:
- Mouse/touch interaction
- Tunable parameters via
postMessage - Visibility-based pause (saves battery)
- DPR-aware rendering (capped at 2x)
- 60fps targeting on standard hardware
The gallery supports 6 color schemes applied via CSS filter on the iframe — no shader modification needed:
| Scheme | Filter |
|---|---|
| Amber (default) | none |
| Mono | grayscale(1) |
| Blue | hue-rotate(175deg) |
| Rose | hue-rotate(300deg) saturate(1.1) |
| Emerald | hue-rotate(90deg) saturate(1.2) |
| Arctic | hue-rotate(180deg) saturate(0.5) brightness(1.1) |
npm install
npm run dev # Start dev server
npm run build # Production build
npm run check # TypeScript + Svelte checksThe gallery frontend is SvelteKit 2 + Svelte 5. Shaders themselves require no build step.
See CONTRIBUTORS.md for local development setup, conventions, and how to add new shaders.
MIT — Copyright (c) 2025 Paul Bakaus
Use these shaders in personal projects, commercial products, client work — whatever you want. Attribution is appreciated but not required.
