Animated Website Backgrounds Easily with vantajs

What is vantajs?

vanta js is a js library that allows us to add animation to a website background easily.

https://www.vantajs.com/

tengbao / vanta

Animated 3D backgrounds for your website

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.
• 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:

<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

…

View on GitHub

• 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!

In this article, I will introduce how to use vantajs with reactjs since I like reactjs lol.

Setup project

1. create a react project
2. install 2 libraries
3. create a component

Step1. Create a react project

This step is easy if you use codesandbox.io since you just need to click a react js project on dashboard.
If you prefer to use local dev env, you can use CRA(create-react-app), Vite etc.

Step2. Install 2 libraries

vantajs requires threejs or p5js. In this article, we will use threejs.
There is one cautionary point about threejs. You need to install version 0.121.0. There is no explanation about threejs version in the repo, but actually the latest one doesn't work well with vantajs.
After checking with codesandbox, vantajs works with by 0.124.0. From 0.125.0 there will be an issue. I haven't check the issue carefully so not sure that what the issue is exactly lol (I may check it later and open a PR)
To install a specific version of a js library, you need the following command.

In this case, the package-name is three and the version should be 0.121.0

# yarn
yarn add package-name@1.2.3
# npm
npm i package-name@1.2.3

Step3 Create a component

The code is simple. Importing libs for vantajs.
If you like to use a class component instead of a functional component, you will need to use componentDidMount() and componentWillUnmount(). You can check the code on the repo.

import React, { useState, useEffect, useRef } from "react";
import BIRDS from "vanta/dist/vanta.birds.min";
import * as THREE from "three";

export const MyComponent = () => {
  const [vantaEffect, setVantaEffect] = useState(0);
  const vantaRef = useRef(null);

  useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(
        BIRDS({
          el: vantaRef.current,
          THREE: THREE,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 600.0,
          minWidth: 600.0,
          scale: 1.0,
          scaleMobile: 1.0
        })
      );
    }
    return () => {
      if (vantaEffect) vantaEffect.destroy();
    };
  }, [vantaEffect]);
  return (
    <div ref={vantaRef}>
      <p style={{ color: "#fff", paddingTop: "20px" }}>
        Animated website backgrounds in a few lines of code.
      </p>
    </div>
  );
};

If everything works well, you will see something similar to the following.

My codesandbox is here.
https://codesandbox.io/s/jolly-morning-m9f3p?file=/src/components/MyComponent.js

Comments

[emswoo]

This really helped me alot. Thank you! Just got a question. When you install "three" as npm i three the version will be "0.143.0" so I tried your command which was npm i three@1.2.3 and I got an error. What am I doing wrong here? I appreciate if you could help me.

[0xkoji]

@1.2.3 is just dummy version. You should type the correct version of threejs
you should run npm i three@0.121.0 or add 0.121.0 to your package.json and npm i

[emswoo]

It worked! Thank you!

[0xkoji]

glad to hear that.
Have a great day!