.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}

Drop Gallery

imagePro

Bilder, die in eine Physikwelt fallen gelassen werden und sich aufheben und werfen lassen, per Maus, Touch oder Tastatur.

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.

drop-gallery.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type DropGalleryProps = {  images?: DropGalleryImage[]  colors?: string[]  shape?: 'circle' | 'square'  count?: number  size?: number  gravityX?: number  gravityY?: number  gravityStrength?: number  walls?: DropGalleryWalls  friction?: number  dragStiffness?: number  angularStiffness?: number  controls?: boolean  children?: ReactNode  touchDrag?: boolean  ref?: Ref<DropGalleryHandle>  className?: string}export function DropGallery({  images,  colors,  shape = 'circle',  count = 24,  size = 96,  gravityX = 0,  gravityY = 1,  gravityStrength = 1,  walls,  friction = 0.3,  dragStiffness = 0.2,  angularStiffness = 0.25,  controls = true,  children,  touchDrag = true,  ref,  className,}: DropGalleryProps) {  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

Drop Gallery 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/drop-gallery

MCP

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

DropGalleryProps

Prop	Typ	Standard	Was sie tut
`images`	`DropGalleryImage[]`	–	Pictures that fill the bodies, cycled across `count`. Without any, bodies are solid colours from `colors`.
`colors`	`string[]`	–	Solid fill colours, used when there are no images or while an image is still loading. Any CSS colour, including `var(--x)`.
`shape`	`'circle' \| 'square'`	`'circle'`	Shape of the bodies.
`count`	`number`	`24`	How many bodies to drop. Fewer are used when the container is too small to hold them.
`size`	`number`	`96`	Diameter (or side) of a body in CSS pixels. It shrinks a little on narrow containers.
`gravityX`	`number`	`0`	Pull along the horizontal axis, from -1 (left) to 1 (right).
`gravityY`	`number`	`1`	Pull along the vertical axis, from -1 (up) to 1 (down).
`gravityStrength`	`number`	`1`	Overall strength of gravity, from 0 (weightless) to 3.
`walls`	`DropGalleryWalls`	–	Which edges of the container are solid. Each side can be switched on or off on its own. Bodies that leave through an open side are gone until the next replay.
`friction`	`number`	`0.3`	Surface friction, from 0 (ice) to 1 (rubber). Higher values make the pile settle faster.
`dragStiffness`	`number`	`0.2`	How firmly a grabbed body follows the pointer, from 0.02 (rubber band) to 1 (rigid).
`angularStiffness`	`number`	`0.25`	How firmly a grabbed body resists twisting while dragged, from 0 (spins freely) to 1.
`controls`	`boolean`	`true`	Show the Shake and Drop again buttons, which also give keyboard users a way to move the bodies.
`children`	`ReactNode`	–	Content drawn above the bodies. It ignores the pointer so bodies underneath stay draggable; switch `pointer-events-auto` back on for anything clickable.
`aria-label`	`string`	–	Accessible name of the whole gallery.
`touchDrag`	`boolean`	`true`	Touch behaviour. By default the surface sets `touch-action: none` so a finger can pick up and toss a body, which also means a finger on the gallery will not scroll the page. Pass `false` to keep vertical page scroll (touch then cannot drag; mouse and pen still can).
`ref`	`Ref<DropGalleryHandle>`	–	Ref with `replay()` and `shake()`.
`className`	`string`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y