📐 useVibeLayout()

The useVibeLayout() hook allows you to create high-performance, layout-aware animations using the FLIP technique enhanced by physical springs.

🛠️ Usage

import { useVibeLayout } from 'vibedev-motion';

function LayoutTransition({ isActive }) {
  // Captures current state before a re-render
  const layoutRef = useVibeLayout(); 

  return (
    <div 
      ref={layoutRef}
      className={isActive ? "w-full" : "w-1/2"}
    />
  );
}

🧠 Internal Logic

• FLIP Technique:
  1. First: Captures the initial position before a layout change.
  2. Last: After the "Last" layout occurs, it detects the new position.
  3. Invert: Calculates the delta from the original position.
  4. Play: Animates the element back to its natural position using a physical spring simulation.
• Physical Springs: Instead of standard easing, it uses real mass and tension to calculate the motion path.

🌟 Detailed Use Case

Smoothly Morphing Grids: When applying a filter to a list or grid of items, they don't just "jump" to their new slots. This hook makes them physically glide and bounce into their new positions, making complex UI state changes feel natural and continuous.