Lightbox Zoom

Create a lightbox zoom gallery. Clicking a thumbnail expands it from its exact place in the grid to a large centered view, as one continuous movement (a shared element transition), over a dimmed backdrop. Closing shrinks it back into its slot. Implementation with Framer Motion: give the thumbnail and the enlarged view the same layoutId (e.g. image-3); mounting the large version animates the element between the two layouts automatically with a spring (stiffness ~380, damping ~34). Vanilla alternative: FLIP - measure the thumbnail's rect and the target rect, apply the inverted transform, then release it. Behavior: backdrop (rgba black ~60%) fades in 200ms and closes on click; Escape closes; a small close button sits on the image; the page behind must not scroll while open. Preserve the image's aspect ratio in both states (object-fit: cover). Accessibility: the enlarged view is role='dialog' with a descriptive aria-label, focus moves to it on open and back to the thumbnail on close. Under prefers-reduced-motion, use a plain fade between states instead of the zoom. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.