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

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

// Later, when you want to update an animation in progress
effect.update({
  color: 0xff88cc
})

const effect = VANTA.WAVES('#my-background')
effect.destroy() // e.g. call this in React's componentWillUnmount

import React, { useState, useEffect, useRef } from 'react'
import * as THREE from './three.min.js'
import BIRDS from './vanta.birds.min.js'

const MyComponent = (props) => {
  const [vantaEffect, setVantaEffect] = useState(0)
  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>
}

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

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