20 Open-Source Repos Are Just Parts; What's Really Hard for a Motion Studio Is the Five Steps After

eigen listed 20 open-source repos on X with the direct caption: motion studio in 20 repos. The list covers React video engines, spring animation, 3D, audio, screen recording, and encoding/delivery. The video below is the finished example included with the post.

The list is worth bookmarking, but bookmarking alone misses the point. In the original long post, the author breaks Claude Opus 5.5's motion design workflow into six layers: Brief Compiler, Scene Engine, Renderer, Quality Controller, Variant Generator, Delivery System. The goal is very concrete: a product brief comes in, and out come a 25-second animation, 3 opening hooks, 3 aspect ratios, and 2 CTAs—18 exports in total. The next client goes through the same pipeline.

The technical foundation here is seek(t). 25 seconds at 30fps equals 750 frames. Frame f only computes the image at t=f/30; it does not depend on the previous frame or on CSS timers. The browser opens the page via Playwright, calls window.seek(frame/fps), captures frames, and hands them to FFmpeg for encoding. The animation can therefore jump to any point in time, and after changing text, colors, or layout, you rerender without regenerating the whole video. The original author calls this kind of output programmable animation.

For developers, this means animation properties must be written as functions of time. For ordinary users, it can be understood as video having templates and data like a webpage: title, logo, screenshots, brand colors, and CTA go in campaign.json, while animation components handle how things move. Change the CTA from Start Free to Book a Demo, change the data, rerender; need vertical, change the layout constraints. The original warns that vertical and horizontal formats should not share the same set of pixel coordinates; it's more like responsive webpages—share the narrative and pacing, but calculate composition separately.

The tool list is clearer when grouped by use.

Rendering and timelines:

• Remotion, a React video engine, suitable for making scenes into reusable components and batch rendering. link
• Popmotion, spring and keyframe animation. link
• Anime.js, timelines and easing. link
• Vivus, SVG stroke animation. link
• Fabric.js, editable canvas graphics. link
• Rough.js, hand-drawn vectors. link

3D and graphics:

• Three.js, scenes, lighting, cameras. link
• Threlte, declarative 3D for Svelte. link
• React Three Rapier, React rigid-body physics. link
• Mitsuba 3, physical rendering. link
• glslCanvas, real-time GLSL shader preview. link
• three-bvh-csg, 3D boolean operations. link
• OpenColorIO, VFX color management. link

Audio and lip sync:

• MuseTalk, audio-driven lip sync. link
• sherpa-onnx, offline speech and transcription. link
• Demucs, separate vocals and instruments. link
• howler.js, audio playback and spatial sound effects. link

Capture and delivery:

• OBS Studio, screen recording. link
• MoviePy, Python video editing. link
• FFmpeg, encoding and delivery. link

In the list, Remotion is the step for scaling. The original author recommends using Remotion's React components for animated titles, product screenshots, data visualizations, feature reveals, logo transitions, and CTAs, then passing different data into the same composition. In the post replies, someone said Remotion + Fabric.js feels like a pixar motion studio guy, and someone else said they are already using 7 of them, and that Remotion works wonders. Tools can stack up capabilities, but they can't stack up reliable delivery.

Reliable delivery depends on QC. The original lists five rounds of checks: storyboard, timing before and after transitions, mobile-size preview, brand and fact accuracy, full video and audio. FFmpeg can extract frames every second and stitch them into a contact sheet, but looking only at regular intervals misses transition moments, so you also need frames before and after each transition. One production rule from the original: Do not trust an agent who hasn't looked at the rendered output when they say the animation is good. Require review reports to specify checked timestamps, issues, fixes, and residual risks, and keep human sign-off before delivery. Fact-checking also happens here: if the client hasn't approved a conversion rate, the system must not make it up.

The monetization section is restrained. The original author does not recommend selling AI tools first; sell a finished package first: one product, one narrative, 3 hooks, 3 aspect ratios, 2 CTAs, delivered as MP4, cover frames, and an agreed number of revision rounds. The $750 starter package mentioned is a hypothetical number; the original explicitly says it is neither a market price nor a guarantee of revenue. What you should actually track is time to first design, time per variant, rendering and API costs, revision requests, delivery errors, and repeat purchases. The business only works if the system reduces repetitive production work without sacrificing quality. Remotion's commercial license also has conditions; teams over three people or certain automation setups should check the current terms.

If you start now, the original recommends doing one format first: a 25-second product dashboard. Four scenes: a strong opening title, a UI interaction with a cursor, a data or feature visualization, and product identity plus CTA. Do this one well first, then turn text, images, colors, and timing into configuration; after that add a second aspect ratio, a third aspect ratio, and backup hooks; only then add batch jobs and client-side controls. One line from the original is worth remembering: automating a mediocre animation only gets you more mediocre animations.

The 20 repos are components. seek(t), Remotion templates, structured briefs, QC, and the delivery matrix are the skeleton of that motion studio.