React

by karlhorky

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

const ExampleApp = (props) => {
  const [vantaEffect, setVantaEffect] = React.useState(0)
  const vantaRef = React.useRef(null)
  React.useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(VANTA.BIRDS({
        el: vantaRef.current
      }))
    }
    return () => {
      if (vantaEffect) vantaEffect.destroy()
    }
  }, [vantaEffect])
  return (
    <div className="vanta" ref={vantaRef}>
      <span>Foreground content goes here</span>
    </div>
  )
}

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