Proof that a huge display headline and a HUD-style corner frame can make a scroll documentary feel like mission telemetry instead of a slideshow.
Captures
Principles
Frame the full viewport with thin open corner brackets, viewfinder style, instead of a solid border, so the page reads as an instrument or a transmission rather than a document.
Evidence
Four L-shaped brackets in warm brass against black sit at each screen corner on the hero.
Transferable
Works for anything that wants to feel like an instrument, viewport, or broadcast: space, exploration, surveillance, camera apps. Breaks for anything warm or handmade. A HUD frame around a family recipe app would read as satire.
Pair the display headline with two small monospace-style label pairs flanking it like a data readout, not a caption: a field name in caps, the value directly beneath.
Evidence
"MISSION / Apollo 11" sits bottom-left and "YEAR / 1969" bottom-right, small caps, letter-spaced, framed by thin rule lines above and below the headline.
Transferable
Works whenever the content has real factual metadata to display: a mission, a date, a spec. Breaks the moment the values are invented or vague. It reads as cosplay, not as instrumentation.
Run one enormous, near-viewport-width headline through a top-to-bottom white-to-black gradient so it reads as brushed metal rather than flat ink, and use it exactly once.
Evidence
"MOON" is set at a measured 300px, filled light to dark, matching the tone of the lunar surface rendered directly beneath it.
Transferable
Works as a single hero moment where the type itself is the visual. Breaks if repeated per section. It only reads as an event because it does not recur.
Anti-patterns (on this site specifically)
- "BEST EXPERIENCED WITH SOUND" is set in tiny gray caps with only a 16px speaker icon as the actual control. An audio-forward experience should make the sound toggle far more prominent than a corner icon most visitors will scroll past unseen.
Rationale
This is one of the rare captures where the WebGL-adjacent hero actually rendered under headless software rendering (the composited lunar-surface image and type, not a live interactive scene), unlike a real-time 3D render attempted for a different reference this session, which never painted.
The measured type stack is eclectic on purpose: Times New Roman, Arial, FuturaStd, and AkkuratMonoLL all appear, pulling from different document eras (a serif for gravity, a geometric grotesk for the display moment, a monospace for instrument-style labels). That mix reads as an archive assembled from several sources rather than a single brand voice, which fits a documentary about a 57-year-old mission being reconstructed today.
Restraint trade-off: the metallic gradient headline works specifically because it appears once. The same treatment used per scroll-section would stop reading as a unique event and start reading as a template.
No tokens.json for this reference.
Applied in
Not borrowed from yet.