React

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #fff;
  padding: 20px;
}
.vanta { 
  min-height: 300px;
  color: white;
  padding: 20px;
  font-size: 24px;
}

React

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

}

ReactDOM.render(<ExampleApp />, document.querySelector("#app"))