A collection of animated canvas backgrounds, frontend animation references, and complete website designs. Built with vanilla JS, HTML5 Canvas, anime.js v4, and GSAP.
backgrounds/ 14 standalone animated canvas backgrounds
catalog/ Reference docs for animation libraries & effects
showcase/superseed/ Complete website designs using Superseed brand
Each background is a self-contained HTML file with a full-screen animated canvas effect:
| Effect | Technique |
|---|---|
| Aurora Borealis | Sine-wave curtains with screen blending |
| Bokeh / Fireflies | Depth-layered radial gradients with additive blending |
| Flow Field | 2200 particles following noise-based vector field |
| Galaxy | 3200 particles in logarithmic spiral arms |
| Gradient Mesh | CSS blur blobs with Lissajous motion |
| Lightning | Recursive fractal branching with multi-layer glow |
| Metaballs | SVG feGaussianBlur + feColorMatrix goo filter |
| Neon Grid | Mouse-proximity glow on 40x40px grid |
| Plasma | Sine wave interference with precomputed LUT |
| Ribbons | Bezier ribbon strands with triple oscillation |
| Smoke | 650 particles with turbulence and additive blending |
| Starfield | 3D projected stars with speed streaks |
| Topographic | Marching squares contour lines on animated height field |
| Voronoi | Brute-force tessellation with edge glow |
- BACKGROUND_CATALOG.md — 100+ canvas/WebGL background effects organized by category
- FRONTEND_TOOLKIT.md — 60+ animation libraries across 11 categories with CDN links and integration recipes
Complete single-page websites built with animated canvas backgrounds:
- 15 anime.js v4 sites with IntersectionObserver animations
- 3 GSAP + ScrollTrigger + Lenis sites with pinned sections, scrubbed parallax, and smooth scroll
- Vanilla JS + HTML5 Canvas (no build step)
- anime.js v4 UMD via CDN
- GSAP 3 + ScrollTrigger + Lenis via CDN
- Google Fonts
- All files are self-contained — open any HTML file directly in a browser