Case-Study Films for Phone and Desktop

This site's case studies used to open on captioned diagrams: a paragraph above the figure, a caption under it and numbered steps under that. The format dated from May 2026, picked to save page weight on an estimate that a film player would add 250 to 350 KB to every page. The player measured about 75 KB compressed, so I rebuilt the format around film.

The job posts I save ask for one situation, the decision made and a number, up front. A paragraph above a diagram makes a reader dig for all three. A film has to carry them in under half a minute, stay readable on a phone, and keep its words clear of the moving objects in every frame of a camera move.

Every film starts from the study's existing storyboard and runs in three acts, the problem, the system and the result, then holds its last frame as the poster, so a visitor who only sees the poster still gets the study. One continuous camera move carries the whole film. One sentence of eight words or fewer sits on screen at a time, with no more than 14 words visible in any frame. Color means the same thing in every film: orange is my move, gold is the result, magenta is the leak. The phone version is composed for a tall 720 by 1080 frame and the desktop version for 1280 by 720, each framed for its own screen instead of cropped from the other. Renders run on a rented graphics card, where a 390-frame render for one of the newer films took 22 seconds and cost about a cent. Then two checks run. Code reads every frame of both versions and fails any label, sentence or number that touches other text or a scene object. On the first film it found pointer lines crossing scene objects on 402 of 780 desktop frames, so labels now sit beside their objects with no pointer lines. A separate reviewer then watches each film beside the best animations from my own articles, which set the bar.

• Remotion compositions, one per screen shape
• Rendering on rented RTX 3090 GPUs
• Frame-by-frame label clearance check
• Separate reviewer against reference films
• Shared kit of world objects and one color code

The first film is live on the algorithmic trading study, in both versions. It plays once when it scrolls into view, holds its last frame and replays on tap. Its final check read all 780 frames of each version, and the separate reviewer still found a nine-frame overlap between two phone labels that the code couldn't see, which was fixed before it shipped. Films for 29 more studies are in production in five batches on the same kit.

Every new film reuses one kit of world objects, one color code and the same two checks, so each study starts from its storyboard and a pipeline that already works.

Measure a cost before trading quality for it. Here the estimate behind the diagrams was 250 to 350 KB a page, and the film player measured about 75 KB.