Lightbox Blueprint
A static open-state lightbox layout showing a centered large image with prev/next controls, a frame counter, caption, and thumbnail strip over a dark scrim.
A static open-state lightbox layout showing a centered large image with prev/next controls, a frame counter, caption, and thumbnail strip over a dark scrim.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Lightbox Blueprint renders the open state of a photo viewer as a static layout: a dark scrim at 90% opacity, a large centered image (aspect-4/3) for frame 3 of 24, prev/next chevron buttons flanking the image, a caption reading “Temple gate in autumn fog” with the Kyoto location and date, a close button top-right, and a six-thumbnail strip below with the active frame ringed.
The block uses no Radix portal or Dialog primitive. The scrim and centered card are plain divs, so the layout renders correctly inside the preview iframe without escaping the preview root.
Reach for this block when a design page or pattern library needs to show what the lightbox looks like open, without wiring up state. The installer replaces the thumbnail count, the caption text, and the frame counter with their own series data.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the static design specification for a gallery viewer. Other blueprint uses:
Tip: the frame counter and thumbnail strip are the details that make a static blueprint read as real; keep both.