Naar inhoud

Colofon · making of

Zo is deze site gemaakt

Latent is een showcase van studio Weblify. De site laat één techniek tot in de details zien: native View Transitions die een afdruk laten ontwikkelen terwijl je navigeert.

Framework
Astro (multi-page) + Tailwind CSS v4
Signature
Native cross-document View Transitions
Fonts
Spectral + JetBrains Mono (self-hosted)
Beelden
Recraft V3 — zilvergelatine-platen
Hosting
Cloudflare Pages, EU-edge
Beveiliging
Strikte hash-CSP, geen inline styles

01

De routes zijn de chemie

De meeste fotolabo-sites zijn één pagina met een galerij en een contactknop. Latent draait dat om: elke stap van het afdrukproces, belichten, ontwikkelen, stoppen, fixeren, wassen, is een echte route. Je navigeert niet door een menu, je loopt door een donkere kamer.

Omdat de routes de stappen zíjn, kan de paginawissel zelf de metafoor dragen. Dat is waar de techniek binnenkomt.

02

Het beeld dat ontwikkelt tussen twee pagina’s

Wanneer je van de ene stap naar de volgende gaat, gebruikt de browser een native cross-document View Transition. Eén gedeelde afdruk (dezelfde anemoon) krijgt op elke route dezelfde naam in de CSS, waardoor de browser hem herkent en morpht in plaats van hem te herladen.

De ontwikkeling zelf is puur CSS: het inkomende beeld start bijna wit en laag in contrast (blank papier) en resolvert naar volle zilvertoon, gestuurd via de ::view-transition-new pseudo-elementen. De helderheid zakt, het contrast klimt, de korrel scherpt. De overgang is de ontwikkelbak.

Op het contactblad werkt dezelfde techniek anders: elk frame heeft een eigen naam die matcht met zijn afdrukpagina, zodat een klik het frame laat vergroten tot zijn volledige print.

03

Werkt overal, ook zonder de magie

View Transitions zijn progressive enhancement. Waar de browser ze niet ondersteunt, valt de site stilzwijgend terug op een gewone, directe navigatie, alles blijft werken, alleen zonder de ontwikkel-overgang. En wie "verminderde beweging" heeft ingesteld, krijgt de overgangen meteen als eindtoestand: het volledige beeld, zonder animatie.

04

Bewust géén rode gloed

Het cliché van de donkere kamer is een zwart scherm met een rode safelight-gloed. Latent weigert dat. De site start helder en klinisch, als een anteroom; het donker verschijnt precies één keer, in de ontwikkelkamer, en de amber safelight is een dunne accentlijn, nooit een gloed. Het drama zit in de lichtwissel en de verschijnende afdruk, niet in neon.

05

De platen

De zes afdrukken van de reeks Lampion en de ontwikkelende anemoon zijn met Recraft gegenereerd in één visuele stem, getoond als zilvergelatine-prints in het palet van de site, en lokaal gehost. Conform de EU AI Act staat er een vermelding in de footer.

Zin in zo’n site voor je eigen zaak?

Weblify bouwt snelle, eigenzinnige websites voor lokale zaken en makers.

Herbekijk het ritueel