🏗️ Architecture & Core Mechanics

The VibeDev Motion engine operates on a unique "Sync-State" architecture. While Framer Motion handles the React state and visual transitions, the VibeDev core runs a parallel physics simulation in a WASM-based world.

1. The Physics Loop

The PhysicsProvider initializes a RAPIER.World and starts a high-performance requestAnimationFrame loop.

What happens in each frame?

Step: The world steps forward (world.step(eventQueue)).
Sync: useBody hooks listen to the world transforms and update their respective React components.
Events: Collision events are processed and dispatched as React callbacks.

2. Rigid-Body Syncing

Every vibe component can be linked to a physical body. If physics={true} is passed:

A matching rigid body and collider are created in the simulation.
The element's x, y, and rotate are driven by the simulation instead of standard CSS layouts.
Layout forces (gravity, friction, air resistance) are applied automatically based on the selected Vibe Preset.

How it differs from standard Framer Motion:

useGravityUI()