V Vanta.js Animated backgrounds

Animated WebGL backgrounds for modern websites

Make a static page feel cinematic in a few lines of code.

Vanta drops interactive motion behind any element, so marketing pages, launch screens, portfolios, and docs land with more atmosphere and less asset weight.

Browse live effects See install pattern
  • 14 effects from subtle waves to dense networks
  • Brandable tune color, speed, scale, and interaction
  • Framework friendly use with vanilla JS, React, Vue, or Angular
Preview:

Showcase

All local effect bundles, shown as live previews.

Every effect shipped in `dist/` is represented here. On smaller screens and reduced-motion setups, the page keeps the same gallery structure but falls back to static color treatments instead of forcing heavy animation.

three.js / cinematic / soft light

Waves

For polished SaaS heroes, pricing pages, and dark product intros.

shader / airy / bright

Clouds

For lighter brand systems, event pages, and product launches with more lift.

shader / luminous / bold

Halo

Diffused rings and color bloom for punchier hero sections.

three.js / spatial / connected

Globe

Useful when you want a networked, global, or infrastructure feel.

three.js / connected / technical

Net

Dense linework for developer tools, dashboards, and product surfaces.

shader / atmospheric / abstract

Fog

Builds mood fast without introducing literal imagery.

three.js / grid / precise

Dots

A sharper, more technical backdrop for docs and developer tools.

shader / organic / electric

Cells

A brighter, more biological texture for experimental brand work.

three.js / bold / layered

Rings

Works when a page needs more drama than a flat gradient can give.

shader / volumetric / dreamy

Clouds 2

A denser sky treatment with more depth and a stronger painted feel.

shader / bright / kinetic

Ripple

High-energy concentric light for splashy promos and launch moments.

three.js / flocking / energetic

Birds

Fast-moving boids for pages that need more motion and more spectacle.

p5.js / generative / flowing

Topology

Fine particle lines that feel drawn, mathematical, and handcrafted.

p5.js / concentric / organic

Trunk

Animated contour rings that land somewhere between woodgrain and signal art.

Install

Use one effect at a time, tune it hard, and let the content stay readable.

Vanta works best as a background layer behind focused foreground content. Treat it like production design, not wallpaper.

Why teams reach for it

  • Interactive motion without shipping a background video.
  • Color controls that can track a product palette instead of fighting it.
  • A simple `destroy()` lifecycle for component-based apps.
  • Enough range to cover dark, light, technical, and experimental brand systems.

CDN pattern

<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.net.min.js"></script>
<script>
VANTA.NET({
  el: "#network",
  color: 0x7ce2d8,
  backgroundColor: 0x07111d,
  points: 12,
  maxDistance: 22
})
</script>

Runtime updates

const effect = VANTA.HALO({
  el: "#hero",
  baseColor: 0x12213d,
  color2: 0xf5c25d
})

effect.setOptions({
  color2: 0x79a8ff,
  size: 1.2
})

effect.destroy()

Principles

Use motion with intent.

Lead with contrast

Foreground type should still win. Pair strong motion with restrained copy widths and darker scrims.

Match the product tone

Choose effects that reinforce the brand: precise, ambient, optimistic, or technical.

Respect device limits

Provide static fallbacks for reduced-motion users and smaller screens where dense WebGL is a bad trade.