Four is a design study: a fictional brand used to show how a modern studio website is built. Its structure and techniques are inspired by award-level agency sites, but all copy, visuals and code are my own.
The hero runs on a hand-written WebGL shader: a 'neural field' of nodes and data packets that reacts to the pointer and pauses when off-screen. A loader tracks the real loading of fonts and shader. Then column rules draw themselves, type slides in line by line, and Lenis and GSAP ScrollTrigger take over scrolling.
Also inside: a draggable carousel with canvas visuals, expandable disciplines, a pinned principles section and a custom cursor that changes colour per section. With reduced motion, without WebGL or without JavaScript everything stays usable. Lighthouse mobile: 94 performance, 100 accessibility.
The hero runs on a hand-written WebGL shader: a 'neural field' of nodes and data packets that reacts to the pointer and pauses when off-screen. A loader tracks the real loading of fonts and shader. Then column rules draw themselves, type slides in line by line, and Lenis and GSAP ScrollTrigger take over scrolling.
Also inside: a draggable carousel with canvas visuals, expandable disciplines, a pinned principles section and a custom cursor that changes colour per section. With reduced motion, without WebGL or without JavaScript everything stays usable. Lighthouse mobile: 94 performance, 100 accessibility.
Technologies
SvelteKit
WebGL
GSAP
Lenis
TypeScript
More work
Interactive 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
An interactive 3D particle mesh globe built with Three.js where you can click countries to discover cultural connections.
Interactive DOS Experience
An interactive MS-DOS simulation with retro terminal, commands and a spectacular ASCII explosion transition to a 3D carousel.