How can I integrate black fire trail animation code into my files?

Store Design
, , , , ,
1

Hi, I wanted yo add an animation behind cursor, there is all the code for that:

HTML:

CSS:

.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999; /* so that it stays on top of all other elements */
}

and JAVAscript:

const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(“.circle”);

const colors = [
“#ffb56b”,
“#fdaf69”,
“#f89d63”,
“#f59761”,
“#ef865e”,
“#ec805d”,
“#e36e5c”,
“#df685c”,
“#d5585c”,
“#d1525c”,
“#c5415d”,
“#c03b5d”,
“#b22c5e”,
“#ac265e”,
“#9c155f”,
“#950f5f”,
“#830060”,
“#7c0060”,
“#680060”,
“#60005f”,
“#48005f”,
“#3d005e”
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

window.addEventListener(“mousemove”, function(e){
coords.x = e.clientX;
coords.y = e.clientY;

});

function animateCircles() {

let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = x - 12 + “px”;
circle.style.top = y - 12 + “px”;

circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();

The question is, How can I implement this 3 code blocks into my files so the animation will work? Which files should i use for what types of code?

2

I added the code on codepen and it worked fine. Maybe create a section and then add all the code in there and then render it in the theme.liquid file to see if it works?