🖱️ usePhysicalDrag()

The usePhysicalDrag() hook bridges the gap between manual React gestures and the Rapier WASM physics simulation. It allows you to "throw" UI elements into the physical world.

🛠️ Usage

import { vibe, usePhysicalDrag } from 'vibedev-motion';

function DraggableBall() {
  const body = useBody(); // Access the underlying Rapier body
  usePhysicalDrag(body, {
    stiffness: 400,
    damping: 15
  });

  return (
    <vibe.div physics={true} className="w-20 h-20 bg-primary rounded-full" />
  );
}

🧠 Internal Logic

Impulse Mapping: On Framer Motion's onDrag event, it calculates the movement delta and applies a continuous physical impulse to the Rapier simulation body.
Velocity Conversion: On onDragEnd, it converts the final drag velocity into a physical linear velocity (setLinvel), allowing the object to keep its momentum.
Collision Awareness: Unlike standard drag, a physically dragged object will bounce off other rigid bodies and respect world boundaries.

🌟 Detailed Use Case

"Tossable" UI Elements: Imagine a chat bubble or notification card that you can "flick" to dismiss. Instead of a simple animation, it physically flies across the screen, potentially bouncing off the edges or other UI elements before finally being unmounted.

useVibeLayout()