Video can be built like a webpage: 20 open-source libraries and a rendering pipeline

eigen posted a list on X with a very direct title: 20 open-source skills covering animation, shaders, characters, audio, and export. The projects range from Remotion and Three.js to FFmpeg, and all links open directly.

The list itself is highly worth bookmarking, but the harder judgment in the original article is: when models generate motion videos, the key lies in code drawing each frame over time. Browser rendering, FFmpeg encoding. Video therefore becomes programmable animation.

A function seek(t) determines the image at a given moment. A 25-second video at 30 FPS has 750 frames. To render frame 600, you do not need to run the previous 599 frames first. This constraint changes the production workflow: no randomness dependent on the previous frame, no timer-driven CSS transitions; every visible property is calculated from the timestamp.

The original article is bylined by a visual effects supervisor from a motion studio with more than 200 regular clients. It breaks the system into six parts: Brief compiler, scene engine, renderer, quality control, variant generation, and delivery. The tool stack does not need all twenty repositories. Remotion handles React components and parameterized rendering, Playwright controls the browser, and FFmpeg encodes. Remotion Agent Skills can be installed with npx skills add remotion-dev/skills. HyperFrames is another optional direction.

The 20 open-source projects are here:

The word skills can easily be misunderstood. The model does not come with 20 kinds of video magic. These are open-source libraries and tools, each with its own responsibility. One commenter put it directly: 20 skills sounds great until you have to maintain them; Remotion and FFmpeg do the heavy lifting, and the rest is nice-to-have. This judgment aligns with the tool stack choice in the original article.

The original article does not treat the first version's result as the final result. It requires staged checks: storyboard, timing, phone size, brand and facts, full video and audio. The agent cannot just say the animation looks good. It has to deliver an inspection report: which timestamps were reviewed, what problems were found, how they were fixed, and what risks remain. Mable Joseph's 45-second hand-drawn animated short is used to illustrate that one generation does not equal a finished cut: 163 model calls, hours of work.

The variant matrix is another easily overlooked part. 3 hooks × 3 aspect ratios × 2 CTAs equals 18 exports. Portrait and widescreen cannot just be cropped; layout rules must be calculated for the target aspect ratio. Cache unchanged logos, fonts, audio, and backgrounds, and re-render only the parts that need to change.

For the commercialization part, the original article gives a hypothetical quote: a $750 launch package with fixed scope, fixed aspect ratio, and fixed revision rounds. It explicitly says this is an example, not a market price or a revenue guarantee. Remotion has commercial license restrictions; teams of three or more and certain automation scenarios need to check the current terms. Rights for client logos, fonts, music, and sound effects also need to be confirmed.

What to do first: a 25-second product dashboard video. Four scenes: opening title, UI interaction with a cursor, data or feature animation, product logo and CTA. First make this one actually look good; then make text, images, colors, and timing into configuration data; then add a second aspect ratio, a third aspect ratio, and different hooks. Automating a mediocre animation only gets you more mediocre animations.

Video changes from a one-off piece into a configurable asset. The focus is on turning repeatable production into software. Replacing a designer with a single prompt is another matter.