Vanta

Animated 3D backgrounds for your website

WebGL3DAnimation
tengbao/vantavantajs.com/vanta

README

Vanta JS


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

alt text



What is Vanta? / FAQs


- Add 3D animated digital art to any webpage with just a few lines of code.
- How it works: Vanta inserts an animated effect as a background into any HTML element.
- Works with vanilla JS, React, Angular, Vue, etc.
- Effects are rendered by three.js (using WebGL) or p5.js.
- Effects can interact with mouse/touch inputs.
- Effect parameters (e.g. color) can be easily modified to match your brand.
- Total additional file size is ~120kb minified and gzipped (mostly three.js), which is smaller than comparable background images/videos.
- Vanta includes many predefined effects to try out. More effects will be added soon!

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


Basic usage with script tags:


  1. ``` html
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
  4. <script>
  5.   VANTA.WAVES('#my-background')
  6. </script>
  7. ```

View fiddle →

More options:


  1. ``` js
  2. VANTA.WAVES({
  3.   el: '#my-background', // element selector string or DOM object reference
  4.   color: 0x000000,
  5.   waveHeight: 20,
  6.   shininess: 50,
  7.   waveSpeed: 1.5,
  8.   zoom: 0.75
  9. })
  10. ```

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

- gyroControls: (defaults to false) Set to true to allow gyroscope to imitate mouse. Only applies to certain effects.

- NOTE: Each effect has its own specific parameters. Explore them all at www.vantajs.com!

Updating options after init:


  1. ``` js
  2. const effect = VANTA.WAVES({
  3.   el: '#my-background',
  4.   color: 0x000000
  5. })

  7. // Later, when you want to update an animation in progress with new options
  8. effect.setOptions({
  9.   color: 0xff88cc
  10. })

  12. // Later, if the container changes size and you want to force Vanta to redraw at the new canvas size
  13. effect.resize()
  14. ```

Cleanup:


  1. ``` js
  2. const effect = VANTA.WAVES('#my-background')
  3. effect.destroy() // e.g. call this in React's componentWillUnmount
  4. ```


Usage with React Hooks:


npm i vanta, then import a specific effect as follows. Make sure three.js or p5.js has already been included via <script> tag.

  1. ``` js
  2. import React, { useState, useEffect, useRef } from 'react'
  3. import BIRDS from 'vanta/dist/vanta.birds.min'
  4. // Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a