Reel

A recording is a list of what happened

A screen recording of the Tabkin demo at 30 frames a second would be 600 pictures. Reel's recording of it is ten commands, such as setSplit, each with the millisecond it happened at. To play it, Reel starts the real app and hands it those commands at the right moments, which is why you can stop anywhere and the thing on screen still works.

Reel records commands and not pointer movement or key presses, so the pointer and the typing you see are drawn from the recorded commands and were never a recording of a real hand.

Tabkin and Relaymoth, the two products in the window, are invented for this page, and their data is synthetic, with no real people, receipts, endpoints or accounts behind it.

Any moment can be drawn, compared or copied

A moment of a video is a picture. A moment of a Reel recording is a whole state of the app, and that lets the player above do three things a video player cannot. Move a mouse along its timeline and it works out the state at each moment and runs the app on it, small, beside a list of what differs from the moment on screen. On a wide screen, Compare holds one moment and outlines in the app every value that has changed since. Take over makes the state on screen your own working copy.

Taking over is a copy and nothing more. Reel writes the state out as data, reads it back into a new session, and gives that session an empty log of its own. Your commands go to that log. The recording is never written to, and the figure lets you check that for yourself.

Seeking is a checkpoint and a short replay

Showing a moment means rebuilding its state. Replaying every command from the start takes longer as a recording grows, so Reel stores the state every 256 commands and replays from the nearest stored one. On a generated log of 20,000 commands that brings the wait at the 95th percentile from 1,130 ms to 23 ms. On the real 10 command recording on this page it gains nothing, at 3.5 ms with checkpoints and 3.1 ms without.

Checked against a replay, and against a second model

A seek is right only if it gives the same state as playing from the start. That was compared at 5,332 positions across 4 logs and both scenes, with 0 mismatches. A comparison like that cannot see a bug in the reducer, because both sides share it, so the money is also checked against a separate model written with BigInt.

To find out whether the checks would notice anything at all, 14 bugs were written in on purpose. All 14 were caught, and 6 of the 6 reducer bugs were caught only by the separate model.

Take the viewer with you

Export writes a folder of static files that needs no backend. Its poster page has no script, so an iframe of it costs one small page, one stylesheet and two fonts until someone presses play. The player and both scenes come to 115 KB of JavaScript and CSS with gzip.