The contour field behind this page
Before a buyer asks a website studio for references, they judge the studio's own site: how fast it loads, whether the craft is real or installed. This case is that surface — the graphics system behind every page of creativemk.net, rebuilt so the visible craft grew while the page got lighter. The weight figures are checkable in this repository, and the load behavior is measurable in any browser.
−147 KB gzipped, and the 3D got bigger
The problem
The contour field is the graphics system behind every page of creativemk.net. Its first version made the mistake that argues against a studio rather than for it: a three.js scene behind the hero, which scrolled away at the top and left ninety per cent of the page a flat document. It cost 183 KB of gzipped vendor code to buy a first impression that ended where the reading began. To a visitor deciding whether this studio should build their site, that reads as "we installed a 3D library". It does not read as art direction.
What we built
The scene was rewritten as a single fragment shader on one fullscreen triangle, rendered by OGL with surgical imports rather than a whole engine. More importantly, the contour field stopped being the hero's decoration and became the page's ground. One fixed canvas now persists across the whole document, and its state turns with the site's three acts: dense gold contours on ink, a whisper of navy topography on paper, gathering again for the dark close. Scroll position drives the transition and scroll velocity bends it, so the field reacts to how fast you are reading and not only to where you are. The pointer raises the terrain toward the cursor.
Two constraints shaped the rest. The shader compiles from one source into both GLSL dialects the web still ships, ESSL 1.00 and 3.00, because a WebGL1 context and a WebGL2 context disagree about syntax this code needs. And where there is no GPU to spare, a 2D-canvas tier runs the same wave mathematics instead, so a phone gets a designed fallback rather than the desktop with its heart removed. A frame-time buffer steps resolution down before a visitor can see jank, and the floor tier stops the loop and leaves the field settled. Degradation ends in stillness, never in a slideshow.
Where it stands
The craft now carries the whole scroll instead of the first screen, and the port removed more bytes than it added. The renderer is 36 KB of OGL modules against 183 KB of three.js — gzip -9, file by file, the way the edge serves them to a client that will not take brotli. On the brotli path both numbers fall and the gap narrows: 31 KB against 151 KB. Either basis is a real saving; mixing the two, which an earlier version of this page did, is not a measurement. No script file blocks first paint anywhere on the site — the only classic script in any <head> is the inline reveal bootstrap, which is under a kilobyte and is what keeps the page readable when JavaScript fails. So a visitor never waits on the decoration, and a buyer who opens the network panel finds the numbers where this page said they would be.
Two failures shipped during the work and are worth publishing, because a case that only lists wins is a brochure. A shader compiled cleanly on the fallback path and not on the main one, so the field went black on exactly the hardware it was written for — the dual-dialect compile above is the fix. And an edge cache served a broken build from behind a fixed one for four hours, which is how long this zone holds a browser cache TTL. Both are in the commit history under their own messages.
Checkable figures
- 36 KB
- of renderer, gzip -9, replacing 183 KB of three.js
- 2
- shader dialects compiled from one source: ESSL 1.00 and 3.00
- 0
- render-blocking script files, site-wide
Deliverables
Stack: OGL · GLSL · GSAP ScrollTrigger · Lenis · Cloudflare Pages
This is the studio's own work.
Client engagements go up with a name and an agreed figure, or they do not go up. Two are signed and in production.
Start a project