Flairmagnetic

Magnetic

Button drifts toward the cursor, springs back on leave.

tap / hover to play

import { motion, useSpring } from "framer-motion";

const x = useSpring(0, { stiffness: 300, damping: 20 });
const y = useSpring(0, { stiffness: 300, damping: 20 });

<motion.button
  onPointerMove={(e) => {
    const r = e.currentTarget.getBoundingClientRect();
    x.set((e.clientX - r.left - r.width / 2) * 0.4);
    y.set((e.clientY - r.top - r.height / 2) * 0.4);
  }}
  onPointerLeave={() => { x.set(0); y.set(0); }}
  style={{ x, y }}
>
  Hover me
</motion.button>