Vanta JS

Install via npm i vanta. Ensure three.js is available on the window object. Use React.createRef() to target the element and initialize the effect in componentDidMount. Call .destroy() in componentWillUnmount.

import React from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag

class MyComponent extends React.Component {
  constructor() {
    super()
    this.vantaRef = React.createRef()
  }
  componentDidMount() {
    this.vantaEffect = BIRDS({
      el: this.vantaRef.current
    })
  }
  componentWillUnmount() {
    if (this.vantaEffect) this.vantaEffect.destroy()
  }
  render() {
    return <div ref={this.vantaRef}>
      Foreground content goes here
    </div>
  }
}

Install via npm i vanta. Ensure three.js is available on the window object (e.g., via a <script> tag in your HTML head). Use useRef to target the element and useEffect to initialize and clean up the effect.

import React, { useState, useEffect, useRef } from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag

const MyComponent = (props) => {
  const [vantaEffect, setVantaEffect] = useState(null)
  const myRef = useRef(null)
  useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(BIRDS({
        el: myRef.current
      }))
    }
    return () => {
      if (vantaEffect) vantaEffect.destroy()
    }
  }, [vantaEffect])
  return <div ref={myRef}>
    Foreground content goes here
  </div>
}

Install via npm i vanta. Ensure three.js is available on the window object. Initialize the effect in the mounted lifecycle hook and call .destroy() in beforeDestroy.

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>

<script>
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag

export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

To use Vanta JS in a vanilla HTML environment, include three.js first, then the specific Vanta effect script. You can then initialize the effect by calling the effect name on the VANTA global object, passing a selector for the container element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  VANTA.WAVES('#my-background')
</script>

To prevent memory leaks, call the .destroy() method on the effect instance when the component or element is removed from the DOM (e.g., in React's componentWillUnmount or useEffect cleanup).

const effect = VANTA.WAVES('#my-background')
effect.destroy()

The object returned by the effect initialization function allows you to modify the animation or handle container resizing without re-initializing.

const effect = VANTA.WAVES({
  el: '#my-background',
  color: 0x000000
})

// Update animation parameters
effect.setOptions({
  color: 0xff88cc
})

// Force redraw if container size changes
effect.resize()

Instead of relying on window.THREE or window.p5, you can import these libraries from npm and pass them directly into the Vanta effect initialization object using the THREE or p5 keys.

import React from 'react'
import * as THREE from 'three'
import BIRDS from 'vanta/dist/vanta.birds.min'

// Inside a component lifecycle method:
this.vantaEffect = BIRDS({
  el: this.vantaRef.current,
  THREE: THREE // use a custom THREE when initializing
})

import p5 from 'p5'
import TRUNK from 'vanta/dist/vanta.trunk.min'

// Inside a component lifecycle method:
this.vantaEffect = TRUNK({
  el: this.vantaRef.current,
  p5: p5 // use a custom p5 when initializing
})

When initializing the RINGS effect, you can provide a userOptions object to customize the appearance. The following options are available:

• backgroundColor: The background color of the scene (hexadecimal).
• color: The primary color used for the rings (hexadecimal).
• THREE: An optional instance of THREE.js to use for the effect. If not provided, the effect will attempt to use the THREE instance available on the global window object.

The DOTS effect creates a field of moving dots with optional connecting lines. You can customize the appearance and density using the following configuration options:

{
  color: 0xff8820,
  color2: 0xff8820,
  backgroundColor: 0x222222,
  size: 3,
  spacing: 35,
  showLines: true
}

When initializing an effect, you can pass an options object to customize the animation.

Common options:

• el: The container element (selector string or DOM object). The Vanta canvas is appended here and matches its size. Other children of this element will appear as foreground content.
• mouseControls: (boolean, default: true) Enables/disables mouse interaction.
• touchControls: (boolean, default: true) Enables/disables touch interaction.
• gyroControls: (boolean, default: false) Enables/disables gyroscope interaction.

Note: Each specific effect (e.g., WAVES, BIRDS) has its own unique parameters. Check the Vanta gallery for effect-specific options.

VANTA.WAVES({
  el: '#my-background', // element selector string or DOM object reference
  color: 0x000000,
  waveHeight: 20,
  shininess: 50,
  waveSpeed: 1.5,
  zoom: 0.75
})