Creating Custom Cursors - React and Framer Motion 

thank you!! really broke down the solution in a way that was easy to follow and implement, you made my personal website look that much cooler

Whoever is placing the problem of lagging..🟥🟥🟥 Replace the variants part with this ✅, adding the transition smooth property: const variants = { default: { x: mousePosition.x - 16, y: mousePosition.y - 16, transition: { type: "smooth", duration: 0, }, }, text: { height: 150, width: 150, x: mousePosition.x - 75, y: mousePosition.y - 75, backgroundColor: "yellow", mixBlendMode: "difference", transition: { type: "smooth", duration: 0, }, }, };

i can't believe it's that easy,, THANK YOU SO MUCH!!

Thanks Man. The pointer-events: none saved my life.

The chickens in the background appreciating you for creating this video.

Great video! I can't wait to implement this is my next project.

Hi, good tutorial but dont use pageX and pageY use clientX and clientY instead because using page when you scroll down your mouse cursor just desynchronized and looks really weird

Great video. To the point and exactly to understand how this works.

My cursor motion is delaying little bit can you help??

amazing tutorial

Why is mine not moving smoothly? There's a bit of delay before the actual cursor follows the circle and it doesn't have the same speed as the actual cursor.

use ref and then use the built in ref.curret?.animate function. It's buttery smooth

Hello! I tried implementing it and it's working... But the response time seems very off. It's lagging VERY much! How to resolve it? and BTW thanks for the tutorial!

This is really great!!! Gonna try this

this is the only video that works thanks

have a subscribe thank you for this video i've been searching to animate my cursor from a long time

my cursor is pretty laggy ... do you happen to know why?

really helpful video thanks🤗

Nice work!

is mixblendmode not working for anyone else here.

Anyone know how i can remove the custom cursor from the window when the cursor/mouse leave the window?

This is good, but the issue is it causes so many re-renders of the entire page. Is there a way to only re-render the cursor?

amazing and super cool ;) U R the best

It's glitching and flashing on my app

this is great thanks!

thankyou man awesome

wouldnt this method cause the state to be updated way too much time constantly?

cool, you are amazing

cool, thank you!!

You're a machine

so so SO cool :)

sub gained, really cool indeed

THANK YOU !!!

Thanks! This was very helpful

Hi ,would appreciate if you can do a series set,for how to do crud operation with all the form controls in react which include example like input /select /radio btn redio btn group /checkbox /date picker/time / file upload/ date range etc...,

🔥🔥

welome more

how can i write something inside the cursor

not performant.