Radiant

Open source shaders and visual effects for the web.
Drop-in canvas animations — zero dependencies, zero build step.

Quick Start

Every shader is a self-contained HTML file — <style> + <canvas> + <script>. No framework, no bundler, no runtime. Use them anywhere.

1. Pick a shader

Browse the gallery or download the shader pack. You can also grab individual files from the static/ directory in this repo.

2. Embed it

<iframe
  src="https://stargazers.cn/raw/pbakaus/radiant/main/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.

3. Control it at runtime

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.

Use Cases

• 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

What's Inside

94 shaders across Canvas 2D and WebGL, organized by visual style:

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

Color Schemes

The gallery supports 6 color schemes applied via CSS filter on the iframe — no shader modification needed:

Development

npm install
npm run dev       # Start dev server
npm run build     # Production build
npm run check     # TypeScript + Svelte checks

The gallery frontend is SvelteKit 2 + Svelte 5. Shaders themselves require no build step.

Contributing

See CONTRIBUTORS.md for local development setup, conventions, and how to add new shaders.

License

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.