🌀 <vibe /> component

The vibe proxy object is the primary entry point for physical UI elements. It mirrors Framer Motion's motion component but adds physical body support.

🛠️ Usage

import { vibe } from 'vibedev-motion';

function PhysicalBox() {
  return (
    <vibe.div 
      physics={true} // Attach a rigid body
      drag          // Standard Framer Motion drag 
      className="w-32 h-32 bg-primary"
    />
  );
}

🧠 Features

• Proxy Based: You can use vibe.div, vibe.button, vibe.span, etc.
• Auto-Sync: Automatically injects gravity and interaction bindings.
• Flexible Physics:
  • physics={true}: A dynamic rigid body that moves and reacts to forces.
  • physics="fixed": A static collider that stays in place but blocks other physical objects.

🌟 Detailed Use Case

Physics-Aware Interactive Buttons: Instead of just scaling on hover, a button can have mass and subtle inertia. When the user interacts, it doesn't just react visually but physically displacements surrounding elements or "bounces" back with real momentum.