How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Section: cocoa ground #211714, ivory type #F2E8DA, padding 120px top and 108px bottom, 1440px frame with 48px side padding.
- Grid: 4 columns, 24px row gap, 32px column gap, tiles aspect-ratio: 312 / 262, perspective: 1400px centered. Each tile is a link with its image cropped to cover.
- Brand card: 452px wide, absolutely centered over the grid, 302px from its top (over the middle row). Title in Marcellus 72px, line-height 0.9, letter-spacing -0.025em, uppercase, on two lines; a 427px blurb below; then a "Follow us" link with an Instagram glyph that turns henna #B0603A on hover. 32px between each.
- Dimming: outer columns at 59% opacity, middle columns 43%, and the two tiles directly behind the card 23% (on the 3-column phone grid: the middle column's rows 2 and 3 at 23%, the rest of that column 43%, outer columns 59%). Hovering a tile brings it to full opacity and scales its image to 1.05.
- Progress --gp: 0 to 1 as the brand card's center travels from the bottom of the viewport to its middle, (viewportHeight - cardCenter) / (viewportHeight / 2), clamped. The wall finishes exactly when the card is centered.
- Per tile (column col 1–4, row row 1–3): cx = col - 2.5, cy = row - 2. Delay d = (|cx| + |cy|) / 2.5. t = clamp(0, (gp - d × 0.6) / 0.4, 1), in = 1 - t. Start offsets: x cx × 200px, y cy × 165px, z -760 - |cx| × 280px, rotateX cy × -28deg, rotateY cx × 32deg, rotateZ cx × cy × 9deg. Then transform: translate3d(in×x, in×y, in×z) rotateX(in×rx) rotateY(in×ry) rotateZ(in×rz); opacity: t.
- Card title: letters resolve from opacity: 0; blur(10px) to sharp over 0.8s, 0.035s apart, once 35% of it is visible.
- Newsletter row (104px below): pitch on the left (Marcellus 24px title, a 325px line of text), and on the right a 707px underlined email field: envelope icon, uppercase input with a taupe placeholder, and an arrow submit that nudges 4px right on hover. The 1px ivory rule turns henna while the field has focus or the email is invalid, and a 13px note line under it shows errors or the thank-you message.
- Under 1200px: 2 columns with 16px gaps, the card moves below the grid in normal flow, the title becomes clamp(32px, 8vw, 56px), the newsletter stacks.
- Phones (under 768px): 3 columns with 8px gaps, perspective: 900px, the card sits centered over the grid (max 320px, 28px/16px padding, title 26px). The flight is recomputed for 3 columns and 4 rows so tiles still fly from the right directions: cx = col - 2, cy = row - 2.5, x cx × 70, y cy × 60, z -420 - |cx| × 120, rotateX cy × -20deg, rotateY cx × 26deg, rotateZ cx × cy × 6deg.
- Fallbacks: tiles default to landed (--gp: 1), so without JavaScript the wall is simply shown. Reduced motion: no flight and no blur.