Guide

Begin bij één ruimtelijke these

NINTH HOUR behandelt licht niet als sfeerlaag, maar als bouwmateriaal. Daarom is de hero geen foto of showreel. Het is een instrument. Veertien architecturale vinnen werpen projecties op een grondvlak. Rond 15:00 vallen die projecties samen in een anamorf woordbeeld.

De rest van de pagina volgt vier echte ontwerphandelingen: meten, snijden, bewonen en herinneren. Kleur heeft telkens een fysieke rol. Saffraan is zon, cobalt is schaduw en koraal is het nabeeld op het netvlies.

Canvas als progressieve verbetering

De interactieve laag gebruikt de 2D Canvas API, niet WebGL. Een kleine isometrische projectiefunctie vertaalt wereldcoördinaten naar het scherm. Elk object heeft een grondvlak, een hoogte en een schaduwvector. Het gekozen uur bepaalt azimut, lengte en de mate waarin het woordbeeld oplost.

screenX = originX + (worldX - worldZ) × scale
screenY = originY + (worldX + worldZ) × scale × cameraPitch - height × scale
shadow = sunVector(hour) × finHeight

Zelf reproduceren

• Start met een semantische Astro-pagina en leg kleur, type en motion vast in tokens.
• Plaats een complete SVG-poster onder de canvaslaag.
• Teken grondraster, schaduwvlakken en objectvlakken van achter naar voor.
• Koppel een native range-input aan dezelfde tijdswaarde voor toetsenbord en touch.
• Gebruik IntersectionObserver enkel om hoofdstukken aan een uur te koppelen.
• Verberg de poster pas nadat canvas succesvol een frame heeft getekend.

Palette

Mineral `#F2F0E9`, midnight `#132353`, cobalt `#1239C5`, solar saffron `#F5B82E` en retinal coral `#F04F45`. Tekst gebruikt alleen vooraf gemeten AA-combinaties. Koraal verschijnt als groot vlak of groot display, niet als kleine tekst op mineral.

Typography

Syne draagt de brede, geconstrueerde identiteit. Manrope houdt uitleg en instrumentlabels rustig. Beide fonts zijn lokaal gehost. De schaal loopt van 12px instrumenttekst tot een vloeibare 152px display.

Composition

Een 12-kolomsraster wordt per hoofdstuk anders aangesneden. Er zijn geen herhaalde feature cards. De inhoud gebruikt banen, aperturen, orbitale diagrammen en ruimtelijke studies die bij het onderwerp horen.

Drie volwaardige rendermodi

Met JavaScript krijgt de bezoeker een pointergestuurde canvasstudie. Zonder JavaScript blijft een inline SVG-poster met dezelfde identiteit zichtbaar. Bij verminderde beweging wordt canvas uitgeschakeld en verschijnt de rustige, opgeloste 15:00-toestand. Alle inhoud blijft gewone HTML.

De native tijdslider is met pijltjestoetsen bedienbaar, focus is zichtbaar, tikdoelen zijn minimaal 44px, de documentstructuur gebruikt echte landmarks en de kleuren zijn op WCAG 2.2 AA getoetst.

Geen externe media

Er is geen video, fotobestand, 3D-model, trackingcode of externe fontverbinding. De eerste betekenisvolle compositie staat als SVG in de HTML. Canvas wordt op maximaal tweemaal de device pixel ratio gerenderd om energie en geheugen op mobiele schermen te begrenzen.

Astro bouwt statische HTML. Cloudflare Pages serveert fingerprint-assets immutable en laat HTML revalideren. De Content Security Policy accepteert uitsluitend lokale code, fonts en beelden.

Cloudflare Pages

Bouw de site met Node 22 en `npm run build`. Publiceer daarna de map `dist` als een apart Pages-project. Het meegeleverde deployscript gebruikt het project `ninth-hour`.

npm ci
npm run qa:release
npm run deploy
QA_BASE_URL=https://ninth-hour.pages.dev npm run qa:live

Controleer na publicatie de homepage, deze guide, het promptlog, de 404-pagina, console, headers, normale beweging en reduced motion op de echte URL.

Volledig code-native

Alle geometrie, diagrammen, schaduwen, iconen en deelbeelden zijn voor deze demonstratie als SVG, CSS of canvascode gemaakt. Er zijn geen stockbeelden, gegenereerde beelden, merkassets van derden of externe animatiemodellen gebruikt. Het volledige promptlog staat op /prompts.

Pass 1 · Defect, interaction en mobile

De eerste renders vonden drie contrastproblemen, een 404-verwachting die niet bij de afgebroken kop paste en een mobiele hero die de geometrie te laat toonde. Tekst kreeg veilige ondervlakken en pairings, de foutverwachting werd exact gemaakt en de mobiele projectie werd hoger in het eerste viewport gekadreerd.

Pass 2 · Depth and tactility

Hypothese: correcte ruimtelijke cues zouden meer waarde leveren dan meer effecten. Schaduwen en solids kregen aparte painter passes, vinnen werden op projectiediepte gesorteerd, contactschaduwen verankeren elk object en pointerhoogte stuurt een kleine camera-orbit. De SVG-fallback en het payloadbudget bleven gelijk.

Pass 3 · Cohesion, rhythm and reduction

De pagina werd als één kleur- en tijdrhythm gecontroleerd. Het koraal-nabeeld kreeg zijn heldere basistint terug met een aparte 4.82:1 inktkleur. Het mobiele woordbeeld kwam in het eerste viewport, de uitnodiging werd Nederlandstalig en 18:00 kreeg één optische echo. De guide volgt de uiteindelijke cameraformule. De solar field blijft het enige focale signature-moment.

Het technische bewijs en de bevindingen staan ook in het projectbestand ITERATIONS.md.