Backgrounds

Vanta.js

Animated WebGL backgrounds — NET, WAVES, FOG, BIRDS and more.

Live demovanta

Vanta.js ships drop-in animated WebGL backgrounds built on Three.js. Switch between six presets below. For a live visual customizer with every effect and option, use the official site.

Install

npm i vanta three

Snippet

import NET from "vanta/dist/vanta.net.min";
import * as THREE from "three";

useEffect(() => {
  const effect = NET({
    el: ref.current,
    THREE,
  color: 0x8b5cf6,
  backgroundColor: 0x0a0a0f,
  points: 10,
  maxDistance: 22,
  spacing: 18,
  showDots: true,
  mouseControls: true,
  touchControls: true,
  });
  return () => effect.destroy();
}, []);