Loading…
Live block · try it
Premiumgallery · dark · dialog · keyboard · swipe · flip
Masonry Photo Gallery with Lightbox
A landscape photographer's portfolio as a quiet masonry wall; open any frame and it grows from its own spot into a full-screen lightbox with title, credit and position, then arrows, keys or a swipe walk through the set and closing shrinks it back into the wall.
Placeholder photos by Adam Jang, 35MM North, Emma Francis, Luca Micheli, Tom Sutter, Joshua Sortino, Shadman Sakib, Zetong Li, Andrew Svk and Dan Meyers on Unsplash. Replace them with your own before launch.
The mechanic
The lightbox is spatially honest: open and close both animate between the exact thumbnail rect and the full image rect, even after you have stepped to another photo, so you always land back on the frame you ended on.
How to use it
From prompt to a block in your page.
- 01Try the block
The preview is the shipped block inside a neutral demo page. Scroll, hover, drag: everything is live.
- 02Pick a palette
Token sets re-tint the block live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the block's markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Drop it into your page
Add the head lines it names, paste the block, replace the placeholder copy. Tokens live on :root.
