Satisfying Black Fire Cursor Trail Animation

Learn how to create a cursor trail animations that follows the cursor based on the relative position of the mouse with HTML, CSS, JavaScript.

Extra 🔥: People were curious on how to get that inverted effect I didn't include it as part of making it short so here's the version if you are interested in inverting colors

#javascript #webdevelopment #codepen #animations

[vicentemoore]

Perfect Video!! but now i can't press buttons or select text, what should I do?? Its like if the Mouse isn't working

[anmolsharma]

You should have more than 150k subs. Your production quality is top notch

[greendsnow]

Svelte made me love watching Vanilla JS content because it's so easy to apply it with it.

[Fight]

thank you for your work, i was searching about custom cursors on websites, but i did'nt find any of them. then i searched on yt and here i found

[aryanpinto]

Thanks Man. The mouse trailer is really beautiful. Have implemented it in my portfolio. Once again thanx!!

[eS_DOOM]

awesome video. clear and concise. gonna try and implement something similar to this on a project soon.

[dabbopabblo]

You skipped the part where your supposed to use backdrop filter to invert whats behind it, and how would you stop it from inverting the other circles?

[tofuboy]

I love it! Nice and concise tutorial too ^^

[voldemortvi]

+1 sub, short explanation, nice music in the background & i learned few things thanks to you

[MariusLeica]

Wow! Really nice effect! Thank you for the video!

[the_ere]

could you possibly ever make a app or program do the same thing so it dont not only work on a website?

[developer_]

Great content and really simple that ur simplicity and the way you highlights little things in ur video reminded me of a similar creator, Hyperplexed. Once again great content and you have successfully won my sub!

[devamrh]

Remember me dude. I subscribed😇
BTW, this was a helpful tutorial and please make more like it.❤️❤️‍🔥

[eybietie]

really good video. inspirational and short. one client will soon have such a cursor :)

[sanskarsharma]

A quick subscription just like the video 🙌

[charlesxavier]

you really need to make more video like this :D

[sushmithanairws]

Hello! I absolutely love this and want to add this to my framer website and was wondering if you could help me out with it.

[lean]

Very nice! I made some adjustments to make it run in react, I solved a problem that I had when clicking on other elements (all the other elements of my project have z-index: 100;), anyway if it helps someone here I leave the code:


import React, { useEffect } from 'react';
import './style.css'

function MouseTrail() {
useEffect(() => {
const circles =
const coords = {
x: 0,
y: 0,
};

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

const bg =
bg.classList.add('bg');
// Agregamos el div bg al body

const animatedCircles = () => {
let x = coords.x;
let y = coords.y;

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

circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

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

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


}

window.addEventListener('mousemove', (e) => {
coords.x = e.clientX;
coords.y = e.clientY;
animatedCircles();
});
}, [])

return (
<div>
<div className="bg"></div> {/* Agregamos el div bg en el renderizado */}
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
<div className="circle"></div>
</div>
);
}

export default MouseTrail;


style.css :

.circle{
height: 24px;
width: 24px;
border-radius: 24px;
background-color: azure;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 0;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1000;

}

[aesthfex]

can we add a logo in centre of cursor.?

[rickyventaglio]

Bro, this is fantastic and exactly what I’m looking for. I’ve got a problem though. I’m using Webflow to build a site. How would I go about the injection of the code? Should I just create x amount of div blocks called ‘circle’?