Lightbox Grid

Accessibility

• The viewer is a dialog that traps focus and starts on Close.
• Closing returns focus to the photo that opened it.
• The caption is announced as you page.
• Each tile and thumbnail is a button named by its photo.

Motion

• The photo moves from its tile to the viewer with a 350 ms spring, as a transform only.
• The rest of the viewer fades in over 150 ms.
• Dismiss shrinks to 90% and fades to 60%, then returns to the tile, 300 ms in all.
• On touch screens, swipe down past 80 px to close.
• With reduced motion, the viewer swaps in place.

Responsive behavior

• 576 px on Web with a 337 px viewer.
• 358 px on Mobile with a 261 px viewer.
• The card is taller while the viewer is open, 491 px on Web and 423 px on Mobile.

Performance

• The viewer mounts only while it is open. The grid is removed from the DOM meanwhile.
• Opening and closing use transforms on the frame only, measured once from the tile.
• Swipe to close runs only on coarse pointers, checked once on mount.

• Import LightboxGrid from @/components/fetaui/lightbox-grid. Without photos it shows six stand-ins.
• Each photo needs alt, caption and meta, and caption must be unique. src is the image, and art picks a stand-in.
• Images use a plain img tag with no lazy loading, so pass sized files.
• The viewer is a dialog inside the card, not a page overlay. Focus returns to the tile on close. Composes Card and Icon Button.