Skip to content
Plug & play animated 3D backgrounds for your website
Branch: master
Clone or download
Teng Bao
Teng Bao Update README.md
Latest commit e60cc0b Mar 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist error handling for birds Jan 11, 2019
gallery fis code generation - remove backgroundAlpha if it's 1 Dec 5, 2018
src error handling for birds Jan 11, 2019
vendor add color mode and quantity for birds Dec 4, 2018
.gitignore Initial commit Aug 18, 2018
LICENSE.md Initial commit Aug 18, 2018
README.md Update README.md Mar 15, 2019
index.html style tweak Aug 21, 2018
package-lock.json Initial commit Aug 18, 2018
package.json Initial commit Aug 18, 2018
webpack.build.js Initial commit Aug 18, 2018
webpack.config.js Initial commit Aug 18, 2018

README.md

Vanta JS

View gallery & customize effects at www.vantajs.com →

alt text

3D animated backgrounds for your website. Select & customize an effect, and add it to your site with a few lines of code. Powered by three.js or p5.js.

View gallery & customize effects at www.vantajs.com →

Basic usage:

<script src="three.r92.min.js"></script>
<script src="vanta.waves.min.js"></script>
<script>
  VANTA.WAVES('#my-background')
</script>

View fiddle →

More options:

VANTA.WAVES({
  el: '#my-background',
  color: 0x000000,
  waveHeight: 20,
  shininess: 50,
  waveSpeed: 1.5,
  zoom: 0.75
})

Each effect has different parameters. Explore them all!

Cleanup:

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

Usage In React:

Make sure you've included the right files in the page. Once vanta.xxxxx.min.js is included, you can call window.VANTA.XXXXX(...).

  class MyComponent extends React.Component {
    componentDidMount() {
      this.effect = window.VANTA.BIRDS({
        el: "#my-element"
      })
    }
    componentWillUnmount() {
      if (this.effect) this.effect.destroy()
    }
    render() {
      return <div id="my-element"></div>
    }
  }

Credits

You can’t perform that action at this time.