base on Animated 3D backgrounds for your website # Vanta JS ## [View demo gallery & customize effects at www.vantajs.com &rarr;](https://www.vantajs.com) [](https://www.vantajs.com) ## 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](https://github.com/mrdoob/three.js/) (using WebGL) or [p5.js](https://github.com/processing/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 &rarr;](https://www.vantajs.com) ## Basic usage with script tags: ```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.waves.min.js"></script> <script> VANTA.WAVES('#my-background') </script> ``` [View fiddle &rarr;](https://jsfiddle.net/usdzfbLt/1/) ## More options: ```js VANTA.WAVES({ el: '#my-background', // element selector string or DOM object reference color: 0x000000, waveHeight: 20, shininess: 50, waveSpeed: 1.5, zoom: 0.75 }) ``` - **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: ```js const effect = VANTA.WAVES({ el: '#my-background', color: 0x000000 }) // Later, when you want to update an animation in progress with new options effect.setOptions({ color: 0xff88cc }) // Later, if the container changes size and you want to force Vanta to redraw at the new canvas size effect.resize() ``` ## Cleanup: ```js const effect = VANTA.WAVES('#my-background') effect.destroy() // e.g. call this in React's componentWillUnmount ``` ## 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 &lt;script> tag. ```js import React, { useState, useEffect, useRef } from 'react' import BIRDS from 'vanta/dist/vanta.birds.min' // Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag const MyComponent = (props) => { const [vantaEffect, setVantaEffect] = useState(null) const myRef = useRef(null) useEffect(() => { if (!vantaEffect) { setVantaEffect(BIRDS({ el: myRef.current })) } return () => { if (vantaEffect) vantaEffect.destroy() } }, [vantaEffect]) return <div ref={myRef}> Foreground content goes here </div> } ``` [View fiddle &rarr;](https://jsfiddle.net/1mcr7x50/2/) ## Usage with React Classes: `npm i vanta`, then import a specific effect as follows. Make sure `three.js` or `p5.js` has already been included via &lt;script> tag. ```js import React from 'react' import BIRDS from 'vanta/dist/vanta.birds.min' // Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag class MyComponent extends React.Component { constructor() { super() this.vantaRef = React.createRef() } componentDidMount() { this.vantaEffect = BIRDS({ el: this.vantaRef.current }) } componentWillUnmount() { if (this.vantaEffect) this.vantaEffect.destroy() } render() { return <div ref={this.vantaRef}> Foreground content goes here </div> } } ``` [View fiddle &rarr;](https://jsfiddle.net/4fzxhv1w/2/) ## Usage with Vue 2 (SFC): ```vue <template> <div ref='vantaRef'> Foreground content here </div> </template> <script> import BIRDS from 'vanta/dist/vanta.birds.min' // Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag export default { mounted() { this.vantaEffect = BIRDS({ el: this.$refs.vantaRef }) }, beforeDestroy() { if (this.vantaEffect) { this.vantaEffect.destroy() } } } </script> ``` ## Using THREE or p5 from npm For effects that use three.js, you can import `three` from npm, and pass it into the effect function. ```js import React from 'react' import * as THREE from 'three' import BIRDS from 'vanta/dist/vanta.birds.min' ... componentDidMount() { this.vantaEffect = BIRDS({ el: this.vantaRef.current, THREE: THREE // use a custom THREE when initializing }) } ... ``` For effects that use p5.js, you can import `p5` from npm, and pass it into the effect function. ```js import React from 'react' import p5 from 'p5' import TRUNK from 'vanta/dist/vanta.trunk.min' ... componentDidMount() { this.vantaEffect = TRUNK({ el: this.vantaRef.current, p5: p5 // use a custom p5 when initializing }) } ... ``` ## Local dev: Clone the repo, switch to the `gallery` branch, run `npm install` and `npm run dev`, and go to localhost:8080. ## Credits - General inspiration from [shadertoy.com](https://www.shadertoy.com), [#generative](https://www.twitter.com/hashtag/generative), [/r/generative](https://www.reddit.com/r/generative/), [/r/creativecoding](https://www.reddit.com/r/creativecoding/), etc - Birds effect from https://threejs.org/examples/?q=birds#webgl_gpgpu_birds by @zz85 - Fog effect from https://thebookofshaders.com/13/ by @patriciogonzalezvivo - Clouds effect from https://www.shadertoy.com/view/XslGRr by Inigo Quilez - Clouds2 effect from https://www.shadertoy.com/view/lsBfDz by Rune Stubbe - Trunk, Topology effects from http://generated.space/ by Kjetil Midtgarden Golid @kgolid ", Assign "at most 3 tags" to the expected json: {"id":"12748","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"