Interaction
Inverted Custom Cursor in Framer
This is an inverted custom cursor created right inside of Framer without writing a single line of code. Feel free to remix the project to see how it's created or copy it straight to your project.
Created by
About the resource
Creating something like this in Framer is super simple. It's only 2 steps.
First, we have to create our custom cursor design, which is super simple in our case: just a fully rounded frame.
We then need to turn this frame into a component. Within the component I make two simple adjustments: a) I add an appear effect to the primary variant, b) I apply "difference" blending mode to it for the inverted effect.
Once we have our custom cursor component, we just need to navigate the the button or element we're applying it to, go to the right panel, click cursor, and select the "custom cursor" option.
About the resource
Creating something like this in Framer is super simple. It's only 2 steps.
First, we have to create our custom cursor design, which is super simple in our case: just a fully rounded frame.
We then need to turn this frame into a component. Within the component I make two simple adjustments: a) I add an appear effect to the primary variant, b) I apply "difference" blending mode to it for the inverted effect.
Once we have our custom cursor component, we just need to navigate the the button or element we're applying it to, go to the right panel, click cursor, and select the "custom cursor" option.
About the resource
Creating something like this in Framer is super simple. It's only 2 steps.
First, we have to create our custom cursor design, which is super simple in our case: just a fully rounded frame.
We then need to turn this frame into a component. Within the component I make two simple adjustments: a) I add an appear effect to the primary variant, b) I apply "difference" blending mode to it for the inverted effect.
Once we have our custom cursor component, we just need to navigate the the button or element we're applying it to, go to the right panel, click cursor, and select the "custom cursor" option.
Adding the custom cursor to our element in Framer.
Adding the custom cursor to our element in Framer.
Adding the custom cursor to our element in Framer.
As you can see it in the image above, I simply select my cursor component, select replace, and I'm pretty much done.
As you can see it in the image above, I simply select my cursor component, select replace, and I'm pretty much done.
As you can see it in the image above, I simply select my cursor component, select replace, and I'm pretty much done.
