Screen recordings as HTML, not video
The recordings on this site aren't videos. They're the real page, recorded as HTML: its HTML and CSS once, then every change to it, played back by the browser. Here are four of them both ways. Flip between video and HTML, zoom in, or go full screen, where the difference shows most.
A letter
Text, scrolling: the screen changes all the time, and video pays for every frame of it.
…
smaller as HTML
Video
…
HTML
…
HTML…
Zoom and highlight
The camera moves in on the issue being ticked, then on the line it adds to the letter. Watch the video blur as it gets close.
…
smaller as HTML
Video
…
HTML
…
HTML…
AI chat
Typing, and a live model’s answer. Mostly still, so the video stays small, and the HTML is smaller still.
…
smaller as HTML
Video
…
HTML
…
HTML…
A busy screen
A two-panel app with a lot on screen at once.
…
smaller as HTML
Video
…
HTML
…
HTML…
What each file holds
- Video: every pixel of every frame, 60 times a second
- HTML: the page once, then only what changes: a click, new text, a scroll
- A still screen costs the HTML almost nothing. Its size follows the changes, not the length or the resolution
- Text compresses well on the way to the browser. Video is already compressed, so it goes as it is
Why it's better
- Sharp at any size. The browser draws the text, so zoom in and it stays crisp
- Exact colours. Mac browsers shift the colours of video; HTML matches the page around it
- Editable after recording. Captions timed to clicks, zooms and highlights, without another take
Where it doesn't work
- Only web UIs: anything drawn on a canvas, like a game, doesn't record as HTML
- It records what is in the page, hidden values too, so check it before you publish
- It isn't a file you can post to social media; for that you still need a video