By setting "pointer-events: none;" to .circle class should do the trick. Also updated codepen's CSS section, just in case you want to get an idea. Thank you for highlighting this.
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 youuuuuuuuu!
Yeah that wasn’t in scope of the video but people liked so I created that too, it was in description, please check this out: codepen.io/zainzafar/pen/KKejxQg
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!
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 = document.querySelectorAll('.circle'); const coords = { x: 0, y: 0, }; circles.forEach(function (circle) { circle.x = 0; circle.y = 0; }); const bg = document.createElement('div'); bg.classList.add('bg'); document.body.appendChild(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; });
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’?
this is the only video i found to create this king of effect thanks for helping us.but when I tryed to run this on VS code it wont do anything.how can i fix it sir? (It is not working even when i just copy it from code pen)
Hi, Awsome tutorial. Wanted to ask something, how can we delay the cursor following? because I've created another simple small cursor and wanted this trailed cursor to follow that small cursor. Thank you.
Great tutorial! I noticed an issue when I tried to use it on my site, it works well initially but when I scroll further down a long page the cursor doesn't follow the mouse down the page.
Setting "position: fixed" should handle this for you, since it was tutorial on how to replicate the behaviour, I didn't account for scrolling page. Thank you for the catch.
Really nice video.. I wanted to implement this in react using framer-motion but the nextCircle thing is kinda difficult to do and I am clueless. Any help on how to get the next Circle's coordinates in react?
i made a website and its working on the first page or the first div but if i am scrolling the page its not following the cursor . what can be the reason and solution?
You didn't add that inversing of colors feature when you go over items on the page, I added a few text elements and the circles were blocking me from seeing them
@@codemorphism I get it, but props to you, I definitely subscribed, you’re going places man, at least your account is, because your content deserves better exposure
@@codemorphism Thank you very much, I know it will be harder for you to personally reply to comments as your channel grows, but I hope you keep up this energy
Why does it perfectly work on codepen, when i apply this effect on my own html, the first circle starts to cut off and looks unpleasant please let me know if anyone knows a way around this
Just grt tutorials bro...i thing that i wann remove mouse arrow from circle.. i mean its works fine but circle display with arrow cursor so i wanna remove that display only circle.
hey i love that cursor and i wanted to use it for obs on a scene where you cant see the regular cursor, do you have a e.g. python script for that or any other way to do this?
@@codemorphism Wouw thank you for the quick respose! I tried with the code from the description but it still doesn't seem to work. I get an error saying "uncaught type error: cannot read properties of null (reading 'style')" refering to line 47-48 in the js code.
@@codemorphism Omg It works now! I made a completly new file and tried again and it works now. I might have accedentally done something weird. But again thank you very much for your help and for the video! I realliy like this cursor effect, it's also so satisfying haha
Perfect Video!! but now i can't press buttons or select text, what should I do?? Its like if the Mouse isn't working
By setting "pointer-events: none;" to .circle class should do the trick. Also updated codepen's CSS section, just in case you want to get an idea. Thank you for highlighting this.
@@codemorphism thanks for the quick response friend! I appreciate your content
You should have more than 150k subs. Your production quality is top notch
Svelte made me love watching Vanilla JS content because it's so easy to apply it with it.
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 youuuuuuuuu!
Thanks Man. The mouse trailer is really beautiful. Have implemented it in my portfolio. Once again thanx!!
how you did it please tell me
thank you very much! Great work!
🙌
awesome video. clear and concise. gonna try and implement something similar to this on a project soon.
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?
Yeah that wasn’t in scope of the video but people liked so I created that too, it was in description, please check this out: codepen.io/zainzafar/pen/KKejxQg
Thanks for sharing this. So cool!
I love it! Nice and concise tutorial too ^^
+1 sub , short explanation , nice music in the background & i learned few things thanks to you
Wow! Really nice effect! Thank you for the video!
NICE WORK
🫡
could you possibly ever make a app or program do the same thing so it dont not only work on a website?
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!
this comment made my day, thank you 🙏
Remember me dude. I subscribed😇
BTW, this was a helpful tutorial and please make more like it.❤️❤️🔥
really good video. inspirational and short. one client will soon have such a cursor :)
A quick subscription just like the video 🙌
you really need to make more video like this :D
For sure and thank you
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.
havent worked with framer but if it allows custom script/css and some html, you can get the link for code in description
Will it work on scrolling ?? 😢
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 = document.querySelectorAll('.circle');
const coords = {
x: 0,
y: 0,
};
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});
const bg = document.createElement('div');
bg.classList.add('bg');
document.body.appendChild(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 (
{/* Agregamos el div bg en el renderizado */}
);
}
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;
}
I have another problem, when I scroll the "Mouse Trail" it stays away from the cursor :(
Fixed, literally 🤣 style.css = .circle {
position: fixed
}
Thanx bro. Your code was of great help to me.
can we add a logo in centre of cursor.?
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’?
I haven't worked with Webflow, but this code should work on any site that supports HTML, CSS, and JS
hey bro, were you able to get it done on webflow?
this is the only video i found to create this king of effect thanks for helping us.but when I tryed to run this on VS code it wont do anything.how can i fix it sir? (It is not working even when i just copy it from code pen)
can you provide the link that reproduces the issue probably a sandbox link or something
@@codemorphism unfortunatly i dont know how to do that but I can send you some screen shots of the code via Gmail is it fine?
Hi, Awsome tutorial.
Wanted to ask something, how can we delay the cursor following?
because I've created another simple small cursor and wanted this trailed cursor to follow that small cursor.
Thank you.
there’s .animate method that uses duration I believe and can help achieve the goal, I’ll try creating a code snippet that I can post the link for
can yo do the same tutorial for react
what about that effect when cursor is not moving ...the effect in its static form
I wanted to keep the video short
Great tutorial! I noticed an issue when I tried to use it on my site, it works well initially but when I scroll further down a long page the cursor doesn't follow the mouse down the page.
Setting "position: fixed" should handle this for you, since it was tutorial on how to replicate the behaviour, I didn't account for scrolling page. Thank you for the catch.
Here's the codepen with what you are looking for: codepen.io/zainzafar/pen/abKgBNX
@@codemorphism Thank you! more of these tutorials would be really appreciated.
@@codemorphism i have the same issue, position fixed doesnt solve it. what can i do?
@@watusi1988 can you share the code or at least give me reproducible version-of the code?
Really nice video.. I wanted to implement this in react using framer-motion but the nextCircle thing is kinda difficult to do and I am clueless. Any help on how to get the next Circle's coordinates in react?
I haven’t used framer motion but should be the logic
Crazy one ❤
i made a website and its working on the first page or the first div but if i am scrolling the page its not following the cursor . what can be the reason and solution?
Switch between position absolute and relative, i don't remember which is the correct one so just switch and try
No give your html,body {
overflow-x: hidden;
}
That worked for me¡
The second hyperplexed
hey bro, this is soo interesting. Not working on elementor. can you please make a video for
elementor users???
Can you make cursor like this
Thank u.
You didn't add that inversing of colors feature when you go over items on the page, I added a few text elements and the circles were blocking me from seeing them
I wanted to but that would kill the short video purpose.
@@codemorphism I get it, but props to you, I definitely subscribed, you’re going places man, at least your account is, because your content deserves better exposure
@@Xenodinger No worries. There you go with inverted colors. Codepen: codepen.io/zainzafar/pen/KKejxQg
@@codemorphism Thank you very much, I know it will be harder for you to personally reply to comments as your channel grows, but I hope you keep up this energy
Perfect 👌🏼
How to use it in the react. Since I am having many components in my file I slightly confused on how to use this in react. Help me!
Subscribed & liked 👍
Why does it perfectly work on codepen, when i apply this effect on my own html, the first circle starts to cut off and looks unpleasant please let me know if anyone knows a way around this
can you share the link
Nice work dude!
Remember to give me a thumbs up when you reach a million.
more like this plsss
I have posted another video 2 days, I hope it fits the bill
It is amazing
why it always happen the thing i have built 2 years ago now youtube recommends me hey see this
Just grt tutorials bro...i thing that i wann remove mouse arrow from circle.. i mean its works fine but circle display with arrow cursor so i wanna remove that display only circle.
This line (👇🏻) should get you going
* { cursor: none; }
@@codemorphism thank you so much....plz keep on posting these types of content.
Do you have a video on doing this with react?
It's literally the exact same bro
hey i love that cursor and i wanted to use it for obs on a scene where you cant see the regular cursor, do you have a e.g. python script for that or any other way to do this?
I am sorry but I don’t get what you mean by python script for this?
@@codemorphism for obs, open broadcaster software, but doesnt have to be a script
wow great
Damn I don't know why but my mouse animation moves only horizontal and not vertical :'( Help!
Technically it shouldn’t, are you changing both x and y?
I'm new here and i wonna subscribe just because of your quick response bro.
How do I download this and make it my pc's mouse cursor trail
You don't. It's a web design.
Why does mouse scroll not work
can i get the source code of this Black Fire Cursor video???
you can use codepen link shared in the description
Do you need a library for this? The .js part doesn't seem to be working with my html page, the dot stays at the upper left corner.
I have shared the link in the description, it should work out of the box, no library is required to run this
@@codemorphism Wouw thank you for the quick respose! I tried with the code from the description but it still doesn't seem to work. I get an error saying "uncaught type error: cannot read properties of null (reading 'style')" refering to line 47-48 in the js code.
@@lenamusatov3359 are you sure you are using the correct class names both in html and js?
@@codemorphism Omg It works now! I made a completly new file and tried again and it works now. I might have accedentally done something weird. But again thank you very much for your help and for the video! I realliy like this cursor effect, it's also so satisfying haha
very nice
🙌
when I refresh the page then the mouse is stuck in the top
on your site or on codepen link?
does it work or is it just for the site bc im looking for a cursor and this showed up
site only ofc
@@codemorphism sorry bc my friend send it wasnt site only
hi! I have a bug, that when i scroll down in the website, the default mouse and the animated mouse are separated, how can i fix that?
I have resolved issue using pageX and pageY insted of clientX and clientY.
thanks for updating
How would you implrmrnt this in react?
Not that I can’t implement but have you tried asking Chat GPT?
As the logic remains the same it’s just a library change
@@codemorphism I figured it out :)
looks so fun working on this kinda project
totally 💯
Can it be add to wordpress elementor ?
haven’t played with elementor, PS its vanilla JS and CSS if elementor allows that you to do that should be fine so you’ll have to try it out yourself
@@codemorphism ok i will try thanks
What's that software
What do you mean by whats that software? Are you talking about codepen.io
It is not working on my html file (vs code)?
You can checkout the codepen link shared in the description
yes I seen it but dosent work please help me sir @@codemorphism 😢
100 subs :)
wow thank you🔥
if it does work how do i get it bc i have the zip
what do you mean you have a zip? I am not following
@@codemorphism i mean is it possible to apply it to actual pc
it's not working for me at all =( but i'm not good at coding
check this link: codepen.io/zainzafar/pen/abKgBNX and try following tutorial with detail code in the link
ua-cam.com/video/DcUGqBXGaN4/v-deo.html
How can this mouse run in the background?
that’s a desktop app but can be achieved via WebGL in web as well
Your outro content hide the final code you edited 👎
I have completely removed the outro, thanks for pointing it out