Gallery Lightbox Open
The pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Gallery Lightbox Open
*
* The thumbnail you pressed is the thing that flies: one frame leaves
* the grid, crosses the panel and becomes the large view, while theAbout this pattern
A photo viewer where the picture never gets replaced, only moved. The frame the reader pressed leaves its cell, crosses the panel and becomes the large view, so there is never a question of which of six items is now on screen — and closing sends the same frame back to the cell it came from. Two details carry it. The cell keeps an outline while its frame is away, because exactly one element may hold a given shared id at a time and doubling it is what makes these transitions jump. And the caption stays outside the flight entirely: anything travelling inside a layout animation is rescaled by it, so the text waits for the frame to land and then fades in at its own fixed size. The backdrop dims during the crossing rather than before it, which is what makes the grid feel put away rather than covered up.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Photo gallery
Tapping a thumbnail grows that same image into the full-screen viewer.
Related patterns
- Expandable Detail CardA compact card that expands in place into a detail view — image and title travel continuously.
- Modal Scale InA dialog grows the last few percent into place behind a darkening scrim, and leaves the same way.
- Bottom Sheet PresentA sheet rises from the bottom edge over a dimming backdrop and settles once.