Magnetic
Framer Core Intermediate framer-motion
The button follows the cursor with spring physics, pulling toward the mouse like a magnet and bouncing back on leave.
The button follows the cursor with spring physics, pulling toward the mouse like a magnet and bouncing back on leave.
Goal: Create a "Magnetic" button animation using framer-motion.
Visual behavior: The button shifts toward the cursor as if pulled by a magnet — the closer the cursor gets to center, the subtler the pull; at the edge it shifts about 35% of the distance from center. When the cursor leaves, the button springs back to rest with a bouncy spring.
Technique:
- useMotionValue for x/y offset tracking
- useSpring with { stiffness: 150, damping: 15, mass: 0.1 } for spring-back physics
- onMouseMove: get the element's bounding rect, calculate cursor offset from center, multiply by 0.35, set x/y motion values
- onMouseLeave: set x/y back to 0
- Apply style={{ x: springX, y: springY }} on a motion.button
Accessibility: Call useReducedMotion() — if it returns true, skip the x/y update in onMouseMove so the button stays static.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Dependency required: framer-motion.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.