Physics Canvas

The PhysicsCanvas uses the matter.js engine to turn a standard web layout into a physical sandbox. By wrapping your elements in a PhysicsItem, they are automatically registered as rigid bodies with real mass, friction, and bounce.

Users can grab, drag, and throw these DOM elements around the screen naturally, and they will collide with each other and the invisible boundaries of the canvas.

Live Preview

Installation

[!TIP] Pointer Events: If your PhysicsItem contains images or text that might interfere with the dragging action, make sure to add className="pointer-events-none" to those child elements so the drag event registers cleanly on the wrapper!

Usage Guide

1. Import the Component

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

import { PhysicsCanvas } from "@/components/creative/physics-canvas";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { PhysicsCanvas } from "@/components/creative/physics-canvas";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <PhysicsCanvas
        frictionAir{10}
        gravity{10}
      >
        <div>Content goes here</div>
      </PhysicsCanvas>
    </div>
  );
}