Vantage
A full-viewport city photograph rendered through its own depth map, so the pylon, deck and skyline slide against each other as a real moving image — no video file. Arrows browse the Rotterdam/Delft backgrounds without leaving the page. Every photograph is licensed from Wikimedia Commons and names its photographer in the hero as you browse.
Side by side
V1–V10 and V14 each passed three independent critique-and-improve rounds by a fresh-context "art director" agent (logs in each guide), stay under 1 MB per visited page, remain keyboard-navigable and WCAG AA, and work without JavaScript. V11 Lumen scores a clean 100 / 100 / 100 / 100 on Lighthouse. V12 Atlas remains a newer creative test without a recorded Lighthouse or three-round critique result. V14 holds Accessibility, Best Practices, and SEO at 100; local cold-launch Performance varied from 77 to 100, so the range is shown instead of a cherry-picked run. V2, V7, and V11 have also been through a live-review client feedback round (Team Leader terminology, dedicated Mission/Students pages, and navigation that distinguishes scroll anchors from own-page links); V14 and V15 carry those requirements from their first draft. V15 Vantage originally shipped AI-generated imagery; after board feedback it was rebuilt on licensed Wikimedia Commons photography, credited per frame in the hero and per image in its guide. Its three critique rounds were run as scripted browser audits, including a check that samples the real pixels behind the hero copy on every background — the worst contrast in the pool is 4.55:1.
| Nº | Variant | Design thesis in one line | Imagery | JS | Motion | Weight | Perf / A11y |
|---|---|---|---|---|---|---|---|
| V1 | Blueprint | The site as an engineer's drawing of itself | inline SVG only | optional garnish | lines get drawn | 83 KB | 100 / 100 |
| V2 | Port of Rotterdam | Heavy industry for good — containers, manifests, cranes | real port photos | optional | containers craned in | 230 KB | 100 / 96 |
| V3 | De Stijl | Mondrian composition, 180-green as the fourth primary | none | optional | one 180° turn | 146 KB | 100 / 100 |
| V4 | The Terminal | The AI-native branch, its pipeline live on screen | none | optional | cursor, dataflow | 165 KB | 100 / 100 |
| V5 | Soft Impact | Warm and human, photography through a 180° arch | warm-graded photos | optional + failsafe | gentle staggered bloom | 147 KB | 98 / 100 |
| V6 | The Deck | The website is a board-ready deck — judge the product | none | arrow-key slides | none, by conviction | 140 KB | 99 / 95 |
| V7 | Polder | Dutch landscape strata; the page ends below sea level | inline SVG only | none | the pump turns, water drifts | 219 KB | 96 / 100 |
| V8 | De Courant | A broadsheet whose colophon is our honesty rulebook | none | none | none — newsprint | 233 KB | 97 / 100 |
| V9 | Pamflet | Protest brutalism: enormous type, one green, all true | none | none | none — paper | 89 KB | 100 / 100 |
| V10 | The Ledger | Every claim shows its evidence; the rest is struck through | none | hover evidence links | none — ledgers don't move | 126 KB | 95 / 95 |
| V11 | Lumen | Clean university-consultancy clarity; one green accent on white | 180DC logo only | carousel + reveals | service carousel, gentle scroll reveals | 86 KB | 100 / 100 |
| V12 | Atlas | The branch as one lit node in 180DC's worldwide network | none — inline SVG only | reveals + node pulse | home-node pulse, one travelling connection dot | — | not yet run |
| V13 | Aperture | The city seen through the headline, not behind it | credited Pexels photography | reveals only | scroll reveals; static when requested | 471 KB Home | not yet run |
| V14 | Confluence | Rotterdam first, Delft next; city context beside the message | 4 credited route films + posters | source-on-view playback | one-shot films; static when requested | 552 KB Home | 77–100 / 100 |
| V15 | Vantage | The city fills the frame; the visitor chooses which one | 4 credited Commons photographs + depth maps | WebGL depth hero + cycling | depth separation on scroll; still at rest | — | 91–100 / 100 |
Scores are Lighthouse desktop runs against the deployed pages unless noted (V6–V10 latest local runs; refreshed after final critique rounds). V11 Lumen's Lighthouse (desktop) is Performance 100, Accessibility 100, Best-Practices 100, SEO 100. V12 Atlas has not been deployed or measured yet. V14 Confluence reports the observed final local cold-launch Performance range and a stable Accessibility 100; warm sequential runs reached 100 / 100 / 100 / 100. Weight = measured homepage transfer size.