Five by Erik — nachtfotografie-designstudie

Bij het openen vliegen de foto's draaiend door de ruimte en vallen ze in ongeveer anderhalve seconde samen tot een masonry-raster, waarna het woord Five omhoogkomt. Five is een designstudie met een verzonnen merk: een studio voor nachtfotografie die niet bestaat. De 24 foto's zijn met AI gegenereerd (gpt-image-2), en ook de titels en bijschriften zijn fictie. Het gaat om de pagina zelf: beweging, diepte en wat een foto doet als je ernaar wijst.

Het raster kantelt zonder overgang een 3D-wand in, gebouwd met three.js en eigen shaders. Dat de wissel van HTML naar WebGL niet te zien is, komt doordat het eerste frame van de wand precies het raster nabootst: elke foto is een vlak op dezelfde plek en in dezelfde maat, en de shader geeft in rust exact de textuur terug. Pas daarna buigt de wand naar een holle cilinder, waarbij de randen naar je toe komen en elke foto naar de as van die cilinder draait. Slepen draait de camera rond de wand, met traagheid. Wijs je een foto aan, dan bolt die in de vertex-shader naar voren, schuiven de rode en blauwe kanalen een fractie uit elkaar, verschuift de tint en krijgt de rand een cyaan gloed.

Kies je een andere serie (Neon, Long Exposure of Quiet Nights, of alle 24 samen), dan valt de wand uiteen in een sterrenwolk van zijn eigen pixels. Elke foto heeft daarvoor een raster van 28 × 28 punten die hun kleur uit de foto halen en in een willekeurige richting wegvliegen, iets naar je toe. Daarna bouwt de nieuwe serie zich op, met een golf die door de vlakken loopt. Op sterkere hardware legt een bloom-pass er een gloed overheen. Die begint op nul, zodat ook met bloom het eerste frame gelijk is aan het raster.

Een klik opent een lightbox die opengroeit vanaf de plek waar de foto op het scherm stond, ook als die in de 3D-wand hing. Een kleine functie rekent daarvoor de vier hoeken van het vlak via de camera om naar een rechthoek op het scherm, en GSAP animeert vanuit die rechthoek naar het grote beeld. Daaronder volgt een scrollverhaal met foto's in parallaxlagen en woorden die oplichten (Lenis en GSAP ScrollTrigger).

three.js zit in een apart stuk JavaScript dat pas wordt opgehaald als de intro begint. De wand gebruikt texturen van 960 px breed; de versie van 1600 px laadt pas in de lightbox. Op touchscreens, schermen smaller dan 768 px en processors met vier kernen of minder is de pixelratio hoogstens 1,5 en is er geen bloom. De renderlus pauzeert buiten beeld, in een verborgen tabblad en zolang de lightbox open is. Met 'minder beweging' aan of zonder WebGL2 krijg je een gewoon raster, en werken de lightbox en de series nog steeds. Het canvas is verborgen voor schermlezers; een onzichtbare lijst knoppen, één per foto, opent de lightbox met het toetsenbord. Gebouwd met SvelteKit en Svelte 5 in TypeScript. Lighthouse mobiel: 94 voor prestaties, 100 voor toegankelijkheid.