Physics Dock

The PhysicsDock takes a standard navigation pattern and injects life into it. Icons act as physical bodies connected via invisible springs. When you drag an item, it pulls on the spring and realistically collides with and pushes away other items.

Powered by matter-js for the physics engine and framer-motion for ultra-smooth 60fps rendering.

Live Preview

[!WARNING] This component introduces `matter-js` as a dependency. While powerful, `matter-js` adds approximately ~70kb to your final bundle size.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { PhysicsDock } from "@/components/creative/physics-dock";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { PhysicsDock } from "@/components/creative/physics-dock";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <PhysicsDock
        itemClassName="example"
        itemRadius{10}
        gap{10}
      >
        <div>Content goes here</div>
      </PhysicsDock>
    </div>
  );
}