Trivane.

Layout

• One unit governs everything: --pitch: round(max(74px, 10.4vh), 2px), an EVEN pitch, so a vertically centred board of seven bays lands on whole pixels and every hairline stays crisp. The board is the left 34vw, vertically centred, holding seven full-width rows of exactly one pitch each (518px of a 720 frame, 784px of a 1080 one). The content plate is the rest, from 37.6vw to 95.5vw, vertically centred, max-width 64rem. A 1px rgba(236,227,212,.13) seam runs the full viewport height between them at 35.9vw. Ground is #16130f; nothing blurs, nothing is rounded beyond 4, there are no shadows and no gradients.
• Each row is a triangular prism seen edge-on, hinged on the horizontal axis. Markup per row: li.row > button.hit[data-goto] + span.prism > three span.face. The row is the fixed chassis: height:--pitch, overflow:hidden, and a 1px rgba(236,227,212,.13) border-top, the pitch rule belongs to the bay, never to the turning face, so it cannot be displaced or clipped by the perspective (.rows > :last-child closes the board with a border-bottom). The row also carries perspective:1400px with perspective-origin: 32% calc(50% + (3 - var(--pk)) * 100%), --pk is the row index, so all seven share ONE vanishing point at the board's centre. The prism is transform-style:preserve-3d with transform: translateZ(calc(var(--r) * -1)) rotateX(calc(var(--st) * -120deg)): seating the axis one apothem BEHIND the screen puts the presenting face at z:0, exactly 1:1 with its bay at every row and every width, and only the turning faces travel in depth. Faces are position:absolute; inset:0; backface-visibility:hidden; background:#16130f at rotateX(0deg | 120deg | 240deg) translateZ(var(--r)), where --r is the apothem round(--pitch / 3.4641, 1px).
• The three faces carry DIFFERENT authored text, not three colours. AHEAD (.f0): the two-digit numeral in Chivo Mono at max(11px,.84vw)/500 in color-mix(in oklab, #8d857a 55%, #ece3d4), then the title at max(13px,1.32vw)/400 in color-mix(in oklab, #8d857a 70%, #ece3d4). NOW (.f1): the title alone at clamp(1.75rem,3.2vw,3.45rem)/700/-.03em in #ece3d4 over a 2.4rem x 2px #bf3b2b rule, the largest object on screen on six of seven slides; this face alone has NO background, so the lit bay reads through it. DONE (.f2): a 10px x 1px tooth plus the title at max(14px,1.5vw)/400 in color-mix(in oklab, #bf3b2b 52%, #ece3d4).
• Depth is an opacity ladder, not blur: .row opacity: calc(1 - min(var(--rd),6) * .037), so the far rows sit at .778. Every face ink is picked so that the ladder still clears 4.5:1 against the ground at its dimmest: the DONE title measures 4.87:1 at --rd 6, the AHEAD numeral 5.54:1, the AHEAD title 4.80:1. Behind the rows a .beam, one bay of color-mix(in oklab, #ece3d4 5%, transparent), translates to translateY(calc(var(--i) * var(--pitch))) over 900ms.
• Right of the rows, a rack at right:1.4vw, z-index above the prisms: a 1px rgba(236,227,212,.13) spine inset half a pitch top and bottom, seven 9px notch ticks at calc((--nk + .5) * --pitch), an #bf3b2b fill at scaleY(var(--progress)) / transform-origin:top over 900ms, and a pawl (a 16px x 1px bar with a 7px rotated square) at translateY(calc(var(--i) * var(--pitch))).
• Chrome. top-left a 7px accent square, "Manifest" and the counter in Chivo Mono 11px / .18em uppercase; bottom-left a three-mark key (a tooth for Done, a 2px accent rule for Now, a two-digit NUMERAL for Ahead, each mark is the thing that actually marks that row), readable on screen and exposed to assistive tech behind a visually-hidden "Board key:"; bottom-right a one-line hint that fades after slide 1. The plate carries NO heading, the title exists only on the board.

Signature motion

• Only the rows whose state actually changed rotate. On deck:change, per row k: --st = k>i ? 0 : k===i ? 1 : 2 and --rd = |k - i|. A row whose --st is unchanged fires no transition. Each turn is one flat 820ms 120deg rotateX on cubic-bezier(.65,0,.25,1) with transition-delay: calc(min(var(--rd),6) * 70ms), so the cascade ripples outward from the new active line and a jump of five reads as five clicks. No bounce, no overshoot, never a spin, a DONE→AHEAD row turns 240deg because it crossed two states, and that is the only turn larger than 120deg. The bay rules do not move while this happens: the chassis is still, the mechanism turns inside it.
• In the same beat. the rack fill scales, the pawl slides to its notch and seats with a 3px recoil (@keyframes seat 0%,84% translateY(0) / 91% translateY(var(--recoil)) / 100% translateY(0), 900ms, the recoil sign flipped for backwards moves, restarted by removing .run, forcing offsetWidth, re-adding), the lit bay travels, and the plate steps exactly one pitch: .slide { transform: translateY(calc(var(--d) * var(--pitch))); opacity: 0; transition: transform 900ms cubic-bezier(.22,1,.36,1) 260ms, opacity 520ms ease 260ms } with the active slide at transform:none/opacity:1 and outgoing slides cut to 300ms with no delay. body data-reveal-delay="900" data-animate-delay="900" so objects land after the board has finished indexing.
• Nothing animates on the opening frame: every format transition is transition:none until html.live is added one task after the first deck:change, so the deck opens already set.

Slide 7, designed differently

• Every row is on its DONE face in one cascade with row 7 alone holding NOW, and then the machine steps aside for real: the board translates -8vw, taking the bays, the eight rules, the lit beam, the rack and the pawl with it, while the face contents are held in place by an equal and opposite --fx of 8vw (.face > * { transform: translateX(var(--fx,0px)); transition: transform 900ms var(--travel) }). The chassis withdraws, the finished manifest stays exactly where it has sat all deck, fully legible, no dimming, because seven titles you can still read ARE the completed manifest. The seam and the active slide then stride -6vw into the ground the machine gave up. The close's bullets run at clamp(1.72rem,3.35vw,3.6rem), the only slide where the content, not the board, owns the largest type, each marked by a 1.7rem x 2px accent tooth borrowed from the rack. Above 1600px the plate's body type steps up (lede 1.5rem, headings 1.32rem, body 1.08rem, slide gap 2rem) so it does not read as a postage stamp beside a 784px board.
• Under 760px the board becomes a full-width strip at the top at --pitch max(40px,5vh), the seam is removed, --bx and --fx are both reset to 0, the plate flows beneath it and the page scrolls. Under prefers-reduced-motion components.css zeroes every duration so each prism snaps to its face: nothing is hidden, only the travel is gone.

Navigation. ↓ → Space PageDown next, ↑ ← PageUp prev, Home/End, 1–9 jump, wheel/trackpad one slide per gesture, touch swipe. Every row is a real button covering its bay, named "04 How we work, done" so its face is spoken as well as drawn; :focus-visible draws a 2px #bf3b2b outline inset 4px.