All workCase study · 2026

Highlights

A full match in, a highlight reel out. Cut and encoded in the browser, so the video never leaves the computer.

RoleEverything: product, design, code, ops

StatusLive, free, no account

StackReact, Mediabunny, WebCodecs

Linkhighlights.qivoa.app ↗

Highlights clip review: 65 clips from a real match with thumbnails, start and end controls and a timeline

65 clips · same as the scriptKickoffs mapped from match clock to video time

The brief

Veo films the match and lists every highlight with a timestamp. Turning that list into a reel you can send shouldn't need an editor, an upload or an account.

Input: A two-hour match file and a Veo list
Output: One MP4 in 16:9, 9:16 or 1:1
Rule: No upload, no account, no backend

Measured on my own match

2:06

to cut 65 clips from a 4.3 GB, two-hour match into a 14:26 reel. About 7× faster than real time.

Input: 4.3 GB · 1080p H.264 · 2:03:24
Output: 1.1 GB · 1080p H.264 + AAC
Machine: MacBook Pro M4 Pro · Chrome
Uploaded: 0 bytes

Run through the app's own export at original quality, written straight to disk.

Highlights exporting the reel: progress, time left and each clip's status

Streamed to diskNever held whole in memory

How it works.

All in the browser tab

01
Read in place
Mediabunny reads the MP4 index, then only the byte ranges each clip needs, straight from the picked file. The 4 GB file is never loaded whole.
02
Decode in a worker
A Web Worker decodes each clip with WebCodecs while the page stays responsive. Audio is trimmed to the sample, so every cut lands on the clip's edge.
03
Reframe and encode
Vertical and square reels are cropped, or fit with blurred bars, on an OffscreenCanvas. Encoded as H.264 and AAC, with other codecs as fallbacks.
04
Stream to disk
Positioned writes go straight into the file you picked, through the File System Access API. A long reel never fills memory, and a cancelled export is discarded.

Decisions

Trade-offs I'd make again.

01
Script first, browser second.
It started as two Node scripts around ffmpeg on my Mac. Kickoff sync, padding and merging were proven on real footage before there was any interface.
02
Tested the port against the original.
A unit test feeds a real Veo list to the web parser and checks it produces the same 65 clips as the script's own dry run.
03
No backend, on purpose.
Static files on nginx. A 64 KB request limit and a strict Content Security Policy mean a video can't be uploaded, even by mistake.
04
Exact cuts over instant ones.
Copying untouched video between keyframes would export almost instantly, but cuts would snap to the nearest keyframe. This version re-encodes so every cut is exact. At about 7× real time, that trade is worth it.