Short motion videos built in code from my proof pages

What It Is

Signal to Build is a series of posts about work I build in response to a company's signal. A signal might be a launch, a hiring post or a founder's post. I find the problem behind it and build something that solves part of it. Each item has a proof page on this site, and that page holds the full document with the research, the plan and the numbers. Each item also gets a written post and then a short video, and this page holds every one of those videos.

Each video runs 30 to 40 seconds in 16:9, with music and on-screen text and no voiceover. Every screen in it comes from the item's proof page, and every video links back to that page.

Why I Built It

The work behind each item lives in a long proof document. A tracking plan or an account list takes a few minutes to read, and most people scrolling a feed will not open one. A short video shows the signal, the problem and the result first, so a reader can decide whether the full document is worth their time.

I also wanted every video in one place. LinkedIn and X bury a post within days. Hosting the files on this site keeps them all playable on one page, with no suggested videos or ads around them.

What It Does

I build the videos with a motion kit I made on Remotion, a tool for making video with code. A capture script loads each proof page in a headless browser and saves the page's real text, layout and images. The kit animates that capture, so a video never shows a table, number or sentence the page does not contain.

Each video starts as a brief with the story, the lines of text, the scenes and the music. Read in order, the lines have to tell the whole story to someone who has never heard of the company. Twenty styles keep the series varied, and the filter above the gallery lists the ones used so far. I took each one apart from a different launch film and rebuilt it as its own template in my site's colours and type. The music comes from a library of 48 licensed Mixkit tracks, more than two for every style, so two videos in a row never share a track. A few tracks open quietly, and the kit starts each of those where its music picks up.

Before a full render, the kit renders one still for each line of the story and lays them out on a single sheet. I check every sheet for exact wording, type sizes, margins, highlights and colours, and a video renders only after its sheet passes. A render script then renders the video, brings the music to the same steady loudness in every video, and saves a sheet of frames for a last look.

A publish script connects the motion kit to this site. One command takes the newest render, encodes a web copy and a poster frame, and writes the video's entry into a manifest file. This page builds its gallery from that manifest, newest first, with a filter for each style. A video loads only when someone presses play, so the page stays light as the gallery grows.

What It Taught Me

A video can pass every still and still break in the full render. The PostHog video looked right on its review sheet. In the full render, its screenshot cards flickered between the whole card and the caption alone. The kit renders frames in parallel browser tabs, and a plain image tag does not make a tab wait for its image to load. I now draw every screenshot with Remotion's own image component, which holds the frame until the image is ready, and I scan each finished video frame by frame for flicker.

Poster frames taught me a smaller version of the same lesson. A fixed timestamp gave some posters half-typed lines or empty screens, so I now pick each poster from a finished moment in its video.