Draggable Canvas

Usage

PreviewCode

Interactive Canvas

Drag & Explore

Drag the canvas to explore • Items have hover effects • Physics-based momentum

"use client";

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

export default function DraggableCanvasDemo() {
  const items = [
    { src: '/image/1.jpg', top: '20%', left: '35%' },
    { src: '/image/2.jpg', top: '40%', left: '45%' },
    { src: '/image/3.jpg', top: '30%', left: '63%' }
  ]

return (
  <div className="w-full h-96 relative overflow-hidden border rounded-lg">
      <DraggableCanvas
          items={items}
          width="200vw"
          height="200vh"
          showBoundary={true}
          showCornerLabels={true}
          friction={0.92}
          elasticity={0.2}
          reboundDamping={0.8}
          initialCenter={true}
      />
  </div>
  );
}

Installation

Install the Draggable Canvas component using your preferred package manager.

npx shadcn@latest add @rigidui/draggable-canvas

Features

The Draggable Canvas component provides a smooth, physics-based draggable interface with momentum, elastic boundaries, and support for any content type.

Component Structure

The Draggable Canvas is a single component that accepts an array of items and configuration options:

<DraggableCanvas
  items={itemsArray}
  width="300vw"
  height="150vh"
  showBoundary={true}
  friction={0.92}
  elasticity={0.2}
/>

Props

DraggableCanvas

DraggableCanvasItem

Examples

Basic Image Gallery

const imageItems = [
  {
    src: "/images/photo1.jpg",
    top: "20%",
    left: "10%",
    width: 300,
    height: 200,
  },
  {
    src: "/images/photo2.jpg",
    top: "60%",
    left: "50%",
    width: 250,
    height: 300,
  },
];

<DraggableCanvas items={imageItems} />;

Custom Content Items

const customItems = [
  {
    render: (
      <div className="bg-white p-6 rounded-lg shadow-lg">
        <h3 className="text-xl font-bold mb-2">Card Title</h3>
        <p>Custom card content with any React components</p>
        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
          Action
        </button>
      </div>
    ),
    top: "30%",
    left: "40%",
    width: 280,
    height: 180,
  },
];

<DraggableCanvas items={customItems} />;

High-Performance Setup

<DraggableCanvas
  items={items}
  friction={0.95}
  elasticity={0.1}
  reboundDamping={0.9}
  stopThreshold={0.005}
  className="bg-gray-50"
/>

Development Mode with Boundaries

<DraggableCanvas
  items={items}
  showBoundary={true}
  showCornerLabels={true}
  width="400vw"
  height="300vh"
/>

Physics Parameters

The Draggable Canvas uses realistic physics simulation:

• Friction: Controls how quickly momentum decays (0.9 = more momentum, 0.8 = less momentum)
• Elasticity: How much items bounce when hitting boundaries (0 = no bounce, 0.5 = strong bounce)
• Rebound Damping: Velocity reduction on boundary collision (0.5 = loses half velocity, 1 = no reduction)
• Stop Threshold: Minimum velocity before animation stops (lower = more precision, higher = better performance)

Accessibility

The Draggable Canvas is designed with accessibility in mind:

• Supports both mouse and touch interactions
• Maintains focus states during dragging
• Respects user's motion preferences
• Works with screen readers for static content

Performance Tips

• Use transform3d for hardware acceleration (built-in)
• Limit the number of items for better performance
• Consider using will-change: transform for frequently moved items
• Use appropriate stopThreshold values to prevent unnecessary animations