{"id":27961,"date":"2022-05-04T07:46:40","date_gmt":"2022-05-04T07:46:40","guid":{"rendered":"http:\/\/creating-a-background-animation-effect-with-nextjs"},"modified":"2025-10-21T08:10:14","modified_gmt":"2025-10-21T15:10:14","slug":"creating-a-background-animation-effect-with-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs","title":{"rendered":"Background Animation Effect with Next.js"},"content":{"rendered":"

Introduction<\/h2>\n

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.<\/p>\n

In this article, you\u2019ll learn how to use Javascript and CSS to create a background animation effect for your web page.<\/p>\n

You can also get the project GitHub repo using Github<\/a>.<\/p>\n

Prerequisites<\/h2>\n

To begin setting up Next JS background animation on your site, you\u2019ll need to have an entry-level understanding of JavaScript, CSS, and React\/Nextjs.<\/p>\n

Setting Up the Sample Project<\/h2>\n

In your respective folder, create a new net js app using npx create-next-app removePerson<\/code> in your terminal.\nHead to your project root directory cd removePerson<\/code><\/p>\n

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<\/a>.<\/p>\n

Once you\u2019ve 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.<\/p>\n

Create your own cloudinary account using Link<\/a> 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.<\/p>\n

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

".env"\n\nCLOUDINARY_CLOUD_NAME =\n\nCLOUDINARY_API_KEY =\n\nCLOUDINARY_API_SECRET =\n<\/code><\/pre>\n
Restart your project: npm run dev<\/code>.<\/p>\n
In the pages\/api<\/code> folder, create a new file named upload.js<\/code>.\nStart by installing cloudinary npm install cloudinary<\/code> and configuring the environment keys and libraries.<\/p>\n
"pages\/api\/upload.js"\n\n\nvar cloudinary = require("cloudinary").v2;\n\ncloudinary.config({\n    cloud_name: process.env.CLOUDINARY_NAME,\n    api_key: process.env.CLOUDINARY_API_KEY,\n    api_secret: process.env.CLOUDINARY_API_SECRET,\n});\n<\/code><\/pre>\n
Include a handler function to receive media file data and post it to the cloudinary website then capture the media file\u2019s cloudinary link and send it back as a response.<\/p>\n
"pages\/api\/upload.js"\n\n\nexport default async function handler(req, res) {\n    if (req.method === "POST") {\n        let url = ""\n        try {\n            let fileStr = req.body.data;\n            const uploadedResponse = await cloudinary.uploader.upload_large(\n                fileStr,\n                {\n                    chunk_size: 6000000,\n                }\n            );\n            url = uploadedResponse.url\n        } catch (error) {\n            res.status(500).json({ error: "Something wrong" });\n        }\n\n        res.status(200).json({data: url});\n    }\n}\n<\/code><\/pre>\n
For the front end, we will animate a website background. This article will show 2 kinds of backgrounds.\nIn the pages\/index<\/code> folder, paste the following in the return statement<\/p>\n
"pages\/index"\n\n\n    return (\n        <>\n            <div className="item">\n                {link? <h3><b>Uploaded<\/b><\/h3>: <h3>Double Click anywhere to save Caption<\/h3>}\n            <\/div>\n            <div className="container" onClick={captionHandler}>\n                <div className="heart"><\/div>\n            <\/div>\n        <\/>\n    )\n<\/code><\/pre>\n
Notice the captionHandler<\/code> 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.<\/p>\n
"pages\/index"\n\n\n    async function captionHandler  () {\n        await takeScreenshot(document.body).then(function (caption) {\n            if (!caption) return\n            try {\n                fetch('\/api\/upload', {\n                  method: 'POST',\n                  body: JSON.stringify({ data: userprofile }),\n                  headers: { 'Content-Type': 'application\/json' },\n                })\n                  .then((response) => response.json())\n                  .then((data) => {\n                    setLink(data.data);\n                  });\n              } catch (error) {\n                console.error(error);\n              }\n        })\n    }\n\n<\/code><\/pre>\n
The code above is meant to capture the document body and post it to the backend as an image file. The code\u2019s response will include the media file\u2019s cloudinary link which will be saved to a use state hook.<\/p>\n
Let us now animate the background. Paste the following code in \u2019the styles\/global\u201c directory.<\/p>\n
html body {\n  text-align: left;\n  object-fit: cover;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: 0;\n}\n.item{\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  \/* border: 3px solid rgb(0, 0, 0); *\/\n  text-align: center;\n  padding: 10px;\n  margin: 10px;\n}\n\n.column {\n  flex: 1 1 0px;\n  border: 10px;\n  \/* border:3px solid  rgb(182, 0, 0); *\/\n  text-align: center;\n}\n.container {\n  \/* border: 5px solid blue; *\/\n  position: absolute;\n  top: 0;\n  left: 50;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-image: #e80202;\n  overflow: hidden\n}\n\n.heart {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  background: transparent;\n  transform: rotate(45deg);\n  box-shadow: 0 -20px 20px rgba(0, 0, 0, 0.1);\n}\n\n.heart::before {\n  content: '';\n  position: absolute;\n  top: -50%;\n  left: 0%;\n  width: 100%;\n  height: 100%;\n  background: #e80202;\n  border-radius: 50%;\n  box-shadow: -20px 0 20px rgba(0, 0, 0, 0.1);\n}\n\n.heart::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-radius: 50%;\n  box-shadow: -20px 0 20px rgba(0, 0, 0, 0.1);\n}\n\nbutton {\n  padding: 15px;\n    color: #7B7B7B;\n    background-color: #FFF;\n    border-radius: 1rem;\n    border: 1px solid;\n    font-size: 20px;\n    width: 200px;\n    height: 60px;\n    align-items: center;\n    text-align: center;\n}\nbutton:hover {\n  transform: translateY(-3px);\n  transition: 1s;\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}\n<\/code><\/pre>\n
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.<\/p>\n
npm install animejs<\/code><\/p>\n
import anime from 'animejs';\n\n useEffect(() => {\n        const container = document.querySelector('.container');\n\n        for (var i = 1; i <= 50; i++) {\n            const hearts = document.createElement('div');\n            hearts.classList.add('heart')\n            container.appendChild(hearts);\n        }\n\n        animateHearts()\n    }, [])\n\n function animateHearts() {\n        anime({\n            targets: '.heart',\n            translateX: function (x) {\n                return anime.random(-700, 700);\n            },\n            translateY: function (x) {\n                return anime.random(-500, 500);\n            },\n            rotate: 45,\n            scale: function () {\n                return anime.random(1, 5)\n            },\n            easing: 'easeInOutBack',\n            duration: 3000,\n            delay: anime.stagger(10),\n            complete: animateHearts,\n        })\n    }\n<\/code><\/pre>\n
And that\u2019s all there is to it. All you need to do is run the code. Once you do, you\u2019ll 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.<\/p>\n
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<\/a> create beautiful web pages in a fraction of the time.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27962,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[370,175,212],"class_list":["post-27961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image","tag-jamstack","tag-next-js"],"acf":[],"yoast_head":"\nHow to Make Background Animation Effect in NextJS<\/title>\n<meta name=\"description\" content=\"Learn how to make a rich javascript and CSS background animation effect that can be used in product marketing or website design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background Animation Effect with Next.js\" \/>\n<meta property=\"og:description\" content=\"Learn how to make a rich javascript and CSS background animation effect that can be used in product marketing or website design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-04T07:46:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-21T15:10:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Background Animation Effect with Next.js\",\"datePublished\":\"2022-05-04T07:46:40+00:00\",\"dateModified\":\"2025-10-21T15:10:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA\",\"keywords\":[\"Image\",\"JAMStack\",\"Next.js\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\",\"url\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\",\"name\":\"How to Make Background Animation Effect in NextJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA\",\"datePublished\":\"2022-05-04T07:46:40+00:00\",\"dateModified\":\"2025-10-21T15:10:14+00:00\",\"description\":\"Learn how to make a rich javascript and CSS background animation effect that can be used in product marketing or website design.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA\",\"width\":1280,\"height\":720,\"caption\":\"Image showing a screen shot the animated background js work in play using fireworks on a dark background\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Background Animation Effect with Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Make Background Animation Effect in NextJS","description":"Learn how to make a rich javascript and CSS background animation effect that can be used in product marketing or website design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs","og_locale":"en_US","og_type":"article","og_title":"Background Animation Effect with Next.js","og_description":"Learn how to make a rich javascript and CSS background animation effect that can be used in product marketing or website design.","og_url":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-04T07:46:40+00:00","article_modified_time":"2025-10-21T15:10:14+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs"},"author":{"name":"","@id":""},"headline":"Background Animation Effect with Next.js","datePublished":"2022-05-04T07:46:40+00:00","dateModified":"2025-10-21T15:10:14+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA","keywords":["Image","JAMStack","Next.js"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs","url":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs","name":"How to Make Background Animation Effect in NextJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA","datePublished":"2022-05-04T07:46:40+00:00","dateModified":"2025-10-21T15:10:14+00:00","description":"Learn how to make a rich javascript and CSS background animation effect that can be used in product marketing or website design.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA","width":1280,"height":720,"caption":"Image showing a screen shot the animated background js work in play using fireworks on a dark background"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/creating-a-background-animation-effect-with-nextjs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Background Animation Effect with Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925806\/Web_Assets\/blog\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1\/e55b710c902a902638c02c5ee2d0a6e5b9a4f3ac-1280x720-1_27962aaae1.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27961"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27961\/revisions"}],"predecessor-version":[{"id":38942,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27961\/revisions\/38942"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27962"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}