📦 <Reorder />

A physics-enabled version of Framer Motion's Reorder components, providing collision-aware list sorting.

🛠️ Usage

import { Reorder } from 'vibedev-motion';

function Board({ items }) {
  const [list, setList] = useState(items);

  return (
    <Reorder.Group axis="y" values={list} onReorder={setList}>
      {list.map((item) => (
        <Reorder.Item key={item.id} value={item}>
          {item.text}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}

🧠 Features

Collision Detection: Each item has a physical body and collider.
Dynamic Displacement: When dragging an item, others aren't just moved via SVG/Transform; they are physically pushed aside by the collider of the dragged item.
Inertia Drifting: High-velocity drags can cause other items to "bounce" before settling.

🌟 Detailed Use Case

Physical Task Boards: Create a Trello-like interface where moving a card feels like moving a heavy object. As you drag a card between columns, surrounding cards physically "move out of the way" instead of a simple layout shift.

VibeReveal