Four is een designstudie: een fictief merk waarmee ik laat zien hoe een moderne studio-website technisch in elkaar zit. Structuur en technieken zijn geïnspireerd op award-waardige bureausites, maar alle tekst, beelden en code zijn eigen werk.
De hero draait op een zelfgeschreven WebGL-shader: een 'neural field' met knooppunten en datapakketjes die op de muis reageren en pauzeren buiten beeld. Een laadscherm telt mee met het echte laden van fonts en shader. Daarna tekenen kolomlijnen zichzelf, schuift de typografie per regel in beeld en nemen Lenis en GSAP ScrollTrigger het scrollen over.
Verder: een sleepbare carrousel met canvas-visuals, uitklapbare disciplines, een vastgepinde principes-sectie en een eigen cursor die per sectie van kleur wisselt. Met 'minder beweging' aan, zonder WebGL of zonder JavaScript blijft alles bruikbaar. Lighthouse mobiel: 94 performance, 100 toegankelijkheid.
De hero draait op een zelfgeschreven WebGL-shader: een 'neural field' met knooppunten en datapakketjes die op de muis reageren en pauzeren buiten beeld. Een laadscherm telt mee met het echte laden van fonts en shader. Daarna tekenen kolomlijnen zichzelf, schuift de typografie per regel in beeld en nemen Lenis en GSAP ScrollTrigger het scrollen over.
Verder: een sleepbare carrousel met canvas-visuals, uitklapbare disciplines, een vastgepinde principes-sectie en een eigen cursor die per sectie van kleur wisselt. Met 'minder beweging' aan, zonder WebGL of zonder JavaScript blijft alles bruikbaar. Lighthouse mobiel: 94 performance, 100 toegankelijkheid.
Technologieen
SvelteKit
WebGL
GSAP
Lenis
TypeScript
Meer werk
Interactieve 3D WebGL Experience
Cinematic 3D WebGL ervaring met geanimeerde chrome letters, neon grid, en warp-speed sterren. Beweeg je muis voor interactieve camera parallax.
Interactive World Globe
Een interactieve 3D wereldbol gebouwd met Three.js waar je kunt klikken op landen om culturele connecties te ontdekken.
Interactieve DOS Experience
Een interactieve MS-DOS simulatie met retro terminal, commando's en een spectaculaire ASCII-explosie overgang naar een 3D carrousel.