Product Design
Hero Background Effects
Beginner11 usesVanta DOTS — Interactive Dot Grid Background
Adds an animated, interactive dot grid to your hero section using Vanta.js DOTS. A uniform grid of colored dots pulses and undulates in waves, reacting to mouse position.
vantabackgroundheroanimationdotsgridpatterninteractive
📋
Spec
Vanta DOTS — Interactive Dot Grid Hero Background
What this does
Renders a uniform grid of 3D dots that ripple and pulse in waves across your hero background. Mouse movement creates beautiful wave distortions through the dot field.
Style Name
DOTS
When to use
- Tech, data, or developer-focused products
- When you want a clean, structured but animated background
- Both dark and light themed pages
Implementation
1. Load dependencies in <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>
2. Apply to your hero element
<section id="hero">Your content here</section>
<script>
VANTA.DOTS({
el: "#hero",
mouseControls: true,
touchControls: true,
gyroControls: false,
color: 0x7c3aed,
color2: 0x2563eb,
backgroundColor: 0x060616,
size: 3.5,
spacing: 28,
showLines: true,
speed: 3
});
</script>
3. Key config options
| Option | Description |
|---|---|
| color | Primary dot color |
| color2 | Secondary dot color |
| backgroundColor | Background fill |
| size | Dot size |
| spacing | Grid spacing |
| showLines | Draw connecting lines |
| speed | Wave speed |
React / JSX usage
useEffect(() => {
const effect = VANTA.DOTS({
el: heroRef.current,
THREE: window.THREE,
color: 0x7c3aed,
backgroundColor: 0x060616,
size: 3.5,
spacing: 28,
showLines: true
});
return () => effect.destroy();
}, []);
