| name | vantajs-background |
| description | Add animated WebGL background effects with Vanta.js — setup, parameters, resizing, performance considerations, and integration patterns in React/Next.js. |
| metadata | {"openclaw":{"emoji":"🌊","source":"https://github.com/MengTo/Skills"}} |
Vanta.js — Animated WebGL Backgrounds Skill
When to use
- Decorative animated backgrounds behind hero sections
- Quick "wow" factor without building a full Three.js scene
- Lightweight integration into static sites or React/Vue
Key APIs
- Init:
const effect = VANTA.WAVES({ el: "#hero", ...options })
- Update:
effect.setOptions({ color: 0xff88cc })
- Resize:
effect.resize() (if container size changes)
- Cleanup:
effect.destroy() (important in SPAs)
Quick recipe — Waves background
<div id="hero" style="height: 70vh;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
const effect = VANTA.WAVES({
el: "#hero", color: 0x0b1220,
shininess: 40, waveHeight: 16, zoom: 0.9
});
</script>
React cleanup pattern
useEffect(() => {
const effect = VANTA.WAVES({ el: heroRef.current, ... });
return () => effect.destroy();
}, []);
Common pitfalls
- Container has no size → nothing visible
- Multiple WebGL canvases → GPU load (keep to 1-2/page)
- Mobile/older GPU issues → provide fallback background
- Bundling: some builds require
window.THREE or passing THREE in options
Tips for AI Agents
- Ask which effect (waves, birds, fog, net, etc.) and brand colors.
- Confirm mobile support requirements.
- Check if effect is behind text (readability concerns).
