Component
iPadOS Pointer Cursor in Framer
This is a Framer recreation of the iPadOS pointer cursor effect seen on Moritz’s website. Feel free to remix the project and explore how to achieve this seamless interaction in Framer.
About the resource
The way this component works, is you need to add it within frames, like buttons that need to be highlighted when hovered over.
If you set the component to fit width & height, and absolute position within a button for example, the highlight size when hovered over will match the size of the button frame. You can also use a fixed/relative value for width and height of the component, to define specific highlight size.
If you set hide cursor to “yes” no other cursor will be visible on your website, even if you specify any on the right panel.
The color, and size of the iPadOS cursor will be defined on the first(!) instance of the component. If there are multiple component instances with different color and size values, it will always default to the settings of the first instance.
You can however, set hover color, pressed color, magnetism, children, and radius values on each instance - so you can for example have one button with blue hover color, and another with grey.
About the resource
The way this component works, is you need to add it within frames, like buttons that need to be highlighted when hovered over.
If you set the component to fit width & height, and absolute position within a button for example, the highlight size when hovered over will match the size of the button frame. You can also use a fixed/relative value for width and height of the component, to define specific highlight size.
If you set hide cursor to “yes” no other cursor will be visible on your website, even if you specify any on the right panel.
The color, and size of the iPadOS cursor will be defined on the first(!) instance of the component. If there are multiple component instances with different color and size values, it will always default to the settings of the first instance.
You can however, set hover color, pressed color, magnetism, children, and radius values on each instance - so you can for example have one button with blue hover color, and another with grey.
About the resource
The way this component works, is you need to add it within frames, like buttons that need to be highlighted when hovered over.
If you set the component to fit width & height, and absolute position within a button for example, the highlight size when hovered over will match the size of the button frame. You can also use a fixed/relative value for width and height of the component, to define specific highlight size.
If you set hide cursor to “yes” no other cursor will be visible on your website, even if you specify any on the right panel.
The color, and size of the iPadOS cursor will be defined on the first(!) instance of the component. If there are multiple component instances with different color and size values, it will always default to the settings of the first instance.
You can however, set hover color, pressed color, magnetism, children, and radius values on each instance - so you can for example have one button with blue hover color, and another with grey.
The iPadOS pointer cursor component properties in Framer.
The iPadOS pointer cursor component properties in Framer.
The iPadOS pointer cursor component properties in Framer.
The best way to use the effect is to place the component inside a button component that is reused, so that all buttons get the same effect, and properties are the same on all buttons.
Quick tip: Check the remix file provided for this resource and see how the component is being used.
The best way to use the effect is to place the component inside a button component that is reused, so that all buttons get the same effect, and properties are the same on all buttons.
Quick tip: Check the remix file provided for this resource and see how the component is being used.
The best way to use the effect is to place the component inside a button component that is reused, so that all buttons get the same effect, and properties are the same on all buttons.
Quick tip: Check the remix file provided for this resource and see how the component is being used.
