Gate.

Layout

• A projection-black room (#0e1013) with one lit rectangle in it. Four opaque fixed mattes, top and bottom 50vh, left and right 50vw, translate inward to frame a gate centred on the viewport. The mattes ARE the ground (#0e1013) so every token keeps its designed contrast on them in any theme; the gate is the ground lifted one step toward the ink, color-mix(in oklab, #0e1013 96.5%, #e7e9ec), the lit rectangle in a dark room. Nothing else is on screen.
• EVERY SLIDE AUTHORS ITS OWN ASPECT RATIO as data: <section class="slide" style="--sar:1.375">. Cover and timeline 2.39, cards 1.85, rings-plus-stats 1.375 (Academy, the tallest gate), before/after 1.78, quotes 1.00 (a square insert). The gate is --gh: min(78vh, 92vw / --ar, 880px) tall and --gh * --ar wide, so at 1280x720 it is 1178x493 at 2.39 and 772x562 at Academy. Resting mattes are pure transform: .m-t translateY(--gh / -2), .m-b translateY(--gh / 2), .m-l translateX(--gw / -2), .m-r translateX(--gw / 2).
• Each slide is absolutely positioned at 50%/50% and sized to ITS OWN ratio, not to the live one, so nothing ever reflows when the frame changes, only the mattes travel. Interior padding clamp(20px,2.6vw,40px), content vertically centred, no slide carries an in-frame heading. Objects are measured from the gate they were given rather than from the viewport, .lede clamp(1.05rem, --sgh * .034, 1.65rem), rings --size clamp(7rem, --sgh * .32, 15rem), stat values clamp(2.2rem, --sgh * .112, 6rem), cards min-height clamp(8rem, --sgh * .3, 22rem) with h3 at clamp(1rem, --sgh * .032, 1.7rem), timeline step type clamp(1.05rem, --sgh * .034, 1.6rem), and the square's one quote card min-height --sgh * .5 with its blockquote at clamp(1.35rem, --sgh * .062, 3rem), so a tall frame is inhabited, not padded.
• SIGNATURE MOTION, 1150ms: on every change all four mattes run keyframes with animation-timing-function linear. 0 to 38% they drive inward on cubic-bezier(.65,0,.25,1) until the gate is a 12%-high slit pinched to 68% width (an anamorphic squeeze); 38 to 42% the geometry crosses from the outgoing --gh0/--gw0 to the incoming --gh/--gw, invisible inside the slit; 42 to 100% they open on cubic-bezier(.22,1,.36,1) to the NEW slide's shape. The outgoing slide leaves in 340ms to scale(1.06) and is gone before the slit lands; the incoming one arrives from scale(.945) and blur(7px) over 900ms on a 460ms delay, so it follows the frame rather than riding it.
• THE FRAME RULES ARE THE GATE. All four 1px rgba(231,233,236,.13) hairlines are clipped to the picture's own edges, clip-path: inset(0 max(0px,(100vw - --gw)/2)) on the top rule and the seam, inset(max(0px,(100vh - --gh)/2) 0) on the two side rules, and they run the same 1150ms keyframes, closing to 68% width and 12% height with the mattes. Nothing ever overhangs the picture: at the 710x72 slit the four rules ARE the slit.
• GHOST BAND. all seven titles live as one persistent row of clamp(6rem,20vw,21rem) / 700 / -.045em type at wdth 84, opacity .115, each buried to 48% of --gh below the gate's lower edge and sliced left and right by the side mattes, so a narrower gate literally shows you less of the word. On change the whole row travels 175vw per slide on the travel curve with filter blur up to 12px; it is at its dimmest while the gate is shut, so what the closure hides is the cut itself.
• THE TITLE PLATE. the picture holds only the exhibit, so the readable title lives on the top matte beside the shot number, clamp(1.05rem,1.85vw,1.8rem) / 700 / -.02em in #e7e9ec at wdth 92, on one chrome row at top:14px with the index in #29b6cf and the live ratio readout ("1.375 : 1") right-aligned. The title therefore has both lives: legible on the matte, 20vw and cropped behind the picture.
• SHOT STRIP. seven <button data-goto> slates fixed to the viewport bottom (never moves while the frame reshapes), each a two-digit tabular number, a 17px-wide rectangle drawn at THAT slide's aspect ratio, and the full title at clamp(.72rem,.68vw,.92rem) over a 1px top rule. Future #858b93, done color-mix(in oklab, #29b6cf 58%, #858b93), active full #29b6cf plus two 7px accent corner brackets scaling 0 to 1 over .5s. A 1px seam rides the gate's lower edge, exactly as wide as the picture, carrying an accent fill clipped to --progress * --gw over 1s. The strip is the FIRST element in the body and every off-screen slide carries inert, so the first Tab lands on slate 01.
• CLOSING SLIDE. --gh is forced to 104vh and --gw to 104vw, so all four mattes run the same keyframes and travel completely off-screen, the frame is removed. The ghost band un-buries and lifts to opacity .2 behind bullets at clamp(1.3rem,2.3vw,2.4rem), the strip drifts down 10px, every slate resolves to done-accent, and the seam leaves with the matte it sat on.
• Set body data-reveal-delay="950" data-animate-delay="950" so objects land after the gate has finished opening. Under 760px the gate turns portrait (--ar clamps to .54-.60) at --cap 84 so the top matte still clears the title plate, the strip becomes a seven-tick ruler, and the side mattes leave the screen.

Navigation. arrows / Space / PageUp / PageDown / Home / End / 1-9; wheel and trackpad move one slide per gesture; every slate in the strip is clickable and jumps.