Infinite Draggable Canvas

The DraggableCanvas provides a high-performance, frictionless dragging surface using Framer Motion. It acts as a massive container that users can grab and pan around, complete with elastic edge constraints and physical momentum.

Perfect for creating spatial interfaces, node editors, or sprawling image galleries.

Live Preview

Installation

Usage Guide

1. Import the Component

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

import { DraggableCanvas } from "@/components/creative/draggable-canvas";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { DraggableCanvas } from "@/components/creative/draggable-canvas";

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