.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

Et endeløst lærred af billeder, som kan trækkes rundt: én flise af kort i forskellig højde gentages sømløst i begge retninger, med inerti, rullehjul og panorering med piletasterne.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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)} />}

Koden er låst

Drift Canvas er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`items` påkrævet	`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

Kode

Koden er låst

Props

A11y