feat: sculpt portfolio into an immersive midnight expressway
Author physical road furniture, layered terrain and atmosphere, projected illuminated route signs, and detailed Blender coachwork. Refine camera mass, wheel contact, chapter composition, and compact reading space while preserving approved content and audio contracts. Include isolated Blender source, before/after and hardware Chrome motion evidence, preservation hashes, validated preview checks, and documented inherited unit failures.
This commit is contained in:
21
docs/reviews/evidence/midnight-expressway/index.html
Normal file
21
docs/reviews/evidence/midnight-expressway/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Midnight expressway — visual review</title>
|
||||
<style>
|
||||
:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#070d15;color:#e6edf2}*{box-sizing:border-box}body{margin:0}header,main,footer{width:min(1280px,calc(100% - 48px));margin:auto}header{padding:64px 0 40px;border-bottom:1px solid #29404d}p{color:#aebdc7;line-height:1.65;max-width:780px}h1{font-weight:500;font-size:clamp(40px,6vw,76px);letter-spacing:-.06em;line-height:1;margin:18px 0 28px}h2{font-size:30px;font-weight:500;letter-spacing:-.03em;margin:0 0 12px}h3{font-weight:500}.eyebrow,figcaption,label{font-size:12px;letter-spacing:.09em;color:#a8cbd0}.eyebrow{text-transform:uppercase}a{color:#a3e1e4;text-underline-offset:5px}a:focus-visible,input:focus-visible,video:focus-visible{outline:2px solid #f39378;outline-offset:6px}.actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:26px}.actions a{padding:12px 18px;border:1px solid #42616c;text-decoration:none}section{padding:54px 0;border-bottom:1px solid #243744}.compare{position:relative;overflow:hidden;border:1px solid #36505d;margin-top:24px;background:#0c111a;--cut:50%}.compare img{width:100%;display:block}.compare .old{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--cut)) 0 0)}.compare::after{content:'';position:absolute;top:0;bottom:0;left:var(--cut);width:2px;background:#bfe8e8}.badge{position:absolute;z-index:1;top:12px;background:#060b12df;padding:7px 10px;font-size:11px;letter-spacing:.13em}.before{left:12px}.after{right:12px}.slider{display:flex;align-items:center;gap:18px;margin-top:16px}input[type=range]{flex:1;accent-color:#9ad8dd}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.grid img,video,.wide{width:100%;display:block;border:1px solid #2b424e}figure{margin:0}figcaption{line-height:1.7;margin-top:12px;letter-spacing:.02em}.phones{max-width:760px;margin:30px auto 0}.phones img{max-width:390px;margin:auto}.note{padding:20px 24px;border-left:2px solid #f0957c;background:#0e1923}footer{padding:36px 0 56px;font-size:13px}@media(max-width:650px){header,main,footer{width:calc(100% - 28px)}header{padding-top:36px}.grid{grid-template-columns:1fr}.phones{grid-template-columns:1fr 1fr;gap:12px}section{padding:38px 0}.badge{font-size:9px;padding:5px}.actions{gap:12px}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header><div class="eyebrow">Portfolio / September 2026 / Local visual review</div><h1>Midnight<br>expressway.</h1><p>A more physical road, coachbuilt silver bodywork, illuminated route signs, and a layered coral horizon. The approved portfolio content and adaptive soundtrack remain intact.</p><div class="actions"><a href="http://localhost:41821" target="_blank" rel="noopener">Open the live portfolio ↗</a><a href="#motion">Watch the journey ↓</a></div></header>
|
||||
<main>
|
||||
<section><div class="eyebrow">01 / The opening</div><h2>The same identity, a deeper world.</h2><p>Drag the divider to compare the merged baseline with this implementation. These are actual browser captures; moving objects naturally occupy different positions.</p><div class="compare" id="opening"><img src="after-desktop.png" alt="New expressway opening with detailed road, silver car, opaque cyan terrain and separated coral sun bands"><img class="old" src="before-desktop.png" alt="Approved previous opening"><span class="badge before">BEFORE</span><span class="badge after">AFTER</span></div><div class="slider"><label for="opening-range">COMPARE</label><input id="opening-range" type="range" min="0" max="100" value="50" aria-label="Opening before and after divider" oninput="document.getElementById('opening').style.setProperty('--cut',this.value+'%')"></div></section>
|
||||
<section id="motion"><div class="eyebrow">02 / Motion study</div><h2>Travel, settle, arrive.</h2><p>Actual hardware-backed Chrome capture: forward acceleration, coasting, reverse document scrolling, and navigation to Infrastructure, Selected builds, and Contact. Silent recording with the High maximum-quality preference and normal adaptive behavior.</p><video controls playsinline preload="metadata" poster="after-desktop.png" src="journey-motion.mp4"></video></section>
|
||||
<section><div class="eyebrow">03 / Route objects</div><h2>Signs with their own space.</h2><div class="grid"><figure><img loading="lazy" src="before-infrastructure.png" alt="Infrastructure in the approved baseline"><figcaption>Before — merged version.</figcaption></figure><figure><img loading="lazy" src="after-infrastructure.png" alt="New beveled Infrastructure sign clearly above its reading surface"><figcaption>After — beveled housing, luminous edges, inset label, and a reserved approach corridor.</figcaption></figure></div><div class="grid phones"><figure><img loading="lazy" src="after-phone-sign.png" alt="Infrastructure sign and reading surface on phone"><figcaption>Phone sign arrival. The canvas retains its original stacking order.</figcaption></figure><figure><img loading="lazy" src="narrow-infrastructure.png" alt="Infrastructure reading layout at 320 pixels wide"><figcaption>320 px reading layout after the sign has departed.</figcaption></figure></div></section>
|
||||
<section><div class="eyebrow">04 / Coachwork</div><h2>A more memorable grand tourer.</h2><img loading="lazy" class="wide" src="blender-coachwork.png" alt="Blender render showing articulated rear lamps, machined wheels, side channels and refined wing"><p>Editable Blender source retains the individual parts and look-development setup. The runtime export batches materials and preserves four independently rotating wheels.</p></section>
|
||||
<section><div class="eyebrow">05 / Small screens</div><h2>The night drive travels with you.</h2><div class="grid phones"><figure><img loading="lazy" src="before-phone.png" alt="Previous phone introduction"><figcaption>Before.</figcaption></figure><figure><img loading="lazy" src="after-phone.png" alt="New phone introduction"><figcaption>After.</figcaption></figure></div></section>
|
||||
<section><div class="eyebrow">06 / Evidence and arrival</div><h2>The work stays central.</h2><div class="grid"><figure><img loading="lazy" src="after-builds.png" alt="Selected builds with approved real medication tracker media"><figcaption>Unchanged project evidence, staged within the continuous world.</figcaption></figure><figure><img loading="lazy" src="after-contact.png" alt="Warm Contact arrival"><figcaption>Contact resolves into a warmer horizon and slower camera recovery.</figcaption></figure></div></section>
|
||||
<section><h2>Verified, with clear limits.</h2><p>Approved wording, links, metadata, section order, and all 15 approved media/audio files match the baseline. Asset validation, typecheck, client/SSR build, prerender, artifact verification, and transfer checks pass. Static and reduced-motion views retain the full content.</p><p class="note">Host Chrome uses the Intel hardware GPU: desktop samples averaged 63–65 fps across opening, reading, and native scrolling at 1440×900, with p95 frame time 20.9 ms. Physical phones and high-DPI displays remain unverified. The untouched baseline already had nine failing unit assertions; tests were preserved. Ready for visual review.</p><div class="actions"><a href="chrome-hardware-performance.json">Hardware performance</a><a href="content-preservation.json">Content comparison</a><a href="media-audio-preservation.json">Media and audio hashes</a><a href="baseline-checks.log">Baseline check log</a></div></section>
|
||||
</main><footer>Local review artifact · codex/midnight-expressway · Based on c9ac36e · No deployment</footer>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user