React

HTML

<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.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>
  }
}

const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(<ExampleApp />);