Product Design
Hero Background Effects
Beginner17 usesVanta GLOBE — Rotating 3D Globe Background
Adds a rotating, wire-frame 3D globe to your hero section using Vanta.js GLOBE. A beautiful spinning sphere of connected nodes fills the background, perfect for global or data-driven products.
vantabackgroundheroanimationglobe3dsphereworlddata
📋
Spec
Vanta GLOBE — Rotating 3D Globe Hero Background
What this does
Renders a beautiful rotating wire-frame globe made of connected nodes across your hero background. The globe spins slowly and reacts to mouse movement.
Style Name
GLOBE
When to use
- Global, international, or travel brands
- Data, analytics, or mapping products
- When you want an impressive, distinctive visual centerpiece
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.globe.min.js"></script>
2. Apply to your hero element
<section id="hero">Your content here</section>
<script>
VANTA.GLOBE({
el: "#hero",
mouseControls: true,
touchControls: true,
gyroControls: false,
color: 0x3b82f6,
color2: 0x7c3aed,
backgroundColor: 0x050510,
size: 1.2
});
</script>
3. Key config options
| Option | Description |
|---|---|
| color | Node/line color |
| color2 | Secondary color |
| backgroundColor | Background fill |
| size | Globe scale |
| offsetX / offsetY | Globe position |
React / JSX usage
useEffect(() => {
const effect = VANTA.GLOBE({
el: heroRef.current,
THREE: window.THREE,
color: 0x3b82f6,
color2: 0x7c3aed,
backgroundColor: 0x050510,
size: 1.2
});
return () => effect.destroy();
}, []);
