Five by Erik — nachtfotografie-designstudie

2026

Een one-page site voor een fictieve studio voor nachtfotografie, met een 3D-fotowand in three.js, eigen shaders en animaties met GSAP. Alle beelden zijn met AI gegenereerd.

Five is een designstudie met een verzonnen merk: een studio voor nachtfotografie die niet bestaat. De 24 foto's zijn met AI gegenereerd, 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.

Bij het openen vliegen de foto's door de ruimte en vallen ze samen tot een masonry-raster. Dat raster kantelt zonder overgang een 3D-wand in, gebouwd met three.js en eigen shaders. Je draait de wand door te slepen. Wijs je een foto aan, dan komt die naar voren met een gloed en een kleurverschuiving. Kies je een andere serie (Neon, Long Exposure of Quiet Nights), dan valt de wand uiteen in een sterrenwolk van zijn eigen pixels en bouwt hij zich opnieuw op.

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. Daaronder volgt een scrollverhaal met parallax en woorden die oplichten (Lenis en GSAP ScrollTrigger). Met 'minder beweging' aan of zonder WebGL krijg je een gewoon raster, en werken de lightbox en de series nog steeds. Lighthouse mobiel: 94 prestaties, 100 toegankelijkheid.

Technologieën

SvelteKit three.js WebGL GSAP Lenis TypeScript

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk