<bg-wc>

Animated backgrounds for any HTML

Dozens of presets across WebGL and Canvas2D. Reads your design tokens via shadow-DOM inheritance. Auto-pauses off-screen and on tab hide.

<bg-wc preset="mesh-gradient" intensity="0.65">…</bg-wc>

Preset gallery

Showing one group at a time keeps the page under the browser's WebGL context limit — switch groups to load the rest.

Quick start

<script type="module" src="https://unpkg.com/@profpowell/bg-wc"></script> <bg-wc preset="dither" intensity="0.7"> <h1>Hero headline</h1> <img slot="fallback" src="hero.webp" alt=""> </bg-wc>

Tokens consumed: --color-background, --color-text, --color-primary, --color-accent, --color-info, --color-success, --color-warning, --color-error. Override any with --bg-wc-color-*.