---
id: "2115893155677831281"
source: https://x.com/PixelJanitor/status/2115893155677831281
author: "Derek Briggs (@PixelJanitor)"
media: "video, 2560x1440, 33.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Sneaker Gallery With 3D Lightbox

## Summary
A product detail page for a sneaker where the image gallery has a vertical thumbnail rail and arrow buttons, and clicking the image opens a dark full-screen lightbox in which neighbouring photos sit angled in perspective like a coverflow, with a horizontal thumbnail strip below. It is a polished study of how one gallery can feel calm in the page and immersive in focus mode.

## Style
- Theme: mixed (light product page, dark lightbox)
- Mood: polished, tactile, focused, premium, smooth
- Tags: ecommerce, product-gallery, lightbox, coverflow, thumbnail-strip, carousel, perspective
- Category: Components, Features

## Palette
| Role | Hex |
|---|---|
| Lightbox backdrop | #1A1A1A |
| Page | #FBF9F9 |
| Image card | #EDECED |
| Peek card | #3C3A3A |
| Near black | #0B0C11 |
| Muted mauve | #8A6D80 |
| Soft lilac | #BEB1BF |
| CTA violet | #5B12F5 |

## Typography
- The product info column (brand, name, price, Color, Size, Quantity labels) is deliberately blurred in the recording; it reads as a small sans stack: name semibold at about 2.5% of frame height, price bold slightly larger, labels 11px grey. Inter (600 and 400).
- CTA label: white sans medium, small, centred. Inter (500).
- No other visible type; the lightbox is image only.

## Layout
- 16:9 canvas (2560x1440).
- Page view: three columns. A 40px wide thumbnail rail at left (7 square thumbs, 8px gap), a main image card about 380x380px at roughly 30% of the width with 12px radius and a soft 0 8px 24px rgba(0,0,0,0.08) shadow, and an info column to the right with a full-width violet pill CTA (about 300x36px) at its bottom.
- Lightbox: centred image card about 45% of the width, 4:5 to square, 12px radius; previous and next cards peek at the left and right edges, rotated about 35deg around Y and dimmed to 40%.
- Thumbnail strip: centred bottom row of 10 square thumbs about 32px with 6px gaps; the active one gets a 2px white ring and slight lift.

## Elements
- Thumbnail rail: square thumbs on white, active one framed with a 1px dark border and 8px radius.
- Main image card: light grey #EDECED backdrop for studio shots, full-bleed for lifestyle shots; 28px circular translucent prev and next buttons with chevrons sit inside the left and right edges.
- Product photos: side view on grey, a seated person with khaki trousers stepping out of a car, a shoe on a red leather car seat, a top-down view on white.
- Info column: brand dot, name, price, black colour swatch, size grid of small pills, quantity stepper, violet pill CTA.
- Lightbox: dark backdrop, coverflow side cards, bottom thumbnail strip, custom small cursor.

## Motion
- 0 to 14s: clicking next swaps the main image with a 250ms crossfade and a 4px slide; arrows fade in on hover over 150ms.
- About 16s: clicking the image morphs the card into the lightbox; the page fades to #1A1A1A over about 400ms while the card scales up with a spring (stiffness 260, damping 30).
- 19 to 32s: each step rotates the coverflow, the centre card sliding out to the side while the next one rotates from 35deg to 0deg and scales from 0.85 to 1 in about 500ms ease-out; the active thumbnail ring moves with it.
- The loop returns from the white top-down shot back toward the start.

## Rebuild it
1. Page grid: `grid grid-cols-[48px_1fr_1fr] gap-8 max-w-5xl mx-auto` with the rail as a `flex flex-col gap-2` of 40px buttons.
2. Main card: `relative aspect-square rounded-xl bg-[#EDECED] shadow-lg overflow-hidden` with an `AnimatePresence` image swap keyed on index (opacity and x 8px).
3. Shared element: give the main image and the lightbox centre image the same Motion `layoutId` so opening the lightbox animates position and size.
4. Lightbox: fixed `inset-0 bg-[#1A1A1A]` with `perspective: 1200px`; render prev, current and next cards and animate `rotateY` (35, 0, -35), `x` and `scale` per offset from the active index with a spring.
5. Thumbnail strip: `flex gap-1.5` of 32px buttons; animate a `layoutId` ring div behind the active one.
6. Keyboard: arrow keys change index, Escape closes; use the CTA `bg-[#5B12F5] rounded-full h-9` in the page view.

## Generation prompt
A screen recording of a modern e-commerce product page for a black suede sneaker with a gum sole: a vertical thumbnail rail, a soft grey rounded image card with circular arrows and a bright violet pill button, then the image expands into a dark full-screen lightbox where side photos tilt in 3D like a coverflow and a thumbnail strip runs along the bottom; lifestyle shots of a person in khaki trousers stepping out of a vintage car, smooth spring transitions, no logos.