.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Drift Canvas

image-galleryPro

An endless, draggable image canvas: one tile of varied-height cards wraps seamlessly in both directions, with momentum, wheel and arrow-key panning.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

drift-canvas.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type DriftCanvasProps = {  items: DriftCanvasItem[]  columns?: number  size?: number  gap?: number  radius?: number  onItemClick?: (item: DriftCanvasItem, index: number) => void  wheel?: 'auto' | 'always' | 'off'  inertia?: number  touchDrag?: boolean  children?: ReactNode  className?: string}export function DriftCanvas({  items,  columns = 5,  size = 220,  gap = 16,  radius = 16,  onItemClick,  wheel = 'auto',  inertia = 0.85,  touchDrag = true,  children,  className,}: DriftCanvasProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Drift Canvas is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/drift-canvas

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

DriftCanvasProps

Prop	Type	Default	What it does
`items` required	`DriftCanvasItem[]`	–	Pictures to lay out. They repeat to fill the tile, and the tile repeats forever in every direction.
`columns`	`number`	`5`	Columns in one repeat of the tile. More columns means a wider tile before the pattern repeats.
`size`	`number`	`220`	Width of a column (a card) in CSS pixels. It shrinks on narrow containers so a phone still sees several cards.
`gap`	`number`	`16`	Space between cards in CSS pixels.
`radius`	`number`	`16`	Corner radius of every card in CSS pixels.
`onItemClick`	`(item: DriftCanvasItem, index: number) => void`	–	Called when a card is clicked or activated by keyboard. Giving it turns every card into a focusable button. It never fires for the click that ends a drag.
`wheel`	`'auto' \| 'always' \| 'off'`	`'auto'`	How the mouse wheel and trackpad pan the canvas. `auto` (default): only while the pointer is over the canvas AND the gesture is clearly meant for it: a sideways swipe, Shift + wheel, or any wheel once you have pressed or focused the canvas (it lets go again when the pointer leaves, focus moves away or Escape is pressed). A plain vertical wheel over an untouched canvas still scrolls the page. `always`: every wheel event over the canvas pans it. Use it on full-screen stages. `off`: the wheel is never handled.
`inertia`	`number`	`0.85`	How long a flick keeps gliding, from 0 (stops at once) to 1 (long glide). Ignored with reduced motion, where there is no glide.
`touchDrag`	`boolean`	`true`	Touch behaviour. By default the surface sets `touch-action: none` so a finger can pan in any direction, which also means a finger on the canvas will not scroll the page. Pass `false` to use `touch-action: pan-y` instead: swiping sideways pans the canvas and swiping up or down scrolls the page. Mouse and pen always drag freely.
`aria-label`	`string`	`'Image canvas'`	Accessible name of the canvas.
`children`	`ReactNode`	–	Content drawn above the cards. It ignores the pointer; switch `pointer-events-auto` back on for anything clickable.
`className`	`string`	–	–

Preview

Code

The code is locked

Props

A11y