New
New
New
Guide
- IpadOS
- Cursor
Guide
- IpadOS
- Cursor
Guide
- IpadOS
- Cursor
How to Create iPadOS Cursor Effect in Framer
In this Framer blog, I'm showing you how to add that sleek iPadOS-style hover effect to your websites. You'll learn how to implement this premium cursor interaction using a simple component - no coding required. If you've been wanting to add that Apple-level polish to your sites, this is exactly what you need.
Posted by
Nandi
Table of contents
IpadOS cursor component.
IpadOS cursor component.
IpadOS cursor component.
The easiest way to get started is to copy the IpadOS cursor component.
Here’s how:
Search for “iPadOS Hover” in the resources section
Hit “Copy Component.”
Jump into your Framer project and paste it in.
It’ll drop onto your canvas, probably invisible at first, because this little component doesn’t have a default visible size.
Add it to your elements
You can use the iPadOS cursor effect in two main ways:
Fixed Size
Set a specific width and height for the cursor effect, pin it to all sides of your interactive frame, and it’ll always highlight that exact area.
2. Fit to Content
Set width and height to Fit Content, and it’ll automatically match the size of whatever parent frame it’s inside. Perfect if you just want it to wrap your element without guessing pixel sizes.
Customize the look & feel
This component is fully tweakable from the right-hand properties panel in Framer.
Here’s what you can adjust:
Base Color – The default highlight color.
Hover Color – The color it changes to when hovered.
Press Color – The color when the element is clicked.
Size – Controls how big the hover highlight is.
Magnetism – How strongly it “snaps” onto the element. (Go easy—too much can feel overly sticky.)
Children Movement – Lets the contents inside the hovered element move slightly for extra depth.
Radius – Adjust the roundness of the hover effect.
Hide Cursor – Removes the default cursor so you only see the highlight circle.
Z-Index – Keeps the effect layered above everything else.
The easiest way to get started is to copy the IpadOS cursor component.
Here’s how:
Search for “iPadOS Hover” in the resources section
Hit “Copy Component.”
Jump into your Framer project and paste it in.
It’ll drop onto your canvas, probably invisible at first, because this little component doesn’t have a default visible size.
Add it to your elements
You can use the iPadOS cursor effect in two main ways:
Fixed Size
Set a specific width and height for the cursor effect, pin it to all sides of your interactive frame, and it’ll always highlight that exact area.
2. Fit to Content
Set width and height to Fit Content, and it’ll automatically match the size of whatever parent frame it’s inside. Perfect if you just want it to wrap your element without guessing pixel sizes.
Customize the look & feel
This component is fully tweakable from the right-hand properties panel in Framer.
Here’s what you can adjust:
Base Color – The default highlight color.
Hover Color – The color it changes to when hovered.
Press Color – The color when the element is clicked.
Size – Controls how big the hover highlight is.
Magnetism – How strongly it “snaps” onto the element. (Go easy—too much can feel overly sticky.)
Children Movement – Lets the contents inside the hovered element move slightly for extra depth.
Radius – Adjust the roundness of the hover effect.
Hide Cursor – Removes the default cursor so you only see the highlight circle.
Z-Index – Keeps the effect layered above everything else.
The easiest way to get started is to copy the IpadOS cursor component.
Here’s how:
Search for “iPadOS Hover” in the resources section
Hit “Copy Component.”
Jump into your Framer project and paste it in.
It’ll drop onto your canvas, probably invisible at first, because this little component doesn’t have a default visible size.
Add it to your elements
You can use the iPadOS cursor effect in two main ways:
Fixed Size
Set a specific width and height for the cursor effect, pin it to all sides of your interactive frame, and it’ll always highlight that exact area.
2. Fit to Content
Set width and height to Fit Content, and it’ll automatically match the size of whatever parent frame it’s inside. Perfect if you just want it to wrap your element without guessing pixel sizes.
Customize the look & feel
This component is fully tweakable from the right-hand properties panel in Framer.
Here’s what you can adjust:
Base Color – The default highlight color.
Hover Color – The color it changes to when hovered.
Press Color – The color when the element is clicked.
Size – Controls how big the hover highlight is.
Magnetism – How strongly it “snaps” onto the element. (Go easy—too much can feel overly sticky.)
Children Movement – Lets the contents inside the hovered element move slightly for extra depth.
Radius – Adjust the roundness of the hover effect.
Hide Cursor – Removes the default cursor so you only see the highlight circle.
Z-Index – Keeps the effect layered above everything else.
IpadOS hover component properties.
IpadOS hover component properties.
IpadOS hover component properties.
Use it on buttons, cards, and shared components
If you’re adding this effect to multiple elements—say, all buttons across your site—place it inside the button component itself. That way, every instance of that button automatically gets the effect without you manually adding it to each one.
You can even override the hover and press colors for different button variants, so your blue button and gray button still feel consistent but unique.
Test and refine
Once it’s in place, preview your site. Hover over buttons, images, or logos and watch that silky-smooth Apple-inspired interaction come to life.
It’s a small touch, but it transforms how “premium” your site feels, and it’s insanely easy to set up thanks to the ready-made component.
Use it on buttons, cards, and shared components
If you’re adding this effect to multiple elements—say, all buttons across your site—place it inside the button component itself. That way, every instance of that button automatically gets the effect without you manually adding it to each one.
You can even override the hover and press colors for different button variants, so your blue button and gray button still feel consistent but unique.
Test and refine
Once it’s in place, preview your site. Hover over buttons, images, or logos and watch that silky-smooth Apple-inspired interaction come to life.
It’s a small touch, but it transforms how “premium” your site feels, and it’s insanely easy to set up thanks to the ready-made component.
Use it on buttons, cards, and shared components
If you’re adding this effect to multiple elements—say, all buttons across your site—place it inside the button component itself. That way, every instance of that button automatically gets the effect without you manually adding it to each one.
You can even override the hover and press colors for different button variants, so your blue button and gray button still feel consistent but unique.
Test and refine
Once it’s in place, preview your site. Hover over buttons, images, or logos and watch that silky-smooth Apple-inspired interaction come to life.
It’s a small touch, but it transforms how “premium” your site feels, and it’s insanely easy to set up thanks to the ready-made component.
