hero-fx
◇ demoGPU-accelerated WebGL backgrounds that stay Lighthouse-100 — proof you can have motion and speed.
hero-fx is a small library of GPU background effects — contour fields, a lightning bolt shader, a zoomable Mandelbrot, a 3D dust field, and an SVG logo-glow — that render on a real WebGL context yet never cost the page its 100/100 Lighthouse score.
It exists to settle an argument. “Fast” and “animated” are usually treated as opposites; every heavy hero is justified as the price of looking alive. hero-fx is the counter-proof: a deliberately GPU-driven mesh that starts after first paint, respects prefers-reduced-motion, ships no render-blocking JavaScript, and keeps LCP under half a second.
How it stays fast
- Deferred start. The WebGL context initializes after the page is interactive — the hero animates, but never blocks paint.
- CSS-native where possible. Motion that CSS can do, CSS does; the GPU is reserved for what actually needs shaders.
- No heavy deps. No Three.js, no GSAP — hand-written GLSL and a few hundred lines of TypeScript.
- One knob per effect. Each effect is configurable from a single control surface, so you tune it live and copy the result.
Playground
A self-contained explorer to configure any effect, see it live, and copy the exact setup. Publishing alongside the source.