New
New
New
Guide
- Effects
- Components
Guide
- Effects
- Components
Guide
- Effects
- Components
How to Create No-Code Custom Cursors in Framer
Learn how to create custom cursors and cursor animations for your Framer website. I'll show you how the new "cursor" property works, and how you can set up your custom cursors without any code.
Posted by
Nandi
Table of contents
Setting up your custom cursor
Alright, first things first. You’ll want to create a new cursor component. Which is actually so easy thanks to Framer ;)
Start by creating a new frame for your cursor. This will be the base where you’ll add all your cool effects.
Customize the frame however you like. You can add shapes, images, anything that’ll make your cursor unique. For this tutorial, I’ll stick with something simple like a cute little circle (but get creative bud!).
Setting up your custom cursor
Alright, first things first. You’ll want to create a new cursor component. Which is actually so easy thanks to Framer ;)
Start by creating a new frame for your cursor. This will be the base where you’ll add all your cool effects.
Customize the frame however you like. You can add shapes, images, anything that’ll make your cursor unique. For this tutorial, I’ll stick with something simple like a cute little circle (but get creative bud!).
Setting up your custom cursor
Alright, first things first. You’ll want to create a new cursor component. Which is actually so easy thanks to Framer ;)
Start by creating a new frame for your cursor. This will be the base where you’ll add all your cool effects.
Customize the frame however you like. You can add shapes, images, anything that’ll make your cursor unique. For this tutorial, I’ll stick with something simple like a cute little circle (but get creative bud!).
Custom circle cursor setup.
Custom circle cursor setup.
Custom circle cursor setup.
Add your cursor to the site
Now, let’s get that cursor following your mouse around your site.
Go to the Desktop Breakpoint on the right properties panel, select cursor and then add the custom cursor component to your page.
In the properties panel, set it to Follow (this will make it follow the user’s mouse).
You can adjust the offset to decide how far away the cursor will sit from your pointer.
Now, you have a basic cursor following you around the page. But hold up, let’s make it way cooler!
Add your cursor to the site
Now, let’s get that cursor following your mouse around your site.
Go to the Desktop Breakpoint on the right properties panel, select cursor and then add the custom cursor component to your page.
In the properties panel, set it to Follow (this will make it follow the user’s mouse).
You can adjust the offset to decide how far away the cursor will sit from your pointer.
Now, you have a basic cursor following you around the page. But hold up, let’s make it way cooler!
Add your cursor to the site
Now, let’s get that cursor following your mouse around your site.
Go to the Desktop Breakpoint on the right properties panel, select cursor and then add the custom cursor component to your page.
In the properties panel, set it to Follow (this will make it follow the user’s mouse).
You can adjust the offset to decide how far away the cursor will sit from your pointer.
Now, you have a basic cursor following you around the page. But hold up, let’s make it way cooler!
Framer interface with custom cursor integration for enhanced interactivity
Framer interface with custom cursor integration for enhanced interactivity
Framer interface with custom cursor integration for enhanced interactivity
Add fun animations
Okay, here’s where the magic happens. We’re going to add some animation to make your cursor super fun and unique.
There’s so many different ways to make your custom cursor stand out, let me show you 2 examples of what you can do.
Add fun animations
Okay, here’s where the magic happens. We’re going to add some animation to make your cursor super fun and unique.
There’s so many different ways to make your custom cursor stand out, let me show you 2 examples of what you can do.
Add fun animations
Okay, here’s where the magic happens. We’re going to add some animation to make your cursor super fun and unique.
There’s so many different ways to make your custom cursor stand out, let me show you 2 examples of what you can do.
Example 1: Pulsing cursor
Let’s make a cursor that pulses every time you click it
(Psst, here’s a link to the page with an example of the pulsing cursor)
Create a second variant of your cursor. For this one, make the size of the circle bigger and reduce the opacity to 0.
Now, add an interaction to this variant that gets triggered when the user clicks on the cursor. You’ll set it to animate to the bigger size and fade out.
After a few seconds, it’ll shrink back to its original size.
Boom! You now have a cool pulsing effect every time the user clicks. Fun, right?
Example 1: Pulsing cursor
Let’s make a cursor that pulses every time you click it
(Psst, here’s a link to the page with an example of the pulsing cursor)
Create a second variant of your cursor. For this one, make the size of the circle bigger and reduce the opacity to 0.
Now, add an interaction to this variant that gets triggered when the user clicks on the cursor. You’ll set it to animate to the bigger size and fade out.
After a few seconds, it’ll shrink back to its original size.
Boom! You now have a cool pulsing effect every time the user clicks. Fun, right?
Example 1: Pulsing cursor
Let’s make a cursor that pulses every time you click it
(Psst, here’s a link to the page with an example of the pulsing cursor)
Create a second variant of your cursor. For this one, make the size of the circle bigger and reduce the opacity to 0.
Now, add an interaction to this variant that gets triggered when the user clicks on the cursor. You’ll set it to animate to the bigger size and fade out.
After a few seconds, it’ll shrink back to its original size.
Boom! You now have a cool pulsing effect every time the user clicks. Fun, right?
Custom pulsing cursor.
Custom pulsing cursor.
Custom pulsing cursor.
Example 2: Magic stars
Let’s make little stars fall from your cursor as it hovers over different elements on the page.
(link to an example of the magic stars cursor on a page)
Create a set of star icons (use SVGs if you want them to be smooth and scalable).
Apply an effect to each star, like a 3D rotation and opacity animation, so they fall as they rotate.
Set up a delay for each star, so they fall at different times, creating that mesmerizing effect.
To make this work, you’ll need to attach these stars to the cursor component and set them to Follow. When you hover over certain elements (like cards), the stars will start falling out of the cursor. Very cool, I know ;)
Example 2: Magic stars
Let’s make little stars fall from your cursor as it hovers over different elements on the page.
(link to an example of the magic stars cursor on a page)
Create a set of star icons (use SVGs if you want them to be smooth and scalable).
Apply an effect to each star, like a 3D rotation and opacity animation, so they fall as they rotate.
Set up a delay for each star, so they fall at different times, creating that mesmerizing effect.
To make this work, you’ll need to attach these stars to the cursor component and set them to Follow. When you hover over certain elements (like cards), the stars will start falling out of the cursor. Very cool, I know ;)
Example 2: Magic stars
Let’s make little stars fall from your cursor as it hovers over different elements on the page.
(link to an example of the magic stars cursor on a page)
Create a set of star icons (use SVGs if you want them to be smooth and scalable).
Apply an effect to each star, like a 3D rotation and opacity animation, so they fall as they rotate.
Set up a delay for each star, so they fall at different times, creating that mesmerizing effect.
To make this work, you’ll need to attach these stars to the cursor component and set them to Follow. When you hover over certain elements (like cards), the stars will start falling out of the cursor. Very cool, I know ;)
Custom magic stars cursor.
Custom magic stars cursor.
Custom magic stars cursor.
Customize cursor for specific elements
Here’s a fun tweak you can try: Let’s make your cursor act differently when hovering over specific elements, like cards or images.
Select the card or element you want to modify.
In the properties panel, choose Add Custom Cursor.
Set the cursor to follow a new variant or component (maybe an image or animated effect).
Customize cursor for specific elements
Here’s a fun tweak you can try: Let’s make your cursor act differently when hovering over specific elements, like cards or images.
Select the card or element you want to modify.
In the properties panel, choose Add Custom Cursor.
Set the cursor to follow a new variant or component (maybe an image or animated effect).
Customize cursor for specific elements
Here’s a fun tweak you can try: Let’s make your cursor act differently when hovering over specific elements, like cards or images.
Select the card or element you want to modify.
In the properties panel, choose Add Custom Cursor.
Set the cursor to follow a new variant or component (maybe an image or animated effect).
Add animation effects
Animations take it up a notch. If you want your cursor to appear or disappear smoothly as you hover over elements, here’s how:
Go to the Component where your cursor is located.
Apply an effect, like scale or opacity. For instance, let the cursor scale in when it appears next to an image.
You can even make the image or the cursor wrap itself in a mask for a smooth reveal.
I personally love making the cursor fade in as you hover over cards.
It gives a smooth transition that feels very polished.
Add animation effects
Animations take it up a notch. If you want your cursor to appear or disappear smoothly as you hover over elements, here’s how:
Go to the Component where your cursor is located.
Apply an effect, like scale or opacity. For instance, let the cursor scale in when it appears next to an image.
You can even make the image or the cursor wrap itself in a mask for a smooth reveal.
I personally love making the cursor fade in as you hover over cards.
It gives a smooth transition that feels very polished.
Add animation effects
Animations take it up a notch. If you want your cursor to appear or disappear smoothly as you hover over elements, here’s how:
Go to the Component where your cursor is located.
Apply an effect, like scale or opacity. For instance, let the cursor scale in when it appears next to an image.
You can even make the image or the cursor wrap itself in a mask for a smooth reveal.
I personally love making the cursor fade in as you hover over cards.
It gives a smooth transition that feels very polished.
Custom cursor animation.
Custom cursor animation.
Custom cursor animation.
Final touches
Once you have all these effects in place, you're ready to show off your interactive, custom cursor! The best part? You’re not writing a single line of code! It’s all Framer's no-code magic.
I hope this helps you create some fun, custom cursors that’ll impress everyone who visits your site.
It’s honestly one of the coolest ways to add personality to your website. Don't forget to play around with the animations and interactions to find what feels right for your design.
If you try it out, let me know what you come up with! I’d love to see how you make it your own. <3
Final touches
Once you have all these effects in place, you're ready to show off your interactive, custom cursor! The best part? You’re not writing a single line of code! It’s all Framer's no-code magic.
I hope this helps you create some fun, custom cursors that’ll impress everyone who visits your site.
It’s honestly one of the coolest ways to add personality to your website. Don't forget to play around with the animations and interactions to find what feels right for your design.
If you try it out, let me know what you come up with! I’d love to see how you make it your own. <3
Final touches
Once you have all these effects in place, you're ready to show off your interactive, custom cursor! The best part? You’re not writing a single line of code! It’s all Framer's no-code magic.
I hope this helps you create some fun, custom cursors that’ll impress everyone who visits your site.
It’s honestly one of the coolest ways to add personality to your website. Don't forget to play around with the animations and interactions to find what feels right for your design.
If you try it out, let me know what you come up with! I’d love to see how you make it your own. <3
