Zoom Field
image-galleryProAn endless, draggable and zoomable field of photos with momentum, cursor-anchored zoom, depth drift and zoom-adaptive density.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
zoom-field.tsxPro
The code is locked
Zoom Field 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
CLI
npx shadcn@latest add @manniche-pro/zoom-fieldMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
ZoomFieldProps
| Prop | Type | Default | What it does |
|---|---|---|---|
items required | ZoomFieldItem[] | – | Pictures that fill the endless field. They repeat in a scattered order, so even a handful reads as a big collection. |
cellSize | number | 230 | Edge length in CSS pixels of one grid cell at zoom 1. Pictures take roughly a third to two thirds of it. Shrinks a little on narrow containers. |
density | number | 0.8 | How full the field is, from 0.2 (sparse) to 1 (every cell holds a picture). |
radius | number | 10 | Corner radius of every picture, in CSS pixels on screen (it does not grow with zoom). |
dragSpeed | number | 1 | Multiplier for how far the field travels per pixel of dragging. |
friction | number | 3.2 | How quickly a released field slows down, as a decay rate per second. Low values glide, high values stop quickly. |
parallax | number | 1 | Strength of the depth drift, from 0 (flat) to 2. Near layers slide a little further than far ones while the field moves. |
minZoom | number | 0.15 | Closest-out zoom. The field is endless in every direction and in depth, so this is only a comfort limit. |
maxZoom | number | 8 | Furthest-in zoom. |
initialZoom | number | 1 | Zoom the field starts at, and the one the reset button returns to. |
controls | boolean | true | Show the zoom buttons and the hint, which also give pointer-less and touch users a way to zoom. |
seed | number | 7 | Number used to scatter the pictures. The same seed always lays the field out the same way. |
touchDrag | boolean | true | Touch behaviour. By default the surface sets touch-action: none so a finger can drag and pinch the field, which also means a finger on it will not scroll the page. Pass false to keep vertical page scroll (a touch then cannot drag; mouse, pen and the zoom buttons still work). |
aria-label | string | 'Endless image field. Drag to move, scroll or use plus and minus to zoom.' | Accessible name of the whole field. |
className | string | – | – |
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.