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)