.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

Eine endlose, ziehbare Bildfläche: Eine Kachel aus Karten unterschiedlicher Höhe wiederholt sich nahtlos in beide Richtungen, mit Trägheit, Mausrad und Verschieben per Pfeiltasten.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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

Der Code ist gesperrt

Drift Canvas gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

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	Typ	Standard	Was sie tut
`items` erforderlich	`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`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y