Handoff notes

This page is a working prototype of the design PDF, built at its exact 1920 × 1080 layout and scaled to the window. Every position, size and colour on the page is taken from the PDF. Vertical positions in the table are the tops of capital letters. The behaviour below is what the developer should build.

Behaviour

• Intro screen: the story opens on an intro screen before the first chapter: black page, pins in #505050, nothing on it clickable (pins included), map in blue #1C2692, and the title "Q-VENT / US JOURNEY" in Corner B Fat 115.5 px with 107 px line spacing, left edge at x 960, first line's capitals starting at y 443, colour #DCDCDC. The list, centre title and Q mark are hidden. Scrolling down to the first chapter fades the page to #282828, the map to black and the pins to grey, fades the title out, and brings in the list, centre title and Q mark (0.6–0.8 s).
• Scrolling story: after the intro, one screen per chapter. Scrolling down moves to the next chapter and snaps to it. The map, title and list stay fixed. As each chapter comes into view, the blue dot moves to it, its pins turn blue, and its name replaces the centre title with a short fade-up.
• Chapter list: collapsed by default, showing only the title and the dots (design frame B). It slides open when the cursor enters the 60 px strip on the left that holds the dots (design frame A), which keeps it clear of the West Coast pins, and closes as soon as the cursor leaves the 492.4 px panel. On touch screens, tapping the dots opens it and tapping outside closes it.
• Jumping: clicking a chapter name, one of its projects, or a pin scrolls the story to that chapter.
• More info: over the title area, the system cursor is hidden and the red ring follows the pointer, reading "More info". A click lays the More Info sheet over the page.
• More Info sheet: a layer of blue "tracing paper" over the map: #1C2692 at 84% opacity on a 16 px background blur, with a fine generated grain (17% opacity, overlay blend). The chapter title stays exactly where it was (left edge x 720, capitals at y 520), and the chapter text runs above and below it. Photos sit in a column at x 168 (288 wide), labels at x 528 (Arketa 18, uppercase), body text at x 720 (GT Mechanik Semi Light 22 on 26 px, labels baseline-aligned with it), and the credits table at x 1502 (GT Mechanik Semi 12, uppercase, 22 px rows, hairlines). The header reads US JOURNEY on the left. Longer chapters scroll inside the sheet; the text fades out under the header. The story does not move while the sheet is open, and the dots turn white.
• Closing the sheet (proposal): three ways, all in the same visual language. (1) Hovering the chapter title shows the red ring reading "Close"; a click closes, mirroring how the sheet opened. (2) A close button in the header, top right, opposite US JOURNEY, always visible even after scrolling: a 56 px circle with an X in the ring's red #FD3D16, 1.6 px line, right edge at x 1872, centred on the header line. (3) Esc. Choosing another chapter from the list also closes the sheet and moves there.
• Active chapter name: the 22 px name is laid over its row and never changes the row's height, so the list and the dots stay put when the chapter changes.
• Pin spacing: at any zoom level, pins that would overlap are nudged apart so there are at least 3 px between them. When zoomed in far enough, no pins overlap and every pin sits at its exact location.
• Text-only chapters: Introduction and 2020 have no pins; all pins go grey.
• Zoom to region (proposal): seven pins sit in the New York area and overlap at full-US scale. With this switch on, the map eases to the active chapter's region.

Layout (1920 × 1080 frame)

Two deliberate differences from the PDF: the title is spelled JOURNEY, and each dot is centred on its chapter's first line. In the PDF the dots drift up to 22 px below their chapters further down the list, which looks unintended.

Pin locations

Status: verified address confirmed from a public source · address placed from a known address · approximate right area, building not confirmed · city only the city is known.

Map projection

The map is the supplied SVG of the 48 states plus DC, in Mercator. Its coordinates follow x = 22.9791 × lng + 2873.723 and y = 1302.26 − 1305.38 × ln(tan(45° + lat / 2)) in the SVG's own units (viewBox 1339.56 × 729.91), accurate to 0.1 unit. Each pin's x_svg and y_svg in the data file are in those units, so pins can be drawn inside the same SVG and stay aligned at any size. The state outlines keep a 1 px weight at every scale (vector-effect: non-scaling-stroke) and take the page background colour.

Open questions

• Which Omaha medical clinic is it? The pin sits at the city centre for now.
• Meatpacking District and Santa Rosa Criminal Courthouse need exact building addresses.
• The year chapter reads "2020" in the design. Confirm 2020 or 2022.
• More Info photos: The First Milestone shows the agreed treatment: cut-out photos with transparent skies, full sheet width, after the chapter story and credits, 96 px apart, followed by the longer project text. Other chapters still show placeholders where they go. Each chapter currently has three; tell the developer the final count and order per chapter.
• Mobile layout: the 1920 × 1080 frame becomes very small on a phone. A separate mobile design is needed.
• Fonts: Corner B Fat, Arketa Regular and GT Mechanik Semi (Regular, Light) are licensed. Confirm the licence covers web use before launch.