Background Animation Effect with Next.js

A background animation effect can make a web app feel modern and engaging, but implementing it can be tricky. Without the right framework, developers face challenges like poor performance, flickering, heavy JavaScript payloads, or inconsistent rendering across devices. Next js background animation helps solve these issues by optimizing rendering with server-side and static generation, handling code splitting efficiently, and supporting smooth client-side transitions. The result is cleaner, faster, and more reliable background animations that enhance user experience without sacrificing performance.

In this article, you’ll learn how to use Javascript and CSS to create a background animation effect for your web page.

You can also get the project GitHub repo using Github.

To begin setting up Next JS background animation on your site, you’ll need to have an entry-level understanding of JavaScript, CSS, and React/Nextjs.

In your respective folder, create a new net js app using npx create-next-app removePerson in your terminal. Head to your project root directory cd removePerson

We will use Cloudinary for captioning any point of our animated background. That is, in case a user wishes to present a background sample. Cloudinary will make it easier to handle your Nextjs animation background project. The best part is that Cloudinary is free to use for life.

Once you’ve created your own Cloudinary account using the link above, login to get started. Each Cloudinary user account will have a dashboard containing environment variable keys that are necessary for the Cloudinary integration in our project.

Create your own cloudinary account using Link and log into it. Each cloudinary user account will have a dashboard containing environment variable keys that are necessary for the cloudinary integration in our project.

In your project directory, start by including Cloudinary in your project dependencies npm install cloudinary create a new file named .env and paste the following code. Fill the blanks with your environment variables from the cloudinary dashboard.

".env"

CLOUDINARY_CLOUD_NAME =

CLOUDINARY_API_KEY =

CLOUDINARY_API_SECRET =

Restart your project: npm run dev.

In the pages/api folder, create a new file named upload.js. Start by installing cloudinary npm install cloudinary and configuring the environment keys and libraries.

"pages/api/upload.js"


var cloudinary = require("cloudinary").v2;

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

Include a handler function to receive media file data and post it to the cloudinary website then capture the media file’s cloudinary link and send it back as a response.

"pages/api/upload.js"


export default async function handler(req, res) {
    if (req.method === "POST") {
        let url = ""
        try {
            let fileStr = req.body.data;
            const uploadedResponse = await cloudinary.uploader.upload_large(
                fileStr,
                {
                    chunk_size: 6000000,
                }
            );
            url = uploadedResponse.url
        } catch (error) {
            res.status(500).json({ error: "Something wrong" });
        }

        res.status(200).json({data: url});
    }
}

For the front end, we will animate a website background. This article will show 2 kinds of backgrounds. In the pages/index folder, paste the following in the return statement

"pages/index"


    return (
        <>
            <div className="item">
                {link? <h3><b>Uploaded</b></h3>: <h3>Double Click anywhere to save Caption</h3>}
            </div>
            <div className="container" onClick={captionHandler}>
                <div className="heart"></div>
            </div>
        </>
    )

Notice the captionHandler function. We will use it to capture a screenshot of the background effect and send it to the backend for upload. Since the screenshot will be for the whole document body, go ahead and paste the following code.

"pages/index"


    async function captionHandler  () {
        await takeScreenshot(document.body).then(function (caption) {
            if (!caption) return
            try {
                fetch('/api/upload', {
                  method: 'POST',
                  body: JSON.stringify({ data: userprofile }),
                  headers: { 'Content-Type': 'application/json' },
                })
                  .then((response) => response.json())
                  .then((data) => {
                    setLink(data.data);
                  });
              } catch (error) {
                console.error(error);
              }
        })
    }

The code above is meant to capture the document body and post it to the backend as an image file. The code’s response will include the media file’s cloudinary link which will be saved to a use state hook.

Let us now animate the background. Paste the following code in ’the styles/global“ directory.

html body {
  text-align: left;
  object-fit: cover;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}
.item{
  align-items: center;
  display: flex;
  flex-direction: row;
  /* border: 3px solid rgb(0, 0, 0); */
  text-align: center;
  padding: 10px;
  margin: 10px;
}

.column {
  flex: 1 1 0px;
  border: 10px;
  /* border:3px solid  rgb(182, 0, 0); */
  text-align: center;
}
.container {
  /* border: 5px solid blue; */
  position: absolute;
  top: 0;
  left: 50;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: #e80202;
  overflow: hidden
}

.heart {
  position: absolute;
  width: 40px;
  height: 40px;
  background: transparent;
  transform: rotate(45deg);
  box-shadow: 0 -20px 20px rgba(0, 0, 0, 0.1);
}

.heart::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: #e80202;
  border-radius: 50%;
  box-shadow: -20px 0 20px rgba(0, 0, 0, 0.1);
}

.heart::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 50%;
  box-shadow: -20px 0 20px rgba(0, 0, 0, 0.1);
}

button {
  padding: 15px;
    color: #7B7B7B;
    background-color: #FFF;
    border-radius: 1rem;
    border: 1px solid;
    font-size: 20px;
    width: 200px;
    height: 60px;
    align-items: center;
    text-align: center;
}
button:hover {
  transform: translateY(-3px);
  transition: 1s;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

The css code above will create a heart-like div that rotates randomly on the screen. We will however need to tweak it at this level to make it more appealing. Such will be achieved through a useEffect hook and an animaheHandler function. We use animejs to achieve this.

npm install animejs

import anime from 'animejs';

 useEffect(() => {
        const container = document.querySelector('.container');

        for (var i = 1; i <= 50; i++) {
            const hearts = document.createElement('div');
            hearts.classList.add('heart')
            container.appendChild(hearts);
        }

        animateHearts()
    }, [])

 function animateHearts() {
        anime({
            targets: '.heart',
            translateX: function (x) {
                return anime.random(-700, 700);
            },
            translateY: function (x) {
                return anime.random(-500, 500);
            },
            rotate: 45,
            scale: function () {
                return anime.random(1, 5)
            },
            easing: 'easeInOutBack',
            duration: 3000,
            delay: anime.stagger(10),
            complete: animateHearts,
        })
    }

And that’s all there is to it. All you need to do is run the code. Once you do, you’ll have a richly animated background that loops through animated effects. You should have all you need to run your custom background animation effect on your pages.

If you set up your new Cloudinary account as part of this project, take a minute to see all the other things Cloudinary does to help developers create beautiful web pages in a fraction of the time.