Drag canvas

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   Give the canvas a height: once mounted the cards are placed by the script and no longer push the box open. The size of a card is not a class here but the width and height settings, which the script hands to the stylesheet. And leave the transform of a card to the engine, which writes it every frame.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-drag-canvas	Marks the box that holds the cards. It takes no value: leave the value field empty. That box is the canvas: what the hand drags, what the effect is mounted on and what carries the settings. It takes its height from the page. Without it on any box of the page, the embed marks the parent of every card it finds (data-drag-canvas-card).
   data-drag-canvas-card	Marks one card, a direct child of the canvas. It takes no value. A card can be a link: a plain click still opens it, a drag never does. Without it on any card, the canvas takes its own children as the cards. [ Optional ]
   data-drag-canvas-image	Marks the picture of a card, the element that slides inside it as the wall goes by. It takes no value. Without it the first image of the card is taken; a card with no image simply does not slide. [ Optional ]
   data-drag-canvas-state	Written by the engine on the canvas once mounted: ready. Never written by hand; the stylesheet reads it to clip the canvas, keep the gesture and take the cards out of the flow. [ Optional ]
   data-drag-canvas-dragging	Written by the engine on the canvas while a drag runs. Never written by hand; the stylesheet reads it for the closed hand. [ Optional ]
   data-drag-canvas-clone	Written by the engine on the copies of the cards it adds to fill the wall, each one hidden from screen readers and out of the Tab order. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-drag-canvas-tint	#15100c	Colour of the veil laid on the cards away from the pointer, the ink in the cream and ink look. Options: any CSS colour; taken out of this block, --drag-canvas-tint on the canvas takes over.
   data-drag-canvas-veil	0.16	Strength of that veil, 0 to 1, on a card out of the pointer's reach.
   data-drag-canvas-width	clamp(150px, 17vw, 300px)	Width of a card, any CSS unit.
   data-drag-canvas-height	clamp(188px, 21.25vw, 375px)	Height of a card, any CSS unit.
   data-drag-canvas-gap	clamp(10px, 1.2vw, 20px)	Space between two cards, on both axes, any CSS unit.
   data-drag-canvas-stagger	0.5	How far every other column sits lower, as a share of one cell, 0 to 1.
   data-drag-canvas-friction	0.05	Share of its speed a thrown wall loses on each frame, 0 to 1.
   data-drag-canvas-ratio	1	How far the wall travels for one pixel of hand travel.
   data-drag-canvas-snap	0	Whether a throw comes to rest with one card in the middle of the canvas, 0 or 1.
   data-drag-canvas-wheel	1	Whether the wheel and the trackpad move the wall, 0 or 1.
   data-drag-canvas-lift	1.05	Scale of the card right under the pointer.
   data-drag-canvas-reach	clamp(220px, 30vw, 520px)	Radius around the pointer inside which cards lift and clear, any CSS unit.
   data-drag-canvas-parallax	0.05	How far a picture slides inside its card as the card crosses the canvas, as a share of the card, 0 to 0.2.

Two files and their pictures (12), no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call DragCanvas.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-drag-canvas-tint	#15100c	Colour of the veil laid on the cards away from the pointer, the ink in the cream and ink look. Options: any CSS colour; taken out of this block, --drag-canvas-tint on the canvas takes over.
   data-drag-canvas-veil	0.16	Strength of that veil, 0 to 1, on a card out of the pointer's reach.	At 0 no veil at all, the cards only lift	Past 0.4 the wall goes dark around the pointer
   data-drag-canvas-width	clamp(150px, 17vw, 300px)	Width of a card, any CSS unit.	Small tiles, many on screen, more nodes on the page	A few large cards, each one read on its own
   data-drag-canvas-height	clamp(188px, 21.25vw, 375px)	Height of a card, any CSS unit.	Landscape cards	Tall portrait cards, which is what the bank's reams are
   data-drag-canvas-gap	clamp(10px, 1.2vw, 20px)	Space between two cards, on both axes, any CSS unit.	At 0 the cards touch and the wall is one surface	A loose wall with a lot of page between the cards
   data-drag-canvas-stagger	0.5	How far every other column sits lower, as a share of one cell, 0 to 1.	At 0 a plain grid, the rows straight	At 0.5 a brick layout, each column half a card lower than the last
   data-drag-canvas-friction	0.05	Share of its speed a thrown wall loses on each frame, 0 to 1.	A wall that glides a long way before it stops	A wall that stops almost where the hand left it
   data-drag-canvas-ratio	1	How far the wall travels for one pixel of hand travel.	Under 1 a heavy wall that lags behind the hand	Over 1 a light wall that outruns the hand
   data-drag-canvas-snap	0	Whether a throw comes to rest with one card in the middle of the canvas, 0 or 1.	At 0 the wall rests wherever its speed runs out	At 1 every throw, wheel and arrow lands on a centred card
   data-drag-canvas-wheel	1	Whether the wheel and the trackpad move the wall, 0 or 1.	At 0 the wheel scrolls the page as usual, over the canvas too	At 1 the canvas keeps the wheel, and the page does not scroll while the pointer is on it
   data-drag-canvas-lift	1.05	Scale of the card right under the pointer.	At 1 no lift; under 1 the card sinks instead	Past 1.1 the lifted card covers its gap and touches its neighbours
   data-drag-canvas-reach	clamp(220px, 30vw, 520px)	Radius around the pointer inside which cards lift and clear, any CSS unit.	Only the card under the pointer answers	The whole canvas lifts a little, and the veil hardly shows
   data-drag-canvas-parallax	0.05	How far a picture slides inside its card as the card crosses the canvas, as a share of the card, 0 to 0.2.	At 0 the pictures sit still and are not cropped	A deep slide, and a picture cropped by twice that share on each axis

2. Drive it from JavaScript

   When a button has to bring a card to the middle, when the cards change after load, or when the page reacts to where the wall came to rest.
   JavaScript Expand Copy

   const element = document.querySelector('[data-drag-canvas]');
   element.addEventListener('dragcanvas:rest', (e) => {
     console.log(e.detail);
   });
   
   const canvas = DragCanvas.mount(element);   // the box auto() mounted, or a new one
   canvas.select(4);       // throws the wall to rest on the fifth card
   canvas.moveBy(1, 0);    // one card to the right, as the arrow key does
   
   element.addEventListener('dragcanvas:rest', (e) => {
     console.log(e.detail.index);   // the card nearest the middle
   });
   
   // When the canvas leaves the page, or before its cards change:
   DragCanvas.destroy(element);   // removes the copies and gives back the markup as it was

   Show all 15 lines

3. Fit it to your page

   • Structure: a box marked data-drag-canvas, and inside it the cards, its direct children, each marked data-drag-canvas-card. In the reference markup a card is a link holding one picture marked data-drag-canvas-image. Anything can go in a card: a title, a price, a tag. Twelve cards is a good number; one is enough for the engine.
   • The canvas takes its height from the page. Mounted, the cards are placed by the script and no longer push the box open, so the box needs a height of its own: a full screen, a share of it, a fixed band.
   • Cards without the mark: a box with no marked card takes its own children as the cards, scripts and styles left out.
   • One setting for every canvas of the page, without opening the file: declare window.DragCanvasSettings = { snap: 1 } in a script placed before drag-canvas.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-drag-canvas-* attribute on the canvas itself (data-drag-canvas-snap="1"), so one canvas can still differ from the page-wide setting.
   • The size of a card is a setting here, not a class. The wall is laid out by the script, cell by cell, so the script has to know the cell: width, height and gap are read in pixels and handed to the stylesheet, which sizes every card and every copy alike. What is inside a card stays the page's own.
   • A click is still a click. A press that travels less than six pixels opens the card's link. A drag never opens one, and a press on a wall still running stops it without opening the card under it.
   • What the script writes. On the canvas: data-drag-canvas-state="ready" once mounted, data-drag-canvas-dragging while a drag runs, tabindex="0" and role="group" when the markup gave none, and three custom properties, --drag-canvas-width, --drag-canvas-height and --drag-canvas-tint. On each card: a transform, and --drag-canvas-shade, the strength of its veil. On each picture: a transform. The copies carry data-drag-canvas-clone.
   • **From JavaScript, beyond mount, auto and destroy**: the api carries element, settings, cards (the cards of the markup), position() and speed() as { x, y }, phase() (rest, hold, drag or glide), nodes(), moveBy(columns, rows), select(index) which throws the wall so that card comes to rest in the middle, and refresh(). The canvas emits dragcanvas:start { element, x, y } when a drag begins and dragcanvas:rest { element, x, y, column, row, index, card } each time the wall comes to rest. Both bubble.
   • **destroy() leaves the canvas as it was**: the copies removed, the listeners and the size watch gone, the states, the custom properties and every transform taken off.
   • Keyboard: the canvas takes the focus, and the arrow keys move the wall by one card in their direction. Tab then reaches each card of the markup in its order, and a card that takes the focus is brought to the middle of the canvas. The copies never take the focus and are hidden from a screen reader, which reads each card once. Give the canvas an aria-label.
   • Touch: a finger drags and throws the wall on both axes. There is no pointer to lift a card, so the wall is plain: no lift, no veil.
   • **prefers-reduced-motion**: the wall follows the hand and stops where it is let go; nothing glides, lifts or slides. The arrows, Tab and select() put the wall in place at once. The veil still follows the pointer.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own cards in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • A canvas with no height shows nothing. The script says so once in the console. A percentage height needs a parent that has one.
   • Without the stylesheet the cards are not placed. Taking them out of the flow and sizing them is the job of drag-canvas.css; the script only writes transforms and custom properties.
   • A finger on the canvas never scrolls the page. The canvas keeps both axes of a swipe (touch-action: none), or a drag would fight the page scroll. On a phone, a canvas as tall as the screen leaves nothing to scroll the page with: keep it shorter than the screen, or make it the whole page as the preview does.
   • **wheel at 1 keeps the wheel too.** While the pointer is on the canvas the page does not scroll. Set data-drag-canvas-wheel="0" on a canvas that sits in the middle of a long page.
   • The image addresses of snippet.html are relative, images/…, so they point at the images/ folder next to the page holding the markup, which is where the zip puts them. Moved into another page or a framework route, they have to be pointed at wherever your pictures are served from. The Webflow paste and the markup of the AI prompt carry the same pictures by their address on the Webflow CDN instead.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a canvas that already carries the effect returns the existing one. A page-wide block goes in window.DragCanvasSettings, which auto() reads itself.
   • The copies are clones of the markup. A listener added to a card with addEventListener is not on its copies: listen on the canvas and read event.target.closest('[data-drag-canvas-card]'). An id inside a card is taken off its copies.
   • Do not put a transform or a transition on a card. The script writes the card's transform every frame; a transition on it turns the drag into rubber. Style what is inside the card.
   • Parallax crops. A picture is scaled by twice parallax to have room to slide, so its edges are cut. A picture that carries words near its edges wants a small parallax, or 0.
   • Cards added or removed after mount are not seen. Destroy and mount again; refresh() only reads the sizes again.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.