Zoom Field
image-galleryProEin endloses, zieh- und zoombares Feld aus Fotos, mit Trägheit, am Mauszeiger verankertem Zoom, Tiefendrift und einer Dichte, die sich dem Zoom anpasst.
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
Der Code ist gesperrt
Zoom Field gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.
Bald verfügbar49 € · 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
npx shadcn@latest add @manniche-pro/zoom-fieldclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
ZoomFieldProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
items erforderlich | 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
Tastatur
The field takes focus with Tab. Arrow keys pan, Shift pans further, plus and minus zoom, and 0 resets the view. With controls on, Zoom out, Reset view and Zoom in are 44 pixel buttons.
Screenreader
The field is a group with the role description zoomable image field. The canvas is aria-hidden and a hidden list gives each alt once.
Reduzierte Bewegung
Under reduced motion there is no glide or easing and the field shows a still frame that answers drags and zooms directly. Otherwise the loop pauses while off screen.