How To Create A Custom Cursor In Framer

How To Create A Custom Cursor In Framer

  • Guide

  • Code override
  • Guide

  • Code override
  • Guide

  • Code override

How To Create A Custom Cursor In Framer

In this guide, you'll learn how to set up a custom cursor on your Framer website without writing any code (because I did it for you). It's going to be pretty straightforward. We'll create a frame for the custom cursor, then apply a code override to transform it into the cursor for our website (yes, it includes hover states too).

image of Nandi Muzsik

Posted by

Nandi

custom cursor in Framer
custom cursor in Framer
custom cursor in Framer

Table of contents

Intro to the override

Before we start, I want to mention that this code override will cause the frame you apply it to follow the cursor. Not only that, it'll change its opacity to 0.5 and its scale to 1.7 when hovering over an element that has either an "a" (link) tag or a "button" tag.

Therefore, if you have an interactive element and want the cursor to enter the hover state when hovering over it, you should assign it a "button" tag.

Where can you check the HTML tag of the element in Framer?

Good question.

After selecting an element, head over to the right panel and scroll down to the Accessibility section. You'll find the element's HTML tag there.

Intro to the override

Before we start, I want to mention that this code override will cause the frame you apply it to follow the cursor. Not only that, it'll change its opacity to 0.5 and its scale to 1.7 when hovering over an element that has either an "a" (link) tag or a "button" tag.

Therefore, if you have an interactive element and want the cursor to enter the hover state when hovering over it, you should assign it a "button" tag.

Where can you check the HTML tag of the element in Framer?

Good question.

After selecting an element, head over to the right panel and scroll down to the Accessibility section. You'll find the element's HTML tag there.

Intro to the override

Before we start, I want to mention that this code override will cause the frame you apply it to follow the cursor. Not only that, it'll change its opacity to 0.5 and its scale to 1.7 when hovering over an element that has either an "a" (link) tag or a "button" tag.

Therefore, if you have an interactive element and want the cursor to enter the hover state when hovering over it, you should assign it a "button" tag.

Where can you check the HTML tag of the element in Framer?

Good question.

After selecting an element, head over to the right panel and scroll down to the Accessibility section. You'll find the element's HTML tag there.

Accessibility settings interface in Framer, showing options for HTML tag, ARIA label, and tab index for a button element

Setting the HTML tag of an element on the right panel.

Accessibility settings interface in Framer, showing options for HTML tag, ARIA label, and tab index for a button element

Setting the HTML tag of an element on the right panel.

Accessibility settings interface in Framer, showing options for HTML tag, ARIA label, and tab index for a button element

Setting the HTML tag of an element on the right panel.

If your element has a link, an "a" tag will be automatically applied. For other cases, you'll need to manually set the tag.

Step 01 - Create a cursor

When creating a custom cursor design, remember that this element will scale up and lose some opacity when you're hovering over interactive elements.

For my demonstration, I just created a simple 20x20 circle and colored it white. Of course, you're free to create any cursor design you fancy.

What's critical is to position it within the desktop breakpoint. Avoid nesting it further, and set its positioning to absolute. Centre it with ⌥ + H and ⌥ + V and make sure to deactivate all pins.

Check out my setup below:

If your element has a link, an "a" tag will be automatically applied. For other cases, you'll need to manually set the tag.

Step 01 - Create a cursor

When creating a custom cursor design, remember that this element will scale up and lose some opacity when you're hovering over interactive elements.

For my demonstration, I just created a simple 20x20 circle and colored it white. Of course, you're free to create any cursor design you fancy.

What's critical is to position it within the desktop breakpoint. Avoid nesting it further, and set its positioning to absolute. Centre it with ⌥ + H and ⌥ + V and make sure to deactivate all pins.

Check out my setup below:

If your element has a link, an "a" tag will be automatically applied. For other cases, you'll need to manually set the tag.

Step 01 - Create a cursor

When creating a custom cursor design, remember that this element will scale up and lose some opacity when you're hovering over interactive elements.

For my demonstration, I just created a simple 20x20 circle and colored it white. Of course, you're free to create any cursor design you fancy.

What's critical is to position it within the desktop breakpoint. Avoid nesting it further, and set its positioning to absolute. Centre it with ⌥ + H and ⌥ + V and make sure to deactivate all pins.

Check out my setup below:

Framer design interface showing cursor creation: white circular shape with position and size settings, and project structure sidebar

The custom cursor setup in Framer.

Framer design interface showing cursor creation: white circular shape with position and size settings, and project structure sidebar

The custom cursor setup in Framer.

Framer design interface showing cursor creation: white circular shape with position and size settings, and project structure sidebar

The custom cursor setup in Framer.

If you're happy with your custom cursor, we can move on to the next step.

Step 02 - Create and customize the override

So, I've put together a custom code override with ChatGPT that accomplishes several things:

Makes the element follow the cursor.

  1. It makes the element follow the cursor.

  2. It applies a slight transition to the cursor-follow animation.

  3. It hides the default cursor.

  4. It changes both the scale and opacity of the element when hovering over something interactive (namely, elements carrying "a" or "button" HTML tags).

You can find and copy the code override here.

How to create and apply a code override in Framer?

Click on the cursor element that you just crafted. In the right panel, you'll see a code override section where you can create a new file.

If you're happy with your custom cursor, we can move on to the next step.

Step 02 - Create and customize the override

So, I've put together a custom code override with ChatGPT that accomplishes several things:

Makes the element follow the cursor.

  1. It makes the element follow the cursor.

  2. It applies a slight transition to the cursor-follow animation.

  3. It hides the default cursor.

  4. It changes both the scale and opacity of the element when hovering over something interactive (namely, elements carrying "a" or "button" HTML tags).

You can find and copy the code override here.

How to create and apply a code override in Framer?

Click on the cursor element that you just crafted. In the right panel, you'll see a code override section where you can create a new file.

If you're happy with your custom cursor, we can move on to the next step.

Step 02 - Create and customize the override

So, I've put together a custom code override with ChatGPT that accomplishes several things:

Makes the element follow the cursor.

  1. It makes the element follow the cursor.

  2. It applies a slight transition to the cursor-follow animation.

  3. It hides the default cursor.

  4. It changes both the scale and opacity of the element when hovering over something interactive (namely, elements carrying "a" or "button" HTML tags).

You can find and copy the code override here.

How to create and apply a code override in Framer?

Click on the cursor element that you just crafted. In the right panel, you'll see a code override section where you can create a new file.

Code Overrides interface in web design tool, showing Custom_Cursor file selection and options for adding code override

Code override section on the right panel.

Code Overrides interface in web design tool, showing Custom_Cursor file selection and options for adding code override

Code override section on the right panel.

Code Overrides interface in web design tool, showing Custom_Cursor file selection and options for adding code override

Code override section on the right panel.

You can paste the code override into the file you've just set up. If you want to tweak the scale and opacity changes on hover, you can adjust these lines here:

You can paste the code override into the file you've just set up. If you want to tweak the scale and opacity changes on hover, you can adjust these lines here:

You can paste the code override into the file you've just set up. If you want to tweak the scale and opacity changes on hover, you can adjust these lines here:

Code editor showing React component for custom cursor with opacity and scale changes on hover, demonstrating interactive element styling

Editable sections in the code override.

Code editor showing React component for custom cursor with opacity and scale changes on hover, demonstrating interactive element styling

Editable sections in the code override.

Code editor showing React component for custom cursor with opacity and scale changes on hover, demonstrating interactive element styling

Editable sections in the code override.

The "0.5" means that the opacity will change to 50% when hovering over interactive elements and the "1.7" means the scale will enlarge to 170% under the same circumstances. Feel free to use any other numbers that suit you. If you prefer not to change these values, simply write "1" for them.

Step 03 - Publish the website

After you've done this, all that's left is to publish your website and your custom cursor will be live on the site.

Just remember, you'll need to add this custom cursor element to each page.

The "0.5" means that the opacity will change to 50% when hovering over interactive elements and the "1.7" means the scale will enlarge to 170% under the same circumstances. Feel free to use any other numbers that suit you. If you prefer not to change these values, simply write "1" for them.

Step 03 - Publish the website

After you've done this, all that's left is to publish your website and your custom cursor will be live on the site.

Just remember, you'll need to add this custom cursor element to each page.

The "0.5" means that the opacity will change to 50% when hovering over interactive elements and the "1.7" means the scale will enlarge to 170% under the same circumstances. Feel free to use any other numbers that suit you. If you prefer not to change these values, simply write "1" for them.

Step 03 - Publish the website

After you've done this, all that's left is to publish your website and your custom cursor will be live on the site.

Just remember, you'll need to add this custom cursor element to each page.

Design interface showing 'Custom Cursor' text with blue bounding box and white circular cursor below, demonstrating custom cursor implementation

The final custom cursor.

Design interface showing 'Custom Cursor' text with blue bounding box and white circular cursor below, demonstrating custom cursor implementation

The final custom cursor.

Design interface showing 'Custom Cursor' text with blue bounding box and white circular cursor below, demonstrating custom cursor implementation

The final custom cursor.

Conclusion

That's it! You've just learned how to create a custom cursor for your Framer website in a few straightforward steps. From designing the cursor to setting up a code override and applying it, you now have full control over the cursors on your site.

Remember, the cool part about this is its flexibility. Tailor the cursor's design to suit your needs and aesthetic preferences, making your website stand out from the crowd.

Learning to use code overrides in Framer not only offers the potential for unique cursor designs but opens up a world of other interactive possibilities. Feel free to experiment and dive deeper.

Conclusion

That's it! You've just learned how to create a custom cursor for your Framer website in a few straightforward steps. From designing the cursor to setting up a code override and applying it, you now have full control over the cursors on your site.

Remember, the cool part about this is its flexibility. Tailor the cursor's design to suit your needs and aesthetic preferences, making your website stand out from the crowd.

Learning to use code overrides in Framer not only offers the potential for unique cursor designs but opens up a world of other interactive possibilities. Feel free to experiment and dive deeper.

Conclusion

That's it! You've just learned how to create a custom cursor for your Framer website in a few straightforward steps. From designing the cursor to setting up a code override and applying it, you now have full control over the cursors on your site.

Remember, the cool part about this is its flexibility. Tailor the cursor's design to suit your needs and aesthetic preferences, making your website stand out from the crowd.

Learning to use code overrides in Framer not only offers the potential for unique cursor designs but opens up a world of other interactive possibilities. Feel free to experiment and dive deeper.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Pro Site layout highlighting advanced design and interactive features for professionals

    10 Things to Do Before Publishing a Framer Website

    Tips & tricks

    Pro Site layout highlighting advanced design and interactive features for professionals

    10 Things to Do Before Publishing a Framer Website

    Tips & tricks

    Pro Site layout highlighting advanced design and interactive features for professionals

    10 Things to Do Before Publishing a Framer Website

    Tips & tricks

  • Comment section interface with input field and publish button

    How to Add Comments Section to a Framer Website

    Guide

    Comment section interface with input field and publish button

    How to Add Comments Section to a Framer Website

    Guide

    Comment section interface with input field and publish button

    How to Add Comments Section to a Framer Website

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback