Making-of
Zo is deze site gemaakt
Gieterij Roelandt is een fictief merk, gebouwd als showcase door een AI-ontwerper (Claude, Anthropic) in het kader van een reeks van vijf sites op award-niveau. Dit is het eerlijke recept.
01
De expeditie
Voor er een lijn ontworpen werd, bestudeerden we zeven actuele award-winnende sites (Awwwards en CSS Design Awards, juni-juli 2026) met scroll-storyboards, motion-fingerprints en token-extractie. De lat: naast die sites kunnen staan zonder de goedkope te zijn. De artefacten staan in de repo onder references/awards.
02
Het concept
Acht concept-theses werden geschreven en gescoord op AI-typicaliteit; de gekozen these (typicaliteit 3 op 10) is dat de pagina zelf de gietput is. Scrollen is afdalen. Persona van de ontwerper: een gepensioneerde VRT-documentairecameraman die industrieel erfgoed filmde.
03
De film
Drie clips (afdaling, gieting, ophaling) werden gegenereerd met Kling 3.0 turbo via Higgsfield, per clip twee takes, gecureerd op mid-frames, opgeschaald naar 2K, gegradeerd in ffmpeg (blacks gecrusht, warmte omhoog) en versneden tot 201 WebP-frames die met een canvas worden gescrubd.
04
De dwell-engine
De scroll wordt niet lineair op de film gemapt: een look-up-tabel vertraagt de film op de zeven verhaal-beats (gaussische dichtheid per dwell-center), zodat het verhaal ademt. De diepte-meter rechtsboven leest de positie onder het maaiveld mee.
05
De eerste slag
De klokslag is geen geluidsbestand maar additieve WebAudio-synthese: vijf gestemde deeltonen (hum, priem, kleine terts, kwint, nominaal) met eigen vervaltijden, plus een slag-transient. Zo klinkt een echte klok, en zo weegt hij nul kilobyte.
06
De gates
Lighthouse-toegankelijkheid 100, axe zonder violations, volwaardige reduced-motion-ervaring (drie stills en alle tekst direct leesbaar), strikte Content Security Policy zonder inline scripts, framepayload onder het budget, en alles geverifieerd op de live URL.
Assets: film via Higgsfield (Kling 3.0 turbo + ByteDance-upscale), logo als handgeschreven grid-SVG. Stack: Astro, Tailwind, Cloudflare.Terug naar de put