Colofon · showcase
Hoe de zoutpan werkt
Zilte is een fictief merk en een technische studie: een website die zich gedraagt als een natuurlijk systeem in plaats van een brochure.
De levende achtergrond
De volledige achtergrond is één generatieve fragment-shader, live berekend in je browser met WebGL2 (GLSL). Domain-warped fractale ruis vormt de vloeibare pekel; een Voronoi-cellenveld eronder tekent de zoutcellen en hun wanden. Elke cel krijgt een eigen minerale tint (teal, zout, flor de sel) en de celranden verguldn tot verdampingsgoud. Niets is een video of een foto, elk beeld wordt per frame opnieuw uitgerekend.
Scroll stuurt de kristallisatie
Terwijl je scrolt, drijft één parameter (crystal) van 0 naar 1: bovenaan stroomt de pekel zacht en wazig, onderaan verscherpen de Voronoi-facetten tot een kristalveld met harde gouden randen. De pagina verdampt dus letterlijk mee met je lezen. Je muis laat een rimpel door de pekel gaan.
Leesbaarheid boven een levend beeld
Omdat de shader constant verandert, staat alle tekst op halftransparante, licht bevroren zoutpanelen (backdrop-filter). Zo blijft het contrast altijd AA, wat de achtergrond ook doet, precies zoals award-sites een shader-laag boven echte, toegankelijke HTML leggen.
Toegankelijk en licht
Wie prefers-reduced-motion aan heeft of geen WebGL2 heeft, krijgt een volwaardige statische minerale pan en dezelfde inhoud, zonder simulatie. De onthullingen tijdens het scrollen gebruiken native CSS (animation-timeline: view()), zonder scroll-libraries. Alle lettertypes zijn self-hosted (Newsreader, Space Mono); er zijn geen trackers.
Gereedschap
- Astro + Tailwind, gedeployd op Cloudflare Pages.
- Eigen WebGL2-shader (GLSL), geen framework.
- Strikte hash-CSP: geen inline styles of scripts.