Type
Space Grotesk · display: course names, year title, big numerals, tight tracking
IBM Plex Mono · telemetry: microlabels, chips, meters, months, all uppercase
Curriculum design lab · the decision document
THE GUIDE
Six directions for the page students live on all year. Every one carries the same full payload, snapshotted from the app's own lib/queries selectors on the frozen demo clock (Wed 18 Nov 2026): year tabs Y1/Y2/Y3, the 38-week calendar, the instructor-days meter (one unit per course day, N left of M), semesters with ranges and % progress, the NOW marker, and every course block with real cover art, TYPE, status, instructor, blurb, skills, day-by-day progress, dates and the winter break. Judge presentation; the information is constant.
How this lab was built and checked
Build: five agents built the five directions in parallel, each committed to one metaphor, each required to run three full self-iteration passes (fresh screenshots desktop + mobile + alternate years, at least 8 concrete flaws found and fixed per pass, zero console errors as a gate) before declaring done. Real assets only: the app's art set plus the thirteen ArtStation instructor covers, re-downloaded at high resolution.
Check: an independent fresh-eyes critique then audited each page against the payload contract item by item. The critique of 05 completed and scored it before the account's monthly spend limit cut the remaining critique and refinement agents off mid-run; the full audit of 01 to 04, the application of 05's critique fixes, and direction 06 were then done directly in the main session, with every fix re-verified in a real browser at 1440 and 390.
06 Master Copy is the synthesis built from that audit, and the candidate under review.
The school year as one orbit: scroll flies the camera through 38 week-stations while mission dossiers dock beside the viewport. NOW is a lime vessel sitting on the path.
Palette
#05080F deep space ground
#101728 dossier surfaces
#E9EEF8 starlight ink
#9AA7BF telemetry muted
#CED600 phosphor signal (kept)
ENV
PROP
CHAR
KEYFRAME
Motion + 3D
One GSAP ScrollTrigger timeline (scrub 0.8) drives a five-channel camera flight along a real Three.js elliptical orbit: 38 instanced week stations, TYPE-hued arc tubes per course, a dark drift sector with debris for the break, a lime NOW vessel with an additive trail, two parallax starfields. Dossiers dock once, numerals count up, the arc being read lights a beacon (hover couples both directions). All text stays DOM; labels are projected per frame. Reduced motion = static overview at NOW, plain document flow.
Keeps from V2
- Lime as the single signal, re-read as phosphor light
- Mono microlabel discipline (BLOCK 06 / 12, WK 09-10)
- 1px hairline precision as HUD strokes, no soft cards
- Data honesty: every figure verbatim or arithmetic from the JSON
Breaks from V2
- Paper ground becomes layered indigo-charcoal deep space
- Doto/Maintanker/Geist become Space Grotesk + Plex Mono
- The flat board becomes a 3D camera flight; the orbit IS the year calendar
- Glow allowed strictly as emitted light, never decorative shadow
How it is built · porting cost
Three files, no build step: an ES-module Three.js scene (importmap, pixel ratio capped, shared geometries, zero per-frame allocations, raycast hover and tap) under a scrolling DOM track; camera keyframes are generated from the rendered sections so time equals scrollY; ?year=1|2|3 rebuilds orbit and dossiers in place. Porting: the dossier maps 1:1 onto CourseCard as a variant; the orbit lives in one client component fed by the same weeks array; mobile and reduced motion already degrade to a static header orbit above a normal stacked board. The real cost is that the dark token sheet wants a separate route or theme rather than a drop-in reskin of the light app.
The case for it
Where am I in the year becomes spatial and permanent: everything flown sits dimmed behind the vessel, everything ahead is still lit, so position is read before any text. Scroll equals travel, which builds a gut sense of the year's pacing, and deep space flatters the moody covers far more than white cards. It is also the page that demonstrates the in-page 3D craft the school teaches.
The school year as a topographic traverse: 38 weeks of trail over procedural contours, courses as camps at their true week positions, you are here.
Palette
#F3EDDD field-guide paper
#FBF7EB bone plates
#2A2418 warm ink
#8A6F4E sienna contours
#BC4123 trail red (the accent)
#C42313 NOW marker
ENV forest
PROP ochre
CHAR madder
KEYFRAME slate
Type
Instrument Serif · display roman; italics for course and place names and the NOW date
Archivo · structure, legend, body reading
IBM Plex Mono · week marks, coordinates, dates, tallies
Motion + depth
Scrolling scrubs the walked portion of the trail (stroke-dashoffset) from the September trailhead to the exact NOW point; the route ahead stays dashed. Two contour sheets parallax at different rates, camps slide in transform-only, the occupied camp flies a pennant, the YOU ARE HERE pin pulses. No WebGL: depth is cartographic layering, label halos, and map z-order. Motion off = trail fully drawn, static, complete.
Keeps from V2
- Warm paper ground family, shifted to field-guide cream
- Hairline discipline as fine contour and frame strokes
- Strict mono data layer for every factual figure
- Four-way TYPE system, as solid terrain chips
Breaks from V2
- Lime is gone; the accent is surveyor red (walked vs ahead reads instantly on cream)
- Geist/Doto become Instrument Serif + Archivo + Plex Mono
- The uniform grid becomes true spatial positions with cartographic leader lines
- One continuous 7300px map sheet instead of stacked sections
How it is built · porting cost
The traverse height is exactly 38 x WEEK_H so equal weeks get equal distance by construction; the trail is a Catmull-Rom path with one anchor per week and the NOW point found by binary search on the path; contours are deterministic (seeded mulberry32) and cost four path nodes total; camps run a real label-placement collision pass, then SVG leader lines tie each card to its true anchor. Porting: the renderer is already a pure function of the JSON; split it into the existing component seams, run the collision pass under a ResizeObserver, and keep one structural law: one week = one fixed unit of height everywhere.
The case for it
It gives the year a body: September behind you, May still terrain ahead. The walked-solid versus dashed-ahead trail answers where am I and what is next faster than any list, self-study gaps read as quiet country instead of layout failure, the break is a closed pass, a TBD instructor is an unassigned expedition lead. The only direction that makes distance and pacing physical, which is what a year-long in-person program is.
The year as a letterpress ledger: masthead, tipped-in plates, punch rows, and a registrar's stamps with real dates on warm paper.
Palette
#F4F0E4 paper (warmer than V2)
#FAF7ED plate mats
#211D17 rich ink
#C63B1E vermilion: time + status
#2E4A6B press blue: bookkeeping
ENV spot ink
PROP spot ink
CHAR spot ink
KEYFRAME spot ink
Type
Fraunces (variable, optical sizes, italic) · masthead, entry headlines, semester numerals, blurbs
Archivo · stamp lettering, index terms, small-caps meta
Fragment Mono · the registrar layer: dates, strip months, captions, folio
Motion + depth
One print choreography per load: Oxford rules draw, the 38-week strip prints cell by cell, the vermilion NOW needle draws down through it. Entries print once on scroll, stamps thunk once (squash settle plus rotation), progress rules fill to their true percentage, punches count in. Depth is paper-native: offset paste shadows, half-degree recto/verso plate tilts, an SVG feTurbulence filter roughening stamp edges, and a paper-grain layer over everything including the art. ?motion=0 renders the page fully printed.
Keeps from V2
- Paper ground, near-black ink, 1px hairlines pushed into folio rules
- Mono microlabels as the chrome layer, same registrar honesty
- Spec-sheet factuality: every number computed from the JSON
- Restrained one-shot motion that serves reading order
Breaks from V2
- Doto/Maintanker display becomes Fraunces at large optical sizes
- Lime becomes vermilion (time, status) plus press blue (bookkeeping)
- The card grid becomes generous ledger rows with a margin column
- Image-first cards become text-first entries with tipped-in plates
How it is built · porting cost
The year strip is one 38-column CSS grid; consecutive same-course weeks merge into spanning blocks and the NOW needle is anchored as a grid item in the current week's column, exact at any width. The instructor-days meter sets one slug per day in tens with running counts beside a big press-blue days-left figure. Stamps are CSS roughened by an SVG displacement filter, and carry a second mono date line from real data. Porting: a token-plus-markup reskin; the strip maps onto YearCalendar almost one-to-one, the punch row is DaySquares with classes, CourseCard is the one real rewrite (card to ledger row), and since the reduced-motion render is the complete page the Next port can ship static first.
The case for it
The Register treats the year the way schools have always treated official records: as a document with authority. Status is stamped, days are punched, progress is a rule that fills. It keeps the V2 soul rather than replacing it, so it feels like the app grew up instead of changing costume, and the moody art gains real presence as tipped-in plates on warm paper. Week 30 of the year it will read calmer, not staler.
The year hangs on gallery walls and the student walks past it, from September to the final show. The spotlight stands on today.
Palette
#F4F0E8 gallery wall
#231F18 label ink
#8F742F brass chrome
#A98C62 oak floor
#452B0F floor-guide rail
#1D5949 viridian wayfinding
#A13324 collected dot
Type
EB Garamond · titles, artist lines, engraved status small caps, plaque numerals
Hanken Grotesk · quiet didactic text
IBM Plex Mono · dates, day fractions, room numbers, month engravings
Motion + depth
One pinned GSAP tween translates the whole gallery horizontally with scrub, so vertical scroll becomes an inertial walk and the native scrollbar stays the progress. Labels fade up as their work centers, frames drift for parallax, and the fixed floor guide highlights the weeks of whichever work stands in front of the visitor. Depth is built from light and architecture only: picture lamps with light cones, a spotlight and floor pool on the current work, elliptical frame shadows, skirting and door casings, letterpress engraving on display type. A CSS-3D angled-wall experiment was built, judged to read as floating slabs, and deliberately cut. Below 1024px or with motion off, the page is a calm vertical gallery.
Keeps from V2
- Light warm ground and one-accent restraint (viridian)
- Factual, data-verbatim labels
- Hairlines moved into frames, mats and meters
- Mono for data: dates and fractions stay tabular
Breaks from V2
- The flat spec sheet becomes architectural space: wall, floor, rooms, doors
- Serif-first museum labeling; mono only carries numbers
- Lime gone; brass plus deep viridian carry chrome and wayfinding
- The uniform grid becomes a hang: 10-day courses get larger canvases, framed at true aspect
How it is built · porting cost
A dimension table of every asset lets each painting be framed at its exact aspect ratio inside a mat, so no artwork is cropped. The 38-week calendar is a fixed dark-oak floor rail (one button per week, patinated past, hatched closed weeks, a NOW plumb line); the instructor-days meter is a rail of brass dots beside a plaque printing 33 left of 80. ?year= and ?flat=1 make every state URL-addressable. Porting: the promenade shell is one client component owning the GSAP context and the jump math (about 40 lines of real work); CourseCard splits into Frame and WallLabel; the floor guide is pure presentational.
The case for it
The only direction that treats the year the way the school treats the students' ambition: as work worth hanging. The metaphor is load-bearing, not skin: the walk is the calendar, the spotlight is today, closed doors are the break, patina is the past, and remaining instructor days read as brass being spent. The most emotionally ambitious direction while staying strictly factual.
The school year as a AAA season pass: a 38-node season rail with a lime playhead parked on today, chapters with cover art, an energy bar of instructor days.
Palette
#0B0C0F carbon ground
#101216 plate fill
#16181D raised plate
#E9EBEF ink on dark
#CED600 power accent (kept)
ENV neon
PROP neon
CHAR gold
KEYFRAME ice
Type
Archivo (variable width 62-125) · 900 expanded caps display and body
JetBrains Mono · the HUD data layer
Maintanker · the CONCEPTCORE wordmark, the one brand moment
Motion + depth
One choreographed entrance (rail nodes stagger, energy count-up to 33), then scroll-driven only: XP bars fill once, plates slide transform-only, the featured art drifts on a slow scrub. The rail syncs both directions: clicking a week jumps to its chapter, scrolling moves a lime bracket along the rail to the chapter under the viewport line. Depth is 2.5D: chamfered 1px plate strokes, a masked blueprint grid, a 60-particle drift behind the header only.
Keeps from V2
- Lime as the single power accent (playhead, XP, live states)
- Mono data layer, heir of the bracketed Geist Mono chrome
- One-accent discipline: TYPE hues only on content, never chrome
- The Maintanker wordmark as exactly one moment
Breaks from V2
- Paper becomes layered carbon; art needs a dark stage to glow
- Spec-sheet calm becomes game energy: 900-weight expanded caps, outline display moments
- Gray hairlines become white-alpha strokes on chamfered plates
- TYPE tints become four neon-tuned class hues on dark
Independent critique (scored 9 / 8 / 8 / 8 / 8) · fixes applied
- Payload audit came back empty: contract fully satisfied, all figures verified correct
- Covers with baked-in poster lettering now crop it out (per-cover object-position)
- The rail legend now keys the four real TYPE colors instead of a white COURSE swatch
- The year's tail is now a month-ticked self-study grid, not 600px of empty carbon
- The LAB chip docks into the flow on mobile instead of covering content
- Status said three times per done card reduced to one per surface; LOAD renamed VIEW; footer contrast lifted to AA
How it is built · porting cost
A single chamfer utility pair (clip-path over clip-path, inset 1px) gives crisp strokes on cut corners without SVG; the rail is a 38-column grid with the playhead and burn gradient positioned by week-index percentage; rail-to-list sync is one rAF-throttled scroll handler. Porting: the render functions already mirror the component seams (renderRail is YearCalendar, chapterCard and the hero are CourseCard variants, the day cells are DaySquares); move the chamfer utility and the dark tokens first; GSAP is optional since the page is complete without it.
The case for it
Concept-art students are the most game-literate audience a school can have, and this speaks their interface language while doing real informational work: past weeks look spent, the live course physically glows, locked chapters state their unlock date, and the covers that wash out on paper are at home on carbon. The daily question, where am I and what is next, is answered in the first second.
The synthesis, built from the audit of all five: the school's own paper and ink carrying the strongest mechanic of each direction. In print terms, the approved proof.
Palette
V2 paper (kept)
V2 surface (kept)
V2 ink (kept)
#CED600 lime = progress (kept)
#C63B1E vermilion = time, the one new ink
ENV (V2 tokens)
PROP
CHAR
KEYFRAME
Type
Maintanker · the brand face returns for display: CURRICULUM, course hero, numerals, semester numbers
Geist · body and UI, exactly as the app
Geist Mono · the data layer, exactly as the app
Motion + depth
Print choreography on load (rail cells print in, the vermilion needle draws, stats count up), one stamp thunk, semester rules that fill to their true percentage, entries that print in once on arrival, a slow parallax and a 2.4-degree pointer tilt on the hero plate. The reading bracket on the rail answers where in the year you are looking at all times. Reduced motion renders the complete page.
What it takes from each direction
- From 05 Season One: the always-visible 38-week rail with click-to-jump and the scroll-synced reading bracket; the featured NOW spread as the landing moment; per-year figures on the year tabs
- From 03 The Register: the status stamp with the real date, the slug case with running counts, the print-in choreography, the TBD entry as an unfilled blank
- From 02 Field Atlas: walked-vs-ahead truth everywhere (grayscale past cells, lime ahead, the needle placed 2/7 into the current week), self-study runs and the month-ticked season tail as designed time
- From 04 Vernissage: respect for the artwork: per-cover crop overrides so no baked lettering or focal point is butchered; plate sizes follow course duration
- From 01 Orbital: the stat strip as the opening telemetry and the principle that NOW is a position, not a chip
What it refuses
- No dark ground: this page lives inside the shipped light app
- No WebGL: tested in 01 and deliberately not carried into the daily tool
- No new display faces: Maintanker and Geist are already the brand
- No scroll-jacking: the scrollbar stays honest, the rail does the wayfinding
How it is built · porting cost
One self-contained file. The rail is a 38-column grid of cover-sliver cells (grayscale once past, hatched break, paper self-study) with the needle positioned truthfully inside the current week and a bracket driven by one rAF scroll handler; entries are ledger-hybrid rows: number and TYPE tab, plate sized by duration, text block, and a data margin with stamp-grade status, punch row (done gray, today vermilion, ahead lime), dates and Open. Porting is the cheapest of the six by design: the tokens are the app's own; the rail is a YearCalendar reskin plus one scroll listener; entries are a CourseCard variant consuming exactly the fields the app already passes; the punch rows are DaySquares with a today state; GSAP is additive and optional. It could land as the actual page rather than a theme.
The case for it
Every direction taught one lesson: 05 proved the rail plus featured-now answers the daily question fastest, 03 proved the school's paper-and-ink identity can carry charm and authority, 02 proved time must read as walked versus ahead, 04 proved the art deserves protection, 01 proved NOW should be a place. Master Copy is those five lessons on the one ground the app already owns, at the lowest porting cost of the six. This is the version to measure the others against.
THE VERDICT
Full check, problems found, and the recommendation
What the full check found
All five directions carry the complete payload correctly. Every page was verified against the data at 1440 and 390 in a real browser with zero console errors: Y1 33 left of 80 instructor days, current courses Sci Fi 2D / Line & Structure / Cinematic Keyframe Narrative, Now Wed 18 Nov, 12/12/7 blocks including one winter break each, semester progress 60% and 0%.
Problems encountered and dealt with: the account's monthly spend limit killed 9 of 15 agents mid-run (four critiques and all five refinement passes), so the audit of 01 to 04 and all refinements were completed inline in the main session. Three instructor covers carry baked-in poster lettering (THE CREATOR, PROJECT DRAGON, GREAT CIRCLE) that fought the UI type in 05 and 06; both now crop it out per cover. 05's critique list (11 items) was applied in full. 01 had projected labels clipping at the right screen edge, fixed. 06 had a mobile grid regression and sticky-stack jump offsets, both fixed and re-verified. Remaining known quirks are recorded per direction in this guide and are capture-tool artifacts or accepted trade-offs, not page bugs.
How they compare
| Direction | Answers "where am I" in | Respect for the art | Brand continuity | Spectacle | Port cost |
|---|---|---|---|---|---|
| 01 Orbital | One glance, spatially | Excellent on dark | Low (new world) | Highest of the six | High (theme + WebGL) |
| 02 Field Atlas | One glance, spatially | Good (stamp plates) | Medium (paper kin) | High | Medium |
| 03 The Register | One read (needle + thread) | Very good (plates) | Highest of the five | Quiet | Low-medium |
| 04 Vernissage | One walk (spotlight) | Highest of the six | Low-medium | High | Medium (promenade) |
| 05 Season One | First second (rail + hero) | Very good on carbon | Medium (lime + mono) | High | Medium |
| 06 Master Copy | First second (rail + hero) | Very good (crops + sizes) | Total: it is the brand | Measured | Lowest: it maps 1:1 |
The recommendation
Best single direction of the five: Season One (05): it answers the student's daily question fastest and the independent critique confirmed both its coherence and a fully correct payload. Best craft and truest to the school: The Register (03). The statement piece: Orbital (01), worth keeping alive for open days and marketing moments even if it does not become the daily page.
The candidate to ship: Master Copy (06): Season One's function on the Register's ground with Field Atlas's time truth, Vernissage's care for the art, and the app's own tokens, fonts and component seams, so it ports as a presentational re-skin rather than a rebuild. It is on the wall as /six for review; if it survives your eye, the port lands in components/curriculum/* with no data-layer changes.
Payload contract (what every page carries)
- Session 2026-2027 with a Year 1 / 2 / 3 switcher, every state URL-addressable via ?year=
- The 38-week year calendar with course, self-study, break, past and current states plus month labels and the NOW position
- The instructor-days meter, one unit per course day, with the exact N-left-of-M figure
- Semesters with number, label, date range, block count and a true % progress meter
- A NOW marker reading Now, Wed 18 Nov placed truthfully in the flow
- Every course block: real cover, TYPE system, In session / Done / Upcoming, instructor or explicit Instructor TBD, blurb, skill tags, per-day progress with an X of Y reading, start date and duration, open affordance
- The winter break as a dated, muted, non-clickable block
- The current course as the unmistakable hero of the page