📦 Components Reference

VibeDev Motion components are the building blocks of physical UI. They wrap standard HTML elements and Framer Motion primitives with real-time WASM physics.

---

🌀 <vibe />

The primary proxy object for all physical UI elements. It mirrors Framer Motion's motion component but adds support for rigid bodies and colliders.

🧩 Usage

<vibe.div 
  physics={true} // Dynamic rigid body
  drag          // Physics-aware drag
/>

🧠 Features

• Auto-Sync: Automatically binds gravity and interaction fields.
• Flexible Physics: Use physics={true} for dynamic bodies or physics="fixed" for static colliders.
• Natural Inertia: Elements have mass, friction, and density by default.

---

✨ <AnimatePresence />

Extends mounting/unmounting logic with specialized physical exit animations like "ejection" and "shatter."

🧩 Usage

<AnimatePresence>
  <vibe.div 
    physicsExit={{ force: [0, -500], random: 100 }} 
  />
</AnimatePresence>

🧠 Features

• Physical Unmounting: Elements stay in the DOM until their physical exit animation (e.g., falling off-screen) completes.
• Satisfying Deletion: Perfect for list items that should "thud" or "fly away" when removed.

---

🗂️ <Reorder />

A physics-enabled list sorting system where items physically push and collide with each other during reordering.

🧩 Usage

<Reorder.Group axis="y" values={list} onReorder={setList}>
  {list.map(item => (
    <Reorder.Item key={item.id} value={item}>
      {item.text}
    </Reorder.Item>
  ))}
</Reorder.Group>

🧠 Features

• Dynamic Displacement: Items aren't just transformed; they are physically pushed aside by the collider of the dragged item.
• Inertial Drifts: High-velocity sorts cause subtle "bouncing" in the rest of the list.

---

👁️ <VibeReveal />

A viewport-aware reveal component that automatically applies theme-specific physical "popping" effects.

🧩 Usage

<VibeReveal
  initial={{ opacity: 0, y: 100 }}
  whileInView={{ opacity: 1, y: 0 }}
/>

🧠 Features

• Kinetic Reveal: Elements "emerge" with physical oscillation instead of linear fades.
• Theme Awareness: Pulls physics constants directly from the global VibeContext.

---

📜 <ScrollPhysics />

Translates page scroll velocity into global physical forces, making all dynamic elements lean and tilt as you scroll.

🧩 Usage

<ScrollPhysics intensity={0.5} damping={0.8} />

🧠 Features

• Velocity Tracking: Measures page momentum and applies proportional impulses to the RAPIER.World.
• Liquid Feel: Elements "swing" based on scroll direction, creating a cohesive, living UI experience.