Recipe
Lightbox UX
A distraction-free overlay for images, galleries, and media — built with zero dependencies and pure Tailwind CSS.
Overlay Backdrop
Full-viewport fixed backdrop with backdrop-blur and a subtle gradient fade. Click outside or press Escape to dismiss.
Image Scaling
Constrain media with max-w and max-h utilities. Use object-contain to preserve aspect ratio on any viewport size.
Gallery Navigation
Prev/next chevrons positioned absolutely on left and right edges. Touch-friendly hit targets with minimum 44px tap area.
Thumbnail Strip
Optional bottom strip with horizontal scroll. Active thumbnail gets a violet ring indicator for instant orientation.
This pattern ships in Meridian's media viewer. No JavaScript framework required — just CSS transitions and a sprinkle of inline event handling for open/close state.