20 Open-Source Repos Assemble an Animation Studio; $0 Is Just the Entry Ticket

renproton lines up 20 open-source repositories into an animation production pipeline, from first frame to final export, priced at $0. The original tweet includes a preview of the finished video—watch the footage first, then look at the list.

This list covers animation, shaders, characters, audio, capture, review, and encoding. It is like breaking a motion design studio into replaceable parts. Motion design means using graphics, text, and movement to make an idea clear; product launch videos are a common use case. The tools are free; delivery is not.

1. Remotion: Build videos with React.
2. Anime.js: Timelines, easing, and motion choreography.
3. Scene.js: CSS keyframes and animation sequences.
4. Konva: Layered 2D graphics and animation.
5. Pencil2D: Frame-by-frame drawing and animation.
6. Zdog: Pseudo-3D illustration.
7. Three.js: 3D scenes, lights, and cameras.
8. Filament: Physically based lighting and rendering.
9. ozz-animation: Skeletal character animation.
10. Planck.js: 2D physics and collisions.
11. regl: Custom WebGL visuals.
12. WebGL Noise: Procedural shader effects.
13. meshoptimizer: Make 3D models lighter and render faster.
14. MeloTTS: Multilingual voiceover.
15. RNNoise: Neural-network noise reduction.
16. Rubber Band: Audio stretching and pitch shifting.
17. OBS Studio: Screen recording and capture.
18. OpenRV: Shot playback and review.
19. Mediabunny: In-browser video processing.
20. FFmpeg: Encoding, compression, and delivery of the final video.

Installing all 20 libraries is unrealistic. A project first has to decide who moves first in a shot, how long it holds, and where the viewer should look. renproton's list solves “what to use”; beamnxw's article fills in “how to get an agent to work frame by frame.”

In the article, beamnxw uses Claude Opus 5.5 to run a motion engineering workflow. The key move is breaking down the frames of a reference video. Asking a model directly to “generate a cool video” easily produces emptiness. First use ffmpeg to extract 2 images per second for an overview, then inspect frame by frame around key actions. The model must output REFERENCE.md, recording the source timestamps and frame numbers for entrances, landings, holds, and cuts; object bounding boxes; motion direction, duration, scale, opacity, and overshoot; and the order in which the product, title, and supporting labels appear. Measured values, eyeballed values, and creative choices should be labeled separately.

Next, write BRIEF.md: goal, audience, opening copy, closing copy, canvas 1080x1080, 30fps, 600 frames, asset list, layout coordinates, colors, animation curves, and sound events. The article gives an example timeline: at frame 195, export is pressed; at frame 210, the completed file appears; at frame 234, the result label is fully readable; at frame 420, cut to the closing. At 30fps, a 0.6-second entrance is 18 frames, a half-second move is 15 frames, and an 8-frame reading window is only 0.27 seconds. Write numbers in seconds first, then convert to frames; when timing changes, only one set of constants moves.

Remotion's role here is to turn video into React components. The picture is driven by the current frame number; useCurrentFrame() determines element position, scale, opacity, and product state. For random variation, use a fixed seed so the same frame does not render different results. Use spring for entrances to tune damping, stiffness, and overshoot. First render key still frames to check text wrapping, margins, and product UI readability, then render partial intervals to check transitions. Sound is also aligned to frames: the press sound aligns with frame 195, the result-reveal sound aligns with frame 210, and the closing music lands at frame 438. The article also provides a correction template: position, observed problem, what to change, and what to keep unchanged. For example, if the cursor covers the result label, change only the cursor path after the press, keeping the pressed frame, reveal frame, card geometry, and copy.

The appeal of this workflow to developers is reproducibility. For nontechnical readers, frame numbers are the time scale, and BRIEF.md is the shooting script. AI can write scripts, calculate frames, and generate previews, but whether “the viewer has time to finish reading” depends on a person watching the playback. As one commenter pointed out, reading dwell time is the most underestimated part; many launch videos flash their titles faster than the human eye can finish reading. That judgment is closer to the delivery problem than the tool list is.

The article packages a 20-second launch video as a small product: one feature, one script, one 1080x1080 MP4, one cover, and one round of revisions, with an example pilot price of $150. This price is only a test price in the article; don't treat it as the market price. It illustrates one thing: open-source tools push production costs close to zero, and what buyers pay for is the shot list, rework, and on-time delivery.

Licenses must be checked separately. One reply said these libraries are all MIT and safe for commercial use. That cannot be generalized. Remotion's README states it has a special license, and some commercial scenarios require a company license; FFmpeg's codecs and distribution also depend on how it is built and used. Check each LICENSE before launch, and don't treat “open source” as “unrestricted commercial use.”

Bookmarking these 20 links is useful. More useful is to pick one product action, clearly write the start state, press, result, and hold, then render a version. The toolchain is $0; the shot list and rework are not.

Sources:
renproton original tweet
beamnxw article
beamnxw quoted tweet