Home › Work
The teardowns are the portfolio.
Most studios show you a wall of pretty screenshots and ask you to trust that the site underneath is any good. We would rather show you what we can measure — including on work that is not ours, and including where our own is still short.
Case 01 — Forensics
We took the best site in the category apart, byte by byte.
The benchmark is a genuinely excellent-looking agency site. We fetched every asset, probed every container and measured three pages until the request count stopped growing. It is beautiful, and underneath it is 33 megabytes.
What we measured
Their home page is not the two megabytes it feels like. It is 34,936,268 bytes fully loaded — a number that only exists because nobody on that project ever ran the measurement. Nothing about the design required it. The media budget is the entire budget, and it was never set.
| Defect | Measured | What it costs |
|---|---|---|
| Metadata at the end of the file | 19 of 22 videos, moov at 97.9–99.9% | A controlled A/B put first frame 19.7× later. The player must download almost the whole file before it can start. |
| Duplicate frames in an image sequence | 57.7% of 10,421,204 B | Over half the largest asset on the site is frames that are byte-identical to the one before them. |
| Animated container around a single frame | 38 B of container | Those 38 bytes force a still image down the animated-WebP path and cost 258,982 B. |
| Audio track on a muted element | 316 kbps AAC | 304,964 B of audio that no browser will ever play, because the element is muted in the markup. |
| Loading animation shipped as GIF | 506,807 B / 0.87 s | A 4.66 Mbit/s spinner. The same motion as H.264 is under 40 KB — a 12× overage by construction. |
| No poster on any video | 0 posters | Every video area is empty until enough of the file arrives. ~10 KB each would have fixed it. |
| Third-party tags | ~171 KB, 8–10 requests | Identical on all three pages, and none of it is their own code. |
| Their CSS budget | 11,994 B brotli | Genuinely good, and worth saying. They pass every budget a framework set for them. |
What we did with it
The teardown produced a weight budget with 15 asset classes and a hard byte ceiling on each, plus a script that refuses a build on violation. Applied back to the benchmark, it fails 12 of the 15 — and it fails in exactly the places where a human hand-wrote an asset, never where a build tool decided for them. That is the useful finding: this is not a talent problem, it is a missing-measurement problem.
We also took the good parts seriously. Their radius grammar — capsule for anything interactive, one radius for containers, another for nested cards — is strict enough to read as a brand without using colour at all. We stole it, and you are looking at it.
Case 02 — Realism
Thirteen statistics designed to catch a render pretending to be a photograph.
"Photorealistic" is the emptiest word in 3D. So we built the tests that decide it — sensor noise structure, highlight clipping behaviour, edge response, speckle density — and calibrated them against eight real studio photographs chosen for genre match.
The result, including the part we did not like
Our best frame sits inside the measured range of real photographs on 11 of the 13 statistics. The control scene managed 8 of 13 before this work and 10 of 13 after it. Those are counted by a script, not by eye.
The honest half: the two it misses are chroma noise and highlight clipping, and the reason the remaining gap matters is that it is not statistical at all. What separates our renders from a photograph now is light transport that is structurally absent — no object reflects another object, no colour bleeds between surfaces, a glass block casts no caustic when a real one always does. A histogram cannot see a missing light path. A person can, instantly, without being able to name it.
We publish that because it is the actually useful part. A studio that only shows you its wins is telling you what it wants you to think, not what it knows.
Case 03 — Pipeline
Four hero assets, rendered on a plain CPU, with no stock licence anywhere.
No GPU, no render farm, no plugin ecosystem, nothing bought from a marketplace. A software rasteriser on an ordinary server, driven by a script that produces the same bytes every time it runs.
| Property | Spec | Why it matters to you |
|---|---|---|
| Source resolution | 1500 × 1500, 24 fps | Enough to downscale for any hero without softening. |
| Loop seam | Byte-identical, 99.0 dB | The wrap is invisible. Most agency loops visibly jump, and once you see it you cannot unsee it. |
| Determinism | 0 animation-frame calls | Re-render it in six months and get the same frames. No "we lost the project file". |
| Delivered hero loop | 326,794 B AV1 / 264,195 B H.264 | Both inside the 400,000 B ceiling, with a fallback for every browser. |
| Poster | 19,722 B WebP | The hero is correct at first paint, before a single frame of video has arrived. |
| Render cost | 29.62 s per frame | Slow, and entirely ours. It costs machine time instead of a licence with a renewal date. |
Why not WebGL in the browser
Because we measured it. A runtime 3D scene ships roughly 170 KB of library before a single line of your scene, then pays shader compile, GPU load and per-device variance — and it caps your art direction at whatever fits in a 16 ms frame. The pre-rendered loop above is lighter than the library alone, runs on hardware video decode, and let us spend as long as we wanted on the lighting. Video is zero bytes of JavaScript.
Case 04 — This site
The last case study is the page you are on.
It would be absurd to sell measured delivery from a bloated website, so this one is built to the budget it argues for, and the whole build is written down.
- Two typefaces, self-hosted and variable, declared with real @font-face rules and preloaded. Nothing here falls back to a system font.
- Zero third-party requests. No analytics, no tag manager, no font CDN, no cookie banner — because there is nothing to consent to.
- Zero render-blocking JavaScript. Every word on this page is in the HTML source. Turn scripting off and you lose one fade-in.
- Layout shift engineered to zero by giving every image and the hero stage an explicit aspect box, rather than measuring it afterwards.
- The hero video is not downloaded until it is on screen, and never at all if you have asked your system for reduced motion.
The build log — every gate, every measured value, the nginx block and the exact go-live steps — is kept with the source. If you hire us, you get that document for your project too. It is the deliverable that outlives the launch.
Want this done to your competitor?
Send one URL. You will get the real page weight, the encode defects and the list of things their agency got wrong — the same treatment as Case 01.