04 — Behind the build
The Lab
The part of campaign work clients don’t see until something breaks: what gets measured, what gets tested and how it ships. The numbers below are live from the three demos.
Live analytics
First-party, cookieless counters, recorded only for visitors who accepted analytics. GA4 receives the same events when it’s configured. Refreshes every 15 seconds.
Lighthouse
Every page, measured on the production site on 2026-11-05 with Lighthouse 12 (best of three runs each). Mobile is Lighthouse’s simulated mid-range phone on slow 4G, the harshest of its settings.
Index/
Shade Match/loreal-shade-match
Maison Lumière/maison-lumiere
Atelier Nº 7/atelier
The Lab/lab
Quality assurance
Playwright runs every suite on three device profiles for every push. A red cell blocks the merge.
| Suite | Desktop Chrome | Android · Pixel 7 | iOS Safari · iPhone 14 |
|---|---|---|---|
| Survey flowAnswers lead to the right fragrance, ties resolve, live distribution renders | ✓ Runs | ✓ Runs | ✓ Runs |
| ConsentNo event or Google script before opt-in; choice persists across reloads | ✓ Runs | ✓ Runs | ✓ Runs |
| Share cardCanvas renders and downloads a 1080×1350 PNG | ✓ Runs | ✓ Runs | Not applicable |
| Shade MatchFull game with real taps, misses freeze, score reaches the leaderboard | ✓ Runs | ✓ Runs | ✓ Runs |
| Scroll storyPage renders end to end and fires start and complete events | ✓ Runs | ✓ Runs | ✓ Runs |
| API & anti-cheatEarly, forged, replayed and impossible submissions are rejected | ✓ Runs | Not applicable | Not applicable |
Lightweight by design
Each demo ships only what it needs. Fonts load per page, and motion uses CSS wherever CSS can do it.
- 0 kBAnimation library on the scroll story. It runs on CSS scroll timelines.
- AVIFEvery photo is resized and re-encoded by the CDN to the exact size it is shown at, and lazy-loaded below the fold.
- 145 kBTotal compressed JavaScript for Shade Match, React and the WebGL swatch included.
- 0 cookiesUntil a visitor accepts. Google’s script isn’t even requested before then.
How it ships
GitHub Actions for checks, Vercel for previews and production, Upstash Redis for leaderboards and counts.
- 01PushEvery branch
- 02CITypecheck · build · Playwright × 3 devices
- 03PreviewUnique Vercel URL for client review
- 04MergeOnly when checks pass
- 05ProductionInstant rollback to any build
Scores you can trust
Campaign leaderboards attract cheaters within hours. Shade Match defends itself on the server.
- Rounds are generated from a seed inside a signed token, so the server can rebuild the exact game it dealt.
- The score is recomputed from the raw picks. The client never sends a score.
- The server’s clock decides whether the game lasted long enough. Each token can be used once.
- Pick counts beyond human reaction time are rejected, and every endpoint is rate-limited per address.