Four by Erik — AI studio design study

At the top of the page a network of glowing nodes drifts across a dark blue background, with the FOUR wordmark on top of it. Four is a design study: a one-page site for an AI and software studio that does not exist. Its structure and techniques are inspired by award-level agency sites, but all copy, visuals and code are my own. The names and projects on the page are invented; the Lighthouse scores and the shader are real, and the footer says so.

That network is a single hand-written fragment shader in WebGL1, with no library, drawn on one triangle that covers the whole screen. The base is a flow field: value noise in four layers (fbm), whose coordinates are themselves shifted by noise (domain warping). On top of that sits a lattice of nodes, each drifting slowly around its own spot. Thin lines join neighbouring nodes, and data packets travel along every line at their own speed. The lines light up mostly where the flow is strong, and around the pointer the lattice bends a little towards the cursor. A small per-pixel noise prevents visible colour banding in the dark gradients.

The shader renders at no more than 1.5 times the screen's pixel density, and at 1 on touchscreens. An IntersectionObserver and the visibilitychange event stop the loop as soon as the hero is off-screen or the tab is hidden. The loader counts from 0 to 100 per cent on real steps: the fonts (document.fonts.ready), compiling the shader and the first frame. It stays up for at least 600 ms so it does not flash, then slides away with a clip-path.

Then column rules draw themselves across the whole page (four columns on desktop, two on mobile), type slides in line by line, and Lenis and GSAP ScrollTrigger take over scrolling. Lenis runs on GSAP's ticker, so smooth scrolling and the scroll animations share one clock. The work sits in a draggable carousel of four cards, each with its own canvas visual: a lattice of agents with a wave running through it, tide lines with a moving 'now' marker, a stack of documents being read line by line, and a ring that breathes like a sound wave. Dragging with the mouse has inertia, the cards snap into place and the arrow keys work too. The four disciplines expand on a click, and with a mouse on hover as well. On screens from 1024 px wide, the section with the three principles stays pinned while you scroll through it; on smaller screens they simply stack. A custom cursor, a dot with a ring that trails slightly behind the mouse, changes colour per section and only appears with a mouse or trackpad.

With reduced motion on, Lenis is dropped, nothing is pinned, the shader stops on a single frame and the loader is skipped. Without WebGL the hero gets a CSS gradient. Without JavaScript all content is still there in the prerendered HTML. The site is built with SvelteKit and Svelte 5 in TypeScript and exported as a static site. Lighthouse mobile: 94 performance, 100 accessibility.