Animated Website Backgrounds Easily with vantajs
Tags: javascript, react, tutorial, beginners
Published: 2022-01-10 17:12:45

## What is vantajs?
vanta js is a js library that allows us to add animation to a website background easily.

[https://www.vantajs.com/](https://www.vantajs.com/)

{% github tengbao/vanta %}

> - 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](https://create-react-app.dev/)(create-react-app), [Vite](https://vitejs.dev/) 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`
```zsh
# 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.

```js
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.

![vantajs with reactjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0602qh1fx56sxdyh7dhd.png)

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