kerf
“Who broke checkout?” launch film
A failing checkout, bisected on the beat to one commit and one line, then shipped green.
The brief, the idea and the craft
Brand
kerf is a CLI and editor extension that runs your test suite against every preview deploy. When something breaks, it bisects the branch and points at the exact line. A kerf is the width of the cut a saw leaves: one narrow cut through your history, between the last green commit and the first red one.
- Look: smoked graphite #141216 behind a slow satin-chrome surface whose narrow highlights carry the two accents, rose #F4A3C4 on the left flank and sky #94C4F5 on the right. Rose is only ever a line: the prompt chevron, the caret, the bisect cut, the gutter mark, the cut in the logo.
- Type: Host Grotesk (headlines, UI) and JetBrains Mono (code).
- Mark: a disc split by a vertical kerf, with the right half dropped by the width of the cut. It reads as bisect, cut and diff at once.
Brief
Make code look beautiful for a dev-tool launch on X and Product Hunt:
- A hook in under 2 s: a terminal command typed and run, with type and UI on the same line.
- A typed terminal with ANSI output and progress.
- An editor diff where the changed line morphs.
- Tests and deploy resolving.
- An honestly labelled benchmark chart.
- A dark glossy 3D background.
- An end card with
npm i -g.
16:9 primary, a rebuilt 9:16, and a silent grid loop.
Format
kerf-launch-16x9.mp4: 1920×1080, 30.0 s, 30 fps (primary).kerf-launch-9x16.mp4: 1080×1920, 15.0 s, 30 fps. Rebuilt, not cropped:- stacked hook
- phone-width terminal, with hero lines of 30 characters or fewer
- a vertical bisect with alternating SHAs and the culprit card in the lower third
- the fix wrapped over two lines
- vertical benchmark bars
- a stacked end card
- copy inside the Reels/TikTok safe zones
kerf-loop.mp4: 1920×1080, 8.0 s, silent, seamless (the bisect cut as a cycle).
What makes it work
- One metaphor, and the brand is the metaphor.
- The bisect is drawn as a literal cut through history.
- The same rose line is the cut in the logo, the gutter mark and the prompt chevron.
- The end card closes the two halves on that line.
- Code reads where it matters, and only there. Every shot has one story line at ≥ 40 px: the command, the result line, the changed line. Everything else is dimmed texture. The windows grow with their content, so no frame is a half-empty terminal.
- Numbers that reconcile.
- 1,843 + 3 = 1,846.
- 14 commits take ⌈log₂ 14⌉ = 4 bisect steps, and the ✗/✓ results match the ranges 14 → 7 → 3 → 2 → 1.
- 41.8 s + 1m 52s = 153.8 s = 2.6 min, and 38.7 / 2.6 = 14.9 → "15× faster".
- Oct 22 2026 is a Thursday.
- A believable CLI.
- A path + branch + chevron prompt, human-cadence typing and output in bursts.
- A progress bar that stalls and catches up, and timings in dim parentheses.
- SHAs in one consistent colour, and a version banner.
- No green-on-black "hacker" look.
- An ownable dark. Not black plus one neon accent: warm graphite and satin chrome, with a two-accent system that is literally the colours of the material's highlights.
- Honest benchmark. It is labelled illustrative on screen, uses "CI reruns" / "git bisect" instead of competitor names, and the badge is the ratio of the numbers shown.
Production notes
Structure (16:9, timestamped; 120 BPM, a bar is 2 s, cuts on downbeats)
| Time | Beat |
|---|---|
| 0.0–1.5 | Hook: "Who broke checkout?" next to a live prompt pill, already mid-typing on frame 0 (❯ kerf te▌). Enter on 1.3 s. |
| 1.5–6.0 | |
| 6.0–10.0 | "Cut to the commit." The 14 commits sit on a branch line. A rose cut drops on each beat (✗ d26f19b, ✓ c03d6a1, ✗ 9c41e7a, ✓ 5e8a4c7), each with a result chip, and the counter goes 14 → 7 → 3 → 2 → 1. Push-in to 1.35× on the culprit, then the card: 9c41e7a first bad commit, "refactor: share totals helper across cart + invoice", Lior Ben-Ami · Thu Oct 22. 4 steps · 1m 52s. |
| 10.0–16.0 | "Down to the line." The editor is tight on tax.ts. Line 48 carries the kerf inlay first bad 9c41e7a and turns red. Apply fix ⌘↵ is pressed and the line morphs from return round(subtotal * rate); to return sum(lines, (l) => round(l.net * rate));, holding 2.6 s. |
| 16.0–20.0 | "Green before it ships." The fixed line stays on screen as a strip, its status reading "rerunning 3 tests…". Under it, a one-line terminal grows as the recalled command reruns: ✓ 1,846 passed 0 failed (39.2s). The strip flips to ✓ 3 tests pass, then ✓ Promoted pr-2207 → production (11s). |
| 20.0–26.0 | Benchmark on a flat paper card, "Time from push to the breaking commit".
|
| 26.0–30.0 | End card: the cut line drops and the two half-discs close on it on 26.0. Then "kerf", "Find the commit that broke it.", $ npm i -g kerf and kerf.dev · v1.0. Static hold from ~27.4 s. |
9:16 (15 s): hook 0–1.5 · terminal 1.5–5.0 · bisect 5.0–8.0 · editor diff 8.0–11.0 · benchmark 11.0–12.8 · end card 12.8–15.0 (hit 12.8 s, settled by 13.6 s).
Deliverables
- Masters:
kerf-launch-16x9.mp4·kerf-launch-9x16.mp4·kerf-loop.mp4(H.264 + AAC, faststart, Concept metadata; the loop has no audio). - Web copies:
*-web.mp4(< 25 MB). - Checks:
loudness.txt(LUFS and true peak, as delivered and after an AAC 256k re-encode)loopcheck.txt+seam.jpg
Audio
Original score and SFX (Glint Studio, synthesized in-house).
- Bed: a modern, precise 120 BPM F-minor bed cut to the edit:
- a muted pulse under the typing
- the groove dropping on the terminal downbeat
- a half-time feel in the editor
- a filter-opening build under the rerun
- the lift on the benchmark (20.0)
- a stab on the badge
- a break, then an F major add9 end hit with a tail
- SFX on the exact frames of their UI events:
- mechanical keystrokes with human timing (10 variants plus space)
- an enter thunk
- spinner ticks
- a rising test-pass series locked to the progress bar's actual steps, so they thin out in its stalls
- a two-blip failure
- four rising metallic bisect cuts
- diff swipes
- the ⌘↵ key
- a bell deploy-success
- dull baseline bar grows against a bright hero bar grow
- Mix: −16.0 LUFS (16:9) / −15.9 LUFS (9:16) integrated, true peak ≤ −1.5 dBTP as delivered and after an AAC re-encode. The loop is silent.
Posters and stills
Credits and licensing
- Concept
Brand and data are fictional (Concept). kerf, Tidewell, Lior Ben-Ami, every commit SHA, test name, timing, deploy ID and benchmark figure were invented by Glint Studio for this portfolio piece. The benchmark is labelled on screen as an illustrative internal benchmark, names no real competitors, and its numbers reconcile with the rest of the film.
- Design, motion, code
Glint Studio. Terminal, editor, diff, bisect graph and benchmark were rebuilt in React/SVG and rendered with Remotion 4 (no screen recordings, no stock or AI imagery). The background is a code-built three.js surface (via @remotion/three) with a custom GLSL shader: a satin-chrome height field reflecting an analytic softbox strip. No HDRI and no downloaded textures or models.
- Fonts (SIL Open Font License 1.1, via the google/fonts repository)
- Host Grotesk (headlines, UI, wordmark): OFL-1.1, © The Host Grotesk Project Authors.
- JetBrains Mono (terminal, code, SHAs, timings): OFL-1.1, © The JetBrains Mono Project Authors.
- Audio
Music & sound design: original, Glint Studio (synthesized in-house). The loop is silent.
- Third-party marks
None. The terminal and editor chrome are drawn in code with neutral window dots (no macOS assets, no IDE, GitHub or npm logos).
npm i -g kerfappears as plain command text; thekerfnpm name was unclaimed at the time of the 2026-10-25 check.
A piece like kerf is the Launch Video package: US$990, fixed.
See the packages