Package Exports

vanta

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vanta) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vanta JS

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

What is Vanta? / FAQs

Add 3D animated digital art to any webpage with just a few lines of code.
Think of it as wrapper around a digital artwork that allows it to be inserted into an HTML element as a background.
Effects can interact with mouse/touch inputs.
Effect parameters (e.g. color) can be easily modified to match your brand.
Effects are powered by three.js (using WebGL) or p5.js.
Total additional filesize is ~120kb minified and gzipped (mostly three.js), which is smaller than comparable background images/videos.
Vanta includes many pre-defined effects to try out. More effects will be added soon!

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

Basic usage:

<script src="three.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', // element selector string or DOM object reference
  color: 0x000000,
  waveHeight: 20,
  shininess: 50,
  waveSpeed: 1.5,
  zoom: 0.75
})

Options documentation:

el: The container element. The Vanta canvas will be appended as a child of this element, and will assume the width and height of this element. If you want a fullscreen canvas, make sure this container element is fullscreen. Note: This container can have other children. The other children will appear as foreground content, in front of the Vanta canvas.

mouseControls: (defaults to true) Set to false to disable mouse controls. Only applies to certain effects.

touchControls: (defaults to true) Set to false to disable touch controls. Only applies to certain effects.

Other params: Each effect has different parameters. Explore them all!

Updating options after init:

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

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

Cleanup:

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

Usage with React Hooks (requires React 16.8):

Import vanta.xxxxx.min.js as follows. Make sure three.js or p5.js has already been included via