Four by Erik — AI-studio designstudie

Bovenaan de pagina beweegt een netwerk van lichtgevende knooppunten over een donkerblauwe achtergrond, met het woordmerk FOUR eroverheen. Four is een designstudie: een one-page site voor een AI- en softwarestudio die niet bestaat. Structuur en technieken zijn geïnspireerd op award-waardige bureausites, maar alle tekst, beelden en code zijn eigen werk. De namen en projecten op de pagina zijn verzonnen; de Lighthouse-scores en de shader zijn echt, en dat staat ook in de footer.

Dat netwerk is één zelfgeschreven fragment-shader in WebGL1, zonder library, getekend op één driehoek die het hele scherm bedekt. De basis is een stromingsveld: value noise in vier lagen (fbm), waarvan de coördinaten zelf weer met noise worden verschoven (domain warping). Daaroverheen ligt een rooster van knooppunten die elk langzaam rond hun eigen plek bewegen. Tussen buren lopen dunne lijnen, en over elke lijn schuiven datapakketjes met een eigen snelheid. De lijnen lichten vooral op waar de stroming sterk is, en rond de muis buigt het rooster een stukje naar de cursor toe. Een kleine ruis per pixel voorkomt zichtbare kleurbanden in de donkere verlopen.

De shader rendert met hoogstens 1,5 keer de pixeldichtheid van het scherm, en op touchscreens met 1. Een IntersectionObserver en het visibilitychange-event zetten de lus stil zodra de hero uit beeld is of het tabblad verborgen. Het laadscherm telt van 0 tot 100 procent op echte stappen: de fonts (document.fonts.ready), het compileren van de shader en het eerste frame. Het blijft minstens 600 ms staan, zodat het niet flitst, en schuift dan weg met een clip-path.

Daarna tekenen kolomlijnen zichzelf over de hele pagina (vier kolommen op desktop, twee op mobiel), schuift de typografie per regel in beeld en nemen Lenis en GSAP ScrollTrigger het scrollen over. Lenis draait op de ticker van GSAP, zodat smooth scroll en de scrollanimaties dezelfde klok gebruiken. Het werk staat in een sleepbare carrousel van vier kaarten, elk met een eigen canvas-visual: een rooster van agents waar een golf doorheen loopt, getijdenlijnen met een bewegende nu-markering, een stapel documenten die regel voor regel wordt gelezen en een ring die ademt als een geluidsgolf. Slepen met de muis heeft traagheid, de kaarten klikken op hun plek en de pijltjestoetsen werken ook. De vier disciplines klappen uit met een klik, en met een muis al bij hover. Op schermen vanaf 1024 px blijft de sectie met de drie principes vastgepind terwijl je erdoorheen scrolt; op kleinere schermen staan ze gewoon onder elkaar. Een eigen cursor, een stip met een ring die iets achter de muis aan loopt, wisselt per sectie van kleur en verschijnt alleen bij een muis of trackpad.

Met 'minder beweging' aan valt Lenis weg, wordt niets vastgepind, staat de shader stil op één frame en wordt het laadscherm overgeslagen. Zonder WebGL krijgt de hero een CSS-verloop. Zonder JavaScript staat alle inhoud gewoon in de vooraf gerenderde HTML. De site is gebouwd met SvelteKit en Svelte 5 in TypeScript en wordt als statische site geëxporteerd. Lighthouse mobiel: 94 voor prestaties, 100 voor toegankelijkheid.