Video About Making Videos
This page is the video. Every frame is HTML and CSS drawn by your browser, and the player sets the page's animation clock to each frame's timestamp, the same way the mp4 version was recorded.
1280 × 720 · 30 fps · 2,239 frames · made with Claude Sonnet 5.5
Transcript
IntroThis is a video about making videos. This one was made by a web page.
PageStep one is the page. HTML lays it out, CSS does the motion, and SVG draws the lines. None of it is drawn frame by frame.
ClockStep two is the clock. A browser animates in real time. For video, I pause its clock, set it to one frame's timestamp, and take a screenshot.
EncodeStep three is encoding. The screenshots stream into ffmpeg as PNGs, two browsers each handling half the video, and the voice is mixed in at the end.
CheckStep four is checking. I pull frames back out of the file and look at them, because a video that renders is not the same as a video that works.
CounterThe frame counter in the corner is a CSS animation. No script writes it. The browser counts up to the last frame, and the capture script checks the number on every screenshot.
EndThat is the whole process. Page, clock, encode, check.