Guide
- Kinetic
- Hover
- Effect
Guide
- Kinetic
- Hover
- Effect
Guide
- Kinetic
- Hover
- Effect
How to Create a Kinetic Hover Effect in Framer
This Framer blog dives into a slick hover effect that makes elements subtly move when your cursor gets close—like they’re alive. Whether they attract or repel, the result is smooth, organic motion that instantly makes your UI feel more interactive and premium. It’s effortless to use and endlessly customizable.
Posted by
Nandi
Table of contents
What is a kinetic hover effect?
Think of it like magnetism for your UI. When your cursor gets close to an element, it either attracts or repels, as if the element senses your presence and moves in response. Smoothly. Organically. Visually satisfying. This component is a Framer-friendly remake of the hover force effect made popular by Marcos Silva, and it adds a whole new layer of interactivity to your site.
The hover force component
What is a kinetic hover effect?
Think of it like magnetism for your UI. When your cursor gets close to an element, it either attracts or repels, as if the element senses your presence and moves in response. Smoothly. Organically. Visually satisfying. This component is a Framer-friendly remake of the hover force effect made popular by Marcos Silva, and it adds a whole new layer of interactivity to your site.
The hover force component
What is a kinetic hover effect?
Think of it like magnetism for your UI. When your cursor gets close to an element, it either attracts or repels, as if the element senses your presence and moves in response. Smoothly. Organically. Visually satisfying. This component is a Framer-friendly remake of the hover force effect made popular by Marcos Silva, and it adds a whole new layer of interactivity to your site.
The hover force component
The hover Force Component gives you a full UI panel to control every aspect of the effect:
Area — how close your cursor needs to be for the effect to activate
Movement — how far the element moves in response
Mode — choose between Attract or Repel
Direction — horizontal, vertical, or free movement
Smoothing — controls how fluid and delayed the motion feels
Enable Toggle — turn the effect on/off whenever you need. It’s plug-and-play, but with tons of room to customize.
How to use it in your Framer project
Drop the Hover Force Component into your canvas
Connect it to any layer, Just drag the “Connect To” handle onto the element you want to animate, buttons, images, cards, whatever.
Tweak the settings in the UI panel. Want your element to run away from the cursor like a scared cat? Choose Repel. Want it to float toward the pointer with a soft pull? Go Attract, dial down the movement, and add some smoothing.
Play with direction and distance. You can lock movement to just horizontal or vertical, perfect for sliders and text, or go full chaos mode with free movement.
The hover Force Component gives you a full UI panel to control every aspect of the effect:
Area — how close your cursor needs to be for the effect to activate
Movement — how far the element moves in response
Mode — choose between Attract or Repel
Direction — horizontal, vertical, or free movement
Smoothing — controls how fluid and delayed the motion feels
Enable Toggle — turn the effect on/off whenever you need. It’s plug-and-play, but with tons of room to customize.
How to use it in your Framer project
Drop the Hover Force Component into your canvas
Connect it to any layer, Just drag the “Connect To” handle onto the element you want to animate, buttons, images, cards, whatever.
Tweak the settings in the UI panel. Want your element to run away from the cursor like a scared cat? Choose Repel. Want it to float toward the pointer with a soft pull? Go Attract, dial down the movement, and add some smoothing.
Play with direction and distance. You can lock movement to just horizontal or vertical, perfect for sliders and text, or go full chaos mode with free movement.
The hover Force Component gives you a full UI panel to control every aspect of the effect:
Area — how close your cursor needs to be for the effect to activate
Movement — how far the element moves in response
Mode — choose between Attract or Repel
Direction — horizontal, vertical, or free movement
Smoothing — controls how fluid and delayed the motion feels
Enable Toggle — turn the effect on/off whenever you need. It’s plug-and-play, but with tons of room to customize.
How to use it in your Framer project
Drop the Hover Force Component into your canvas
Connect it to any layer, Just drag the “Connect To” handle onto the element you want to animate, buttons, images, cards, whatever.
Tweak the settings in the UI panel. Want your element to run away from the cursor like a scared cat? Choose Repel. Want it to float toward the pointer with a soft pull? Go Attract, dial down the movement, and add some smoothing.
Play with direction and distance. You can lock movement to just horizontal or vertical, perfect for sliders and text, or go full chaos mode with free movement.
The hover force component properties in Framer.
The hover force component properties in Framer.
The hover force component properties in Framer.
Real-world use cases
Need ideas on what to do with the component? Here’s how I’d use it:
Add a kinetic hover to team member portraits to make a “meet the team” section feel more alive.
Use it on call-to-action buttons to subtly guide the user’s mouse.
Drop it on decorative elements like icons or 3D shapes for motion that follows your visitor around.
Pair it with a hero section headline to make text breathe and shift as people explore.
Wrapping up
The Hover Force Component isn’t just for show. It taps into something psychological, responsiveness. Your site feels dynamic, present, reactive. That kind of kinetic feedback makes interfaces feel premium. It’s a small detail that gives your website a big personality boost.
Real-world use cases
Need ideas on what to do with the component? Here’s how I’d use it:
Add a kinetic hover to team member portraits to make a “meet the team” section feel more alive.
Use it on call-to-action buttons to subtly guide the user’s mouse.
Drop it on decorative elements like icons or 3D shapes for motion that follows your visitor around.
Pair it with a hero section headline to make text breathe and shift as people explore.
Wrapping up
The Hover Force Component isn’t just for show. It taps into something psychological, responsiveness. Your site feels dynamic, present, reactive. That kind of kinetic feedback makes interfaces feel premium. It’s a small detail that gives your website a big personality boost.
Real-world use cases
Need ideas on what to do with the component? Here’s how I’d use it:
Add a kinetic hover to team member portraits to make a “meet the team” section feel more alive.
Use it on call-to-action buttons to subtly guide the user’s mouse.
Drop it on decorative elements like icons or 3D shapes for motion that follows your visitor around.
Pair it with a hero section headline to make text breathe and shift as people explore.
Wrapping up
The Hover Force Component isn’t just for show. It taps into something psychological, responsiveness. Your site feels dynamic, present, reactive. That kind of kinetic feedback makes interfaces feel premium. It’s a small detail that gives your website a big personality boost.
