The 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.
−152 KB gzipped, and the 3D got bigger
The problem
The first version made the mistake that argues against a studio rather than for it: a three.js scene behind the hero that scrolled away at the top, leaving ninety per cent of the page a flat document. It cost 184 KB of gzipped vendor code to make a first impression that ended where the reading began — and to a visitor deciding whether this studio should build their site, it read as "we installed a 3D library", not 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 instead of a whole engine. It stopped being the hero's decoration and became the page's ground: one fixed canvas whose 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 — driven by scroll position and velocity. The pointer raises the terrain toward the cursor. Where there is no GPU to spare, a 2D-canvas version of the same wave maths runs instead, so a phone gets a designed tier rather than the desktop minus its heart.
Where it stands
The craft now carries the whole scroll instead of the first screen, and the port removed more bytes than it added: 31 KB of OGL modules against 184 KB of three.js, both gzipped per file as the edge serves them, plus zero render-blocking scripts site-wide. 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 and were caught in the process — a shader that compiled only on the fallback path, an edge cache that served a broken version behind a fixed one — both recorded in the commit history.
Checkable figures
- 31 KB
- of renderer gzipped, replacing 184 KB of three.js
- 2
- shader dialects compiled from one source: ESSL 1.00 and 3.00
- 0
- render-blocking scripts, 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