🪄 useAutoExperience()

The useAutoExperience() hook is the ultimate "set it and forget it" tool. It automatically adds magnetic micro-interactions to all elements matching your selectors.

🛠️ Usage

import { useAutoExperience } from 'vibedev-motion';

function App() {
  // Automatically enhance the entire experience
  useAutoExperience({
    selectors: ['button', 'a', '.card'],
    intensity: 15
  });

  return (
    <main>
      <button>Auto-Enchanted Button</button>
      <a href="#">Auto-Enchanted Link</a>
      <div className="card">Auto-Enchanted Card</div>
    </main>
  );
}

🧠 Internal Logic

DOM Scanner: A "Zero-Config" scanner that searches the document for matching elements.
Global Listeners: Attaches global event listeners to window.
Proximity Calculation: Calculates proximity for all elements matching the selectors (default: button, a, .vibe-card) and applies a translate3d transform dynamically.

🌟 Detailed Use Case

Retrofitting Legacy Sites: Adding this at the root of an existing application makes every link and button on the page feel bouncy and alive without needing to modify individual components. It's the fastest way to add "vibe" to a project.

useEnvironmentalLight()