Video wird geladen...
Video konnte nicht geladen werden
this is pure f*cking treasure for motion design 20 GitHub repos to build a motion design studio with Opus 5.5 pick the tools for each layer: agent skills, animation, 3D, assets, sound and export 01 Remotion → turn React code into editable videos 02 Remotion Skills → give Claude... show more
22,774 Aufrufe • vor 2 Tagen •via X (Twitter)
30 Kommentare
could ffmpeg handle batch exports for multiple scenes at once here?
my substack: :)
amazing list bro, I'll check it today
these repo collection is a real fkng treasure
it really is a treasure
which repos do you use yourself?
This is how AI turns a pile of tools into an actual creative workflow, not just another chatbot pipeline
a brilliant find
treasure fr
Yeah, that’s really cool
20 motion design repos?? it is really alpha content mate!
最后天天用的估计还是 FFmpeg，别的都在收藏夹吃灰。
remotion skills and gsap skills give claude code official workflows instead of guessing syntax
wow this is actually amazing for motion design builders
mediabunny doing the encode in the browser is new to me
Pay attention to it
Having sound and export in the same list is handy. It's much easier to plan a finished demo when the workflow doesn't stop at the animation.
real treasure
bro I love this too
which one do you think is the best? maybe svgo
收藏夹又开了家工作室，作品还没一个
Twenty repos is a lot of tabs. Remotion plus Three.js probably covers most of it.
this list fucks
really useful repos bro
Think of the stack like a studio rig: each tool handles one stage, and a clean handoff from animation to sound to export matters as much as the individual tools.
thx for sharin
thanks for the selection. i'm going to install it.
remotion + opus 5.5 is a killer combo — open repos you can actually ship client work from are worth their weight in gold
remotion carrying the whole stack
I'm looking forward to even more GitHub links in the next post
![Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.](https://image.24vids.com/tw-2040495833846866104/amplify_video_thumb/2040494269941919744/img/l7wSWmCZuwFicAID.jpg)
![He creado desde cero un vídeo de motion design con Claude Sonnet 5.5. Está tan bien hecha que sospecho que hay un humano detrás editándome el vídeo. 😅 PROMPT ⤵️⤵️ You are a senior motion designer, creative director and render engineer. Your goal is not just to generate animation code, but to create a polished, professional motion-design video from concept to final render. ## PROJECT Subject: [SUBJECT] Goal: [WHAT THE VIEWER SHOULD UNDERSTAND/FEEL] Duration: [15–30s] Format: [16:9 / 3:2 / 9:16 / 1:1] FPS: 60 ## CREATIVE DIRECTION Create something premium, modern, editorial and visually memorable. Avoid generic AI aesthetics: - centered text on gradients - endless fade-ins - excessive glow - random particles - generic glassmorphism - repetitive zooms - unnecessary UI frames Something meaningful should visually evolve every 2–4 seconds. The first 2 seconds must contain a strong hook. Use strong typography, clear hierarchy, controlled colors and intentional composition. ## REFERENCES Study all files inside `./refs/`. If a reference video exists: - extract representative frames - analyze typography, colors, transitions, pacing and camera movement - create `docs/style_guide.md` Take the visual grammar, not the actual content. ## STORYBOARD FIRST Before coding, create `docs/shotlist.md`. For each shot define: - timestamp - visual - text - motion - transition - camera - sound cue Build rhythm through contrast: fast/slow, large/small, dense/minimal. ## MOTION Motion must feel physical and intentional. Prefer spring-based animation over simple linear easing. Use different motion weights for: - UI elements - cards - large typography - camera movement Preserve continuity between states whenever possible. Transitions should preferably emerge from existing objects through morphs, masks, scale or camera movement. ## RENDER ENGINE Build the animation as a deterministic function of time. Prefer: ` Any timestamp must always produce the exact same frame. Avoid: - timers - uncontrolled animation state - Math.random() - CSS transitions during rendering Use Canvas, SVG, Remotion, Three.js or another suitable framework depending on the project. Render frame-by-frame using Playwright/Chromium + FFmpeg when appropriate. ## SOUND Sound is part of the motion design. If music is provided: - detect BPM and beats - synchronize important visual changes with major beats Add subtle SFX where useful. If no music exists, create a minimal rhythmic soundtrack. ## QUALITY LOOP Do not stop after the first successful render. Render a contact sheet and inspect your own frames. Score the result on: - first-2-second hook - composition - readability - motion quality - transitions - visual variety - consistency - sound sync Identify the 3 biggest problems, fix them and render again. Repeat at least 3 times or until the result feels professionally polished. Specifically look for: - overlapping text - clipping - blurry typography - dead moments - awkward transitions - repetitive compositions - excessive fades - unreadable small text - inconsistent spacing ## FINAL OUTPUT Deliver: - `out/final.mp4` - `out/poster.png` - `out/contact.png` - source code - `README.md` If multiple aspect ratios are required, recompose each format rather than simply cropping. Work autonomously. Do not consider “the code works” a finished result. The standard is: **Would a professional motion designer confidently put this in their portfolio?** If not, keep improving it.”](https://image.24vids.com/tw-2104928754426622169/amplify_video_thumb/2104928712051597313/img/Su7qWsNWU1DzJOGk.jpg)
