🧲 useGravityUI()

The useGravityUI() hook is the core of the library. It allows you to bind a magnetic field to any element, making it pull towards the user's cursor.

🛠️ Usage

import { useGravityUI } from 'vibedev-motion';
import { motion } from 'motion/react';

function MagneticButton() {
  const { bind } = useGravityUI({ 
    strength: 0.6, 
    range: 300,
    customPhysics: {
      stiffness: 250,
      damping: 20,
      mass: 1
    }
  });

  return (
    <motion.div {...bind}>
      <button>Magnetic Button</button>
    </motion.div>
  );
}

🧠 Internal Logic

Spring Mapping: Uses a useSpring from Framer Motion.
Vector Math: On every mousemove, it calculates the 2D vector between the cursor and the element's center.
Normalization: It calculates the distance and normalizes the pull factor. If the distance is within the range, it applies the strength to the spring's target position.

🌟 Detailed Use Case

"Sticky" Buttons: Creating buttons that feel magnetic. Perfect for high-end call-to-action buttons where the button physically gravitates toward the user's intent, providing strong visual feedback before the click even happens.

useAutoExperience()