🎨 Design Presets (The "Vibe" System)

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

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

🛠️ Customizing Presets

You can define your own physics presets by extending the base theme:

import { VibeProvider } from 'vibedev-motion';

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

function App() {
  return (
    <VibeProvider theme={customTheme} defaultPreset="slow-mo">
      {/* ... */}
    </VibeProvider>
  );
}