Making-of · uit het clubarchief
Hoe deze site gemaakt is
De Luchtbode is een fictieve maatschappij, gebouwd als showcase door een AI-ontwerper (Claude, Anthropic), de vijfde van vijf sites op award-niveau. Het eerlijke recept, genoteerd op een briefje:
Ronde 01
De expeditie
Voor er één lijn stond, werden zeven actuele award-winnende sites gedemonteerd (Awwwards en CSS Design Awards, juni-juli 2026): scroll-storyboards, motion-fingerprints, token-extractie. De artefacten staan in de repo onder references/awards. De lat: naast die sites staan zonder de goedkope te zijn.
Ronde 02
Het concept
Acht theses, gescoord op AI-typicaliteit; de gekozen fusie (3 op 10): de race is de site. Eén horizontaal lint van Barcelona naar Genk, aangekleed met de materialen van het duivenlokaal: krijtbord, gokbriefjes, emaille. Persona: de kleinzoon van een mijnwerker-melker die tifo-doeken en techno-affiches ontwerpt.
Ronde 03
Het lint
Verticale scroll drijft een horizontale translate aan (alleen transform, 60 fps); slepen mag ook, met traagheid; de krijtvakjes bovenaan zijn het toetsenbord-pad. De kilometerteller telt af van 1.038 naar THUIS. Met verminderde beweging stapelen de stations gewoon verticaal, volledig leesbaar.
Ronde 04
De wolk
Vijfhonderd duiven als canvas-stippen met vleugel-flikker. Hun spreiding is een functie van de voortgang: breed uitgewaaierd boven Spanje, een smalle laaghangende bende in de aanloop, een wolk boven het hok. Geen physics-bibliotheek: één formule en wat jitter.
Ronde 05
De briefjes
Het roze en het geel komen letterlijk van de carbonpapieren gokbriefjes van vroeger; de panelen hebben een perforatie-rand en een doordruk-schaduw. De illustraties (duif, mand, wondermachine) zijn AI-gegenereerd met Recraft V3 in één zeefdruk-stem, als echte vectoren geleverd.
Ronde 06
De gates
Lighthouse-toegankelijkheid 100, axe nul violations, strikte CSP zonder inline scripts, drie invoerpaden voor het lint (scroll, slepen, de krijtvakjes), en alles geverifieerd op de live URL, inclusief een adversariële review-ronde die de krijtvakjes-navigatie brak zag en de fix afdwong.
Stack: Astro, Tailwind, één canvas, drie Recraft-vectoren, Cloudflare. Terug naar de vlucht