.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

Images dropped into a physics world that you can pick up and toss, by mouse, touch or keyboard.

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.

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

The code is locked

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

MCP

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

DropGalleryProps

Prop	Type	Default	What it does
`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`	–	–

Preview

Code

The code is locked

Props

A11y