Building an AI motion-design studio with Claude Code and 15 open-source repos

Promix @PromixyzOriginally posted 2026.10.23

Open original on X

it's f*cking gold Claude Code can turn 20 motion design skills into an AI video studio 15 GitHub repos for building animations, rendering scenes, generating visuals, and exporting finished MP4s BUILD THE MOTION DESIGN BRAIN 01 Motion Design Agent Skills https://github.com/lottiefiles/motion-agent-skills → reusable motion design skills for AI coding agents 02 Remotion https://github.com/remotion-dev/remotion → generate videos programmatically with React 03 Motion Canvas https://github.com/motion-canvas/motion-canvas → create animated scenes with TypeScript ANIMATE THE INTERFACE 04 Motion https://github.com/motiondivision/motion → animate UI elements, layouts, and transitions 05 GSAP https://github.com/greensock/GSAP → build precise timelines and complex motion sequences 06 Lottie Web https://github.com/airbnb/lottie-web → render vector animations in the browser BUILD CINEMATIC SCENES 07 Three.js https://github.com/mrdoob/three.js → create 3D environments, lighting, and camera movements 08 React Three Fiber https://github.com/pmndrs/react-three-fiber → build reusable 3D scenes with React 09 Theatre.js https://github.com/theatre-js/theatre → animate cameras, objects, and scene properties with visual timelines GENERATE VISUAL ASSETS 10 SVG.js https://github.com/svgdotjs/svg.js → generate and manipulate vector graphics 11 Fabric.js https://github.com/fabricjs/fabric.js → compose editable graphics and canvas elements 12 Rough.js https://github.com/rough-stuff/rough → create hand drawn visual effects and illustrations RENDER AND EXPORT 13 Puppeteer https://github.com/puppeteer/puppeteer → automate browser based scene rendering 14 FFmpeg https://github.com/FFmpeg/FFmpeg → encode frames, synchronize audio, and export video 15 Sharp https://github.com/lovell/sharp → process images and prepare assets for rendering HOW TO REPLICATE Create a Remotion project npx create-video@latest Give Claude Code this prompt: Build a 20 second motion design video using Remotion Use a 1600×2000 canvas at 60 FPS Create five connected scenes with animated typography, moving data panels, and smooth camera transitions Keep all text readable and prevent overlapping elements Render a final MP4 and inspect the output for visual errors Start with Motion Design Agent Skills for animation guidance Use GSAP or Motion Canvas for precise timing, Three.js for dimensional scenes, and FFmpeg for final processing the part worth saving You don't need 15 separate AI agents generating disconnected clips You need one coherent scene system with reusable animation components, consistent timing, and a reliable rendering pipeline 15 GitHub repos covering the infrastructure of a programmable motion design studio should I write the full Claude Code video production guide?

This post quotes another post: x.com/promixyz/status/2102424036416348494