---
title: "Draggable Canvas — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Gwatsin T · Interactive. Draggable Canvas lays out a grid of your layers that visitors grab and throw around."
canonical: "https://framer.elliotli.dev/component/draggable-canvas"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Draggable Canvas

# Draggable Canvas

An endless grid you can throw

[View on Framer](https://framer.com/marketplace/components/draggable-canvas/?via=elliot-li)

![Draggable Canvas preview image 1](https://framer.elliotli.dev/og/component/draggable-canvas/4a56fc5b7a4a612c/1600x1200.jpg)

## Summary

Draggable Canvas lays out a grid of your layers that visitors grab and throw around.

## Description

**Draggable Canvas** lays out a grid of your layers that visitors grab and throw around. It keeps gliding after they let go, and in infinite mode it tiles itself so the grid never runs out in any direction.

It is built to stay out of the way. Dragging never goes through React, the frame loop only runs while something is moving, and it stops entirely when the canvas scrolls off screen. An idle canvas costs nothing.

Fourteen property controls cover columns, item size, gap, infinite tiling, elastic edges, drag speed, momentum, an ambient drift and its direction, edge fade, the grab cursor, and what a finger does.

**Three ways to set it**

_Hero_. Infinite, softly faded at the edges, drifting slowly when nobody is holding it.

_Portfolio wall_. A bounded grid that stretches past its edges and pulls back.

_Dense field_. Small tiles that outrun the pointer.

**Setting up**

Paste the component link into your Framer project's Insert panel. Nothing to install. Leave the Items slot empty to tune the feel on placeholders first.

**Good to know**

Every layer in the Items slot needs to sit at the top level of your page, alongside the breakpoint frame. That is how Framer slots work.

Decide the Touch setting before you ship. Dragging on both axes stops the page scrolling while a finger is on the canvas, which traps a phone reader in a full width hero. Horizontal keeps the page scrollable. The arrow keys pan the canvas too.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5953

## Details

- **Author**: Gwatsin T
- **Price**: $12.00
- **Published**: 2026-09-13
- **Updated**: 2026-10-24
- **Added**: 2026-09-13
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase