🛠️ Advanced Technical Reference

This section covers the specialized "Vibe" design system, professional architecture patterns, and internal physics specifications for the VibeDev Motion engine.

---

🎨 Design Presets (The "Vibe" System)

VibeDev uses a predefined physics catalog to create specific emotional responses. These can be set globally in the VibeProvider or overridden locally.

| Preset | Technical Profile | Best Use Case | | :--- | :--- | :--- | | apple | High damping (20+), medium stiffness (150). | High-end B2B, SaaS, or Portfolio sites. | | cyber | Low damping (5), extreme stiffness (500). | Gaming sites, crypto dashboards, tech-heavy UIs. | | minimal | Critical damping (balanced), high mass. | Documentation, internal tools, clean blogs. | | glitch | Randomized drag coefficients, periodic noise. | Digital art galleries, experimental sites. |

🛠️ Customizing Presets

const customTheme = {
  presets: {
    'slow-mo': { stiffness: 50, damping: 25, mass: 2 }
  }
};

<VibeProvider theme={customTheme} defaultPreset="slow-mo">
  {/* App children */}
</VibeProvider>

---

🚀 Professional Use Case: "The Kinetic Dashboard"

To build a state-of-the-art physical dashboard:

1. Global Force: Use <ScrollPhysics intensity={0.5} /> to make widgets react to page momentum.
2. Tactile Widgets: Build cards using <vibe.div physics={true} drag />. Ensure they have mass.
3. Immersive Lighting: Apply useEnvironmentalLight() to the root. Cursor light casts dynamic shadows across widgets.
4. Physical Layouts: Use useVibeLayout() for sidebar collapses so content "bounces" into its new width.

---

⚙️ Internal Physics Specs

For developers fine-tuning the 60Hz WASM simulation:

• Gravity: Default is (0, -9.81) (Earth standard simulation units).
• Scale: 1 simulation unit = 100 pixels.
• Friction: Default 0.5. Restitution: Default 0.7.
• Precision: For 100+ bodies, use precision="low" in PhysicsProvider for mobile stability.

---

🌀 Summary

VibeDev Motion represents a physical world for your UI. By mapping visual timing to real-world mass and tension, you can build interfaces that feel truly alive.