Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

this is straight up f*cking gold 20 open-source GitHub repos stacked into one motion design empire. 5 floors, ~26K stars combined, all of them plug into Claude Code: floor 01 · taste: > LottieFiles/motion-design-skill: timing, easing, choreography before a single line of animation code > iart-ai/motion-design-skills: timing, type, color,...

Asteri_eth's profile picture

Asteri

3,339 subscribers

15,185 Aufrufe • vor 14 Tagen •via X (Twitter)

KunstWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

16 Kommentare

Profilbild von Slarmix
Slarmixvor 14 Tagen

My bookmarks folder just became a production studio.

Profilbild von Narek Maloyan 🇦🇲
Narek Maloyan 🇦🇲vor 13 Tagen

One more if you want Manim without Python: manim-web, my TypeScript port. One script tag, it renders right in the browser Yesterday someone built 3b1b style click-through slides with it plus Claude and Codex

Profilbild von monokern
monokernvor 14 Tagen

good list tbh

Profilbild von Mohammad Ali
Mohammad Alivor 14 Tagen

Insane, I was searching for the same thing

Profilbild von Axnatuh
Axnatuhvor 14 Tagen

Insane motion stack

Profilbild von SRKDAN
SRKDANvor 14 Tagen

Floor 01 is taste. Meanwhile my agent still picks the beige gradient with a floating blob.

Profilbild von Matthew
Matthewvor 14 Tagen

Wrong sub. But 20 repos and Claude Code still won't fix a 92% hold. -DV

Profilbild von Synthex
Synthexvor 14 Tagen

sawing this. which floor gave you the biggest jump in quality? for me it was moving to a virtual clock instead of screen recoeding

Profilbild von Iron Giant
Iron Giantvor 14 Tagen

Bookmarking this entire motion stack

Profilbild von yurshev
yurshevvor 14 Tagen

bookmarking this whole stack tonight

Profilbild von Branko Trcek
Branko Trcekvor 14 Tagen

rly useful bookmarked it

Profilbild von Aaliyah
Aaliyahvor 14 Tagen

20 repos is cool but I'll keep my edge on must-hit meters. Math beats motion.

Profilbild von Diam
Diamvor 14 Tagen

Starting with timing and composition is a good call. The viewer needs to know where to look before the effects pile up.

Profilbild von 𝔇𝔦𝔪𝔞 ♞
𝔇𝔦𝔪𝔞 ♞vor 13 Tagen

Putting timing and easing ahead of code makes motion feel designed, not just bolted on.

Profilbild von Sof s.
Sof s.vor 14 Tagen

Well said!

Profilbild von bitgrain
bitgrainvor 14 Tagen

taste as floor 01 is the right order. for the static half of a launch (posters, og images, social cards) bitgrain plugs into claude code over MCP the same way

Ähnliche Videos

this is pure f*cking treasure Netflix engineers posted 20 GitHub repos that turn your Opus 5.5 into a f*cking motion empire: built for Opus 5.5 1. claude-motion: taste, checks its own frames, sound written in code. the author built it for Opus 5.5 2. claude-motion-design: HTML, Playwright and ffmpeg, no Remotion. the demo was made on Opus 5.5 3. motion-graphics-skills: 13 skills for launch videos. the README tells you to run it on Opus 5.5 4. claude-remotion-skill: a Remotion editor from one prompt. captions, B-roll, sound 5. klik-anim-skill-creation: the laws of animation and camera, built on Opus 6. hyperframes-motion-reel-skill: a showreel cut to the beat at 120 BPM, on HyperFrames 7. product-launch-motion: a full launch film. voice-over, camera, color grade 8. animate: a short clip in one canvas file, storyboarded as it goes 9. motion-design-skills: timing, color, typography, logos, Remotion 10. hyperframes-student-kit: 14 skills and 406 motion graphics cards the engines these skills render with 11. hyperframes: HTML to MP4. the one almost everyone installs 12. remotion: video written in React 13. remotion skills: the official Remotion skills for your agent 14. GSAP: the timelines HyperFrames runs on. skills: npx skills add greensock/gsap-skills taste and everything around it 15. motion-design-skill: motion principles that work with any engine 16. awesome-motion-design-agent-skills: a map of GSAP, Remotion, Lottie and Rive skills 17. motion-graphics: B-roll built straight from your transcript 18. motion-dev-animations-skill: web animation on not video 19. motion: Motion itself, formerly Framer Motion 20. lottie-web: when you need Lottie, not MP4 the stack in one line: Opus 5.5 writes the code, a skill sets the timing and the camera, an engine renders the MP4. check each repo before you install. save this.
0:22

this is pure f*cking treasure Netflix engineers posted 20 GitHub repos that turn your Opus 5.5 into a f*cking motion empire: built for Opus 5.5 1. claude-motion: taste, checks its own frames, sound written in code. the author built it for Opus 5.5 2. claude-motion-design: HTML, Playwright and ffmpeg, no Remotion. the demo was made on Opus 5.5 3. motion-graphics-skills: 13 skills for launch videos. the README tells you to run it on Opus 5.5 4. claude-remotion-skill: a Remotion editor from one prompt. captions, B-roll, sound 5. klik-anim-skill-creation: the laws of animation and camera, built on Opus 6. hyperframes-motion-reel-skill: a showreel cut to the beat at 120 BPM, on HyperFrames 7. product-launch-motion: a full launch film. voice-over, camera, color grade 8. animate: a short clip in one canvas file, storyboarded as it goes 9. motion-design-skills: timing, color, typography, logos, Remotion 10. hyperframes-student-kit: 14 skills and 406 motion graphics cards the engines these skills render with 11. hyperframes: HTML to MP4. the one almost everyone installs 12. remotion: video written in React 13. remotion skills: the official Remotion skills for your agent 14. GSAP: the timelines HyperFrames runs on. skills: npx skills add greensock/gsap-skills taste and everything around it 15. motion-design-skill: motion principles that work with any engine 16. awesome-motion-design-agent-skills: a map of GSAP, Remotion, Lottie and Rive skills 17. motion-graphics: B-roll built straight from your transcript 18. motion-dev-animations-skill: web animation on not video 19. motion: Motion itself, formerly Framer Motion 20. lottie-web: when you need Lottie, not MP4 the stack in one line: Opus 5.5 writes the code, a skill sets the timing and the camera, an engine renders the MP4. check each repo before you install. save this.

NO1ennn

519,322 Aufrufe • vor 27 Tagen

I don't f*cking understand why motion designers aren't running this setup HyperFrames, HeyGen's tool that turns HTML into finished video, is past 68k stars on GitHub. hand Claude Code one folder, plug in a video engine, an animation library and Blender, and it stops being a chatbot. it storyboards, animates, renders and checks its own frames before you ever see them. motion designer, founder, marketer, doesn't matter. this is for you. here's the whole thing: > make a folder called STUDIO, open Claude Code in it, and add a CLAUDE.md with one rule: "save every brand color, font, logo and approved style to brand/" > run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. type /hyperframes:hyperframes, describe a 10-second product intro, and it plans, animates and renders the MP4 > run npx skills add remotion-dev/skills. now it can also write videos in React with Remotion, the official skills straight from the Remotion team > run npx skills add it learns proper GSAP: timelines, scroll animations, text effects. and GSAP is 100% free now, every plugin included > run npx skills add LottieFiles/motion-design-skill. it picks up real motion principles: timing, easing, choreography, the classic Disney rules adapted for UI. this is where the taste comes from > run curl -LsSf | sh. Claude gets hands inside Blender to build and edit actual 3D scenes > type /schedule and tell it "every Monday at 9, turn last week's launches into 3 short promo clips and wait for my yes". now it runs on a routine 15 minutes of setup, and you never start from a blank timeline again. all the repos: -> -> -> -> -> bookmark this and test asap
0:25

I don't f*cking understand why motion designers aren't running this setup HyperFrames, HeyGen's tool that turns HTML into finished video, is past 68k stars on GitHub. hand Claude Code one folder, plug in a video engine, an animation library and Blender, and it stops being a chatbot. it storyboards, animates, renders and checks its own frames before you ever see them. motion designer, founder, marketer, doesn't matter. this is for you. here's the whole thing: > make a folder called STUDIO, open Claude Code in it, and add a CLAUDE.md with one rule: "save every brand color, font, logo and approved style to brand/" > run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes. type /hyperframes:hyperframes, describe a 10-second product intro, and it plans, animates and renders the MP4 > run npx skills add remotion-dev/skills. now it can also write videos in React with Remotion, the official skills straight from the Remotion team > run npx skills add it learns proper GSAP: timelines, scroll animations, text effects. and GSAP is 100% free now, every plugin included > run npx skills add LottieFiles/motion-design-skill. it picks up real motion principles: timing, easing, choreography, the classic Disney rules adapted for UI. this is where the taste comes from > run curl -LsSf | sh. Claude gets hands inside Blender to build and edit actual 3D scenes > type /schedule and tell it "every Monday at 9, turn last week's launches into 3 short promo clips and wait for my yes". now it runs on a routine 15 minutes of setup, and you never start from a blank timeline again. all the repos: -> -> -> -> -> bookmark this and test asap

kiosa

46,359 Aufrufe • vor 15 Tagen

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 Code official video workflows 03 Motion Canvas → animate diagrams and explainers in TypeScript 04 Motion AI Kit → give Claude Code Motion docs and guidance 05 Motion → animate live UI layouts and gestures 06 GSAP → sequence SVG and text with precise timelines 07 Anime.js → animate SVG paths, text and interface elements 08 GSAP Skills → teach Claude Code timelines and React cleanup 09 Rive Web → connect vector animations to app states 10 dotLottie Web → play and control Lottie animation assets 11 Three.js → build 3D shots with cameras and lighting 12 React Three Fiber → build 3D scenes as React components 13 Drei → reuse 3D cameras, text and controls 14 React Three Rapier → add collisions, joints and rigid bodies 15 React Postprocessing → add bloom, depth of field and finishing effects 16 SVGO → clean SVG files before animating 17 Satori → generate SVG title cards from JSX 18 Howler.js → control sound effects and fades in web demos 19 Mediabunny → encode and convert video in the browser 20 FFmpeg → encode, resize and inspect final exports the loop: brief → type → animate → build the scene → add sound → render → review → ship save this + read the article below to build your own motion design studio ⭣
0:30

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 Code official video workflows 03 Motion Canvas → animate diagrams and explainers in TypeScript 04 Motion AI Kit → give Claude Code Motion docs and guidance 05 Motion → animate live UI layouts and gestures 06 GSAP → sequence SVG and text with precise timelines 07 Anime.js → animate SVG paths, text and interface elements 08 GSAP Skills → teach Claude Code timelines and React cleanup 09 Rive Web → connect vector animations to app states 10 dotLottie Web → play and control Lottie animation assets 11 Three.js → build 3D shots with cameras and lighting 12 React Three Fiber → build 3D scenes as React components 13 Drei → reuse 3D cameras, text and controls 14 React Three Rapier → add collisions, joints and rigid bodies 15 React Postprocessing → add bloom, depth of field and finishing effects 16 SVGO → clean SVG files before animating 17 Satori → generate SVG title cards from JSX 18 Howler.js → control sound effects and fades in web demos 19 Mediabunny → encode and convert video in the browser 20 FFmpeg → encode, resize and inspect final exports the loop: brief → type → animate → build the scene → add sound → render → review → ship save this + read the article below to build your own motion design studio ⭣

beamnxw ./

26,385 Aufrufe • vor 24 Tagen

Your AI can't make good videos? Give Opus 5.5 these 12 repos Blender. Remotion. GSAP. Three.js. FFmpeg. The exact stack behind this video, all from code Everything below is free: HyperFrames → write HTML, get a video, built for agents Blender MCP → your agent drives Blender for you Remotion → build and render video in React Remotion Skills → teaches your agent to make video like a pro GSAP → smooth motion and kinetic type Three.js → 3D right in the browser Blender → real 3D models, rigs and renders ComfyUI → your own image and video generation pipeline faster-whisper → auto captions from any voiceover Hallmark → kills the "AI slop" look Impeccable → polish, critique and audit any design FFmpeg → exports the final MP4 Studio quote: $5,000. My cost: $0 Drop the list into your Opus 5.5 Then check the article below, it's my full Opus 5.5 motion design playbook ↓
0:30

Your AI can't make good videos? Give Opus 5.5 these 12 repos Blender. Remotion. GSAP. Three.js. FFmpeg. The exact stack behind this video, all from code Everything below is free: HyperFrames → write HTML, get a video, built for agents Blender MCP → your agent drives Blender for you Remotion → build and render video in React Remotion Skills → teaches your agent to make video like a pro GSAP → smooth motion and kinetic type Three.js → 3D right in the browser Blender → real 3D models, rigs and renders ComfyUI → your own image and video generation pipeline faster-whisper → auto captions from any voiceover Hallmark → kills the "AI slop" look Impeccable → polish, critique and audit any design FFmpeg → exports the final MP4 Studio quote: $5,000. My cost: $0 Drop the list into your Opus 5.5 Then check the article below, it's my full Opus 5.5 motion design playbook ↓

Florence

75,378 Aufrufe • vor 3 Tagen

HyperFrames, now natively in Claude Design Drop in the skill file, generate motion graphics, download project ask Claude Code or run command: $ npx hyperframes render Design to animation to MP4, all in one flow details in thread
0:40

HyperFrames, now natively in Claude Design Drop in the skill file, generate motion graphics, download project ask Claude Code or run command: $ npx hyperframes render Design to animation to MP4, all in one flow details in thread

HeyGen

580,662 Aufrufe • vor 6 Monaten

Your AI videos look cheap? Send Opus 5.5 these 14 repos HyperFrames. Blender. Remotion. GSAP. FFmpeg. Voice, captions, 3D and render, all from code Everything below is free: Remotion Skills → official video-building guidance for your agent Blender → models, rigs and real 3D renders faster-whisper → captions from any voiceover Chatterbox → open-source voiceovers from plain text GSAP → UI motion and kinetic type on a timeline Blender MCP → Claude controls the Blender scene Chrome DevTools MCP → your agent sees its own render and fixes it before export FFmpeg → encode, inspect and ship the MP4 Remotion → compose and render video in React Impeccable → polish, critique and audit any design Three.js → 3D in the browser, rendered on your GPU ComfyUI → the image and video generation pipeline yt-dlp → pull reference clips and audio from the web HyperFrames → write HTML, render video, built for agents Editor, voice actor, 3D artist → $0 Give the list to your Opus 5.5 Then go to the article below, it's my full Opus 5.5 motion design guide ↓
0:30

Your AI videos look cheap? Send Opus 5.5 these 14 repos HyperFrames. Blender. Remotion. GSAP. FFmpeg. Voice, captions, 3D and render, all from code Everything below is free: Remotion Skills → official video-building guidance for your agent Blender → models, rigs and real 3D renders faster-whisper → captions from any voiceover Chatterbox → open-source voiceovers from plain text GSAP → UI motion and kinetic type on a timeline Blender MCP → Claude controls the Blender scene Chrome DevTools MCP → your agent sees its own render and fixes it before export FFmpeg → encode, inspect and ship the MP4 Remotion → compose and render video in React Impeccable → polish, critique and audit any design Three.js → 3D in the browser, rendered on your GPU ComfyUI → the image and video generation pipeline yt-dlp → pull reference clips and audio from the web HyperFrames → write HTML, render video, built for agents Editor, voice actor, 3D artist → $0 Give the list to your Opus 5.5 Then go to the article below, it's my full Opus 5.5 motion design guide ↓

Florence

141,404 Aufrufe • vor 2 Tagen

UI Skills are now easier for agents. Introducing UI Skills CLI. ask Codex, Cursor, Claude Code, or any agent to use the CLI, like: "use `npx ui-skills start` to fix the motion in this dialog" it finds the best design-engineering skill for the job and uses it as context
0:20

UI Skills are now easier for agents. Introducing UI Skills CLI. ask Codex, Cursor, Claude Code, or any agent to use the CLI, like: "use `npx ui-skills start` to fix the motion in this dialog" it finds the best design-engineering skill for the job and uses it as context

Ibelick

62,979 Aufrufe • vor 4 Monaten

This video by Remotion is literally motion design porn. no skills , mcp , tools , video gen , special prompts one shot fully in code or natural language , this is genuinely crazy
0:46

This video by Remotion is literally motion design porn. no skills , mcp , tools , video gen , special prompts one shot fully in code or natural language , this is genuinely crazy

Daniel Ch

320,260 Aufrufe • vor 3 Monaten

Motion designers will f*cking hate me after this drop i just released Opus 5.5 step-by-step motion design education site with: • 9 levels: taste → web → 3D → video → sound • 59 skills, engines and tools, every link checked • 9 live demos you can actually play with • copy-paste install lines + prompt generator what's inside: > easing playground: drag the curve, get GSAP / CSS / Motion code > Disney's 12 principles with a "with / without" switch > GSAP timeline you can scrub frame by frame > keyframes vs real physics side by side > "every frame is a function of t": why AI video flickers > cut-to-the-beat reel at 120 BPM > live Openverse search for free SFX with licences > FFmpeg export builder for 9:16, 1:1, 16:9 + a pixel Clawd that walks your screen and drops tips + a lofi radio with 3 stations while you learn the stack it teaches: Opus writes the code → skills guide the motion → an engine renders it free, no sign-up ↓
1:36

Motion designers will f*cking hate me after this drop i just released Opus 5.5 step-by-step motion design education site with: • 9 levels: taste → web → 3D → video → sound • 59 skills, engines and tools, every link checked • 9 live demos you can actually play with • copy-paste install lines + prompt generator what's inside: > easing playground: drag the curve, get GSAP / CSS / Motion code > Disney's 12 principles with a "with / without" switch > GSAP timeline you can scrub frame by frame > keyframes vs real physics side by side > "every frame is a function of t": why AI video flickers > cut-to-the-beat reel at 120 BPM > live Openverse search for free SFX with licences > FFmpeg export builder for 9:16, 1:1, 16:9 + a pixel Clawd that walks your screen and drops tips + a lofi radio with 3 stations while you learn the stack it teaches: Opus writes the code → skills guide the motion → an engine renders it free, no sign-up ↓

Movez

31,233 Aufrufe • vor 12 Tagen

Bookmark these motion design tools before your next project. 🎬 - AI motion design with the prompts and skills - Motion templates, animated device mockups, stock library in one place. - AI motion designer for stunning animations and typefaces - Build motion videos in minutes - Showcase your designs in motion.
0:39

Bookmark these motion design tools before your next project. 🎬 - AI motion design with the prompts and skills - Motion templates, animated device mockups, stock library in one place. - AI motion designer for stunning animations and typefaces - Build motion videos in minutes - Showcase your designs in motion.

Simoom

27,344 Aufrufe • vor 21 Tagen

I still don’t understand why people build Opus 5.5 setups from scratch. 10 repos already did it for you, from 68K stars to 0. 01 claude-code-best-practice → 68K stars. the full guide to subagents, skills, hooks, MCP and memory, with working examples 02 claude-skills → 28K stars. 388 ready skills across 20 fields, built for Claude Code, Codex and Gemini CLI 03 awesome-claude-code-toolkit → 2.7K stars. 135 agents, 42 commands, 20 hooks and 15 rules you can drop into a project 04 AI-Product-Development-Toolkit → 994 stars. six planning prompts, a Next.js starter and a ready CLAUDE.md written for Opus 5.5 05 awesome-claude-video-skills → 867 stars. 300+ repos that teach Claude to make video, sorted by type 06 awesome-claude-code → 508 stars. the cleanest map of tools, plugins and usage trackers around Claude Code 07 motion-graphics-skills → 375 stars. launch-style motion graphics where every frame is code, no After Effects 08 opus-5-5-dev → 1 star. rules for long runs: define “done” first, keep a TASKS.md, end with a fixed four-part report 09 model-bump → 0 stars. scans your code for what breaks on Opus 5.5, like forced tool choice, sampling settings and prefill 10 claude-best-practices → 1 star. 29 agents, 174 skills, 58 rules and 22 hooks to copy into your project stars measure hype. fit measures results. pick one, run it on a single task, keep only what survives. save this before you upgrade, and follow for more setups like this
0:24

I still don’t understand why people build Opus 5.5 setups from scratch. 10 repos already did it for you, from 68K stars to 0. 01 claude-code-best-practice → 68K stars. the full guide to subagents, skills, hooks, MCP and memory, with working examples 02 claude-skills → 28K stars. 388 ready skills across 20 fields, built for Claude Code, Codex and Gemini CLI 03 awesome-claude-code-toolkit → 2.7K stars. 135 agents, 42 commands, 20 hooks and 15 rules you can drop into a project 04 AI-Product-Development-Toolkit → 994 stars. six planning prompts, a Next.js starter and a ready CLAUDE.md written for Opus 5.5 05 awesome-claude-video-skills → 867 stars. 300+ repos that teach Claude to make video, sorted by type 06 awesome-claude-code → 508 stars. the cleanest map of tools, plugins and usage trackers around Claude Code 07 motion-graphics-skills → 375 stars. launch-style motion graphics where every frame is code, no After Effects 08 opus-5-5-dev → 1 star. rules for long runs: define “done” first, keep a TASKS.md, end with a fixed four-part report 09 model-bump → 0 stars. scans your code for what breaks on Opus 5.5, like forced tool choice, sampling settings and prefill 10 claude-best-practices → 1 star. 29 agents, 174 skills, 58 rules and 22 hooks to copy into your project stars measure hype. fit measures results. pick one, run it on a single task, keep only what survives. save this before you upgrade, and follow for more setups like this

Ryven

18,194 Aufrufe • vor 11 Tagen

Opus 5.5 + /anatomy-reveal is f*cking insane for motion design • Real 3D anatomy reveals from a photo or name • Exploded views with moving parts • Clean motion films with typography, blur, and studio-level transitions This is basically a motion design studio inside Claude Send these skills to your Claude:
0:22

Opus 5.5 + /anatomy-reveal is f*cking insane for motion design • Real 3D anatomy reveals from a photo or name • Exploded views with moving parts • Clean motion films with typography, blur, and studio-level transitions This is basically a motion design studio inside Claude Send these skills to your Claude:

Lunar

12,346 Aufrufe • vor 15 Tagen

Opus 5.5 + Remotion just f*cking killed the jobs of motion designers... add GSAP + Three.js and you've got the building blocks for your own motion design studio the stack: Opus 5.5 → plan the scenes and write the code Remotion → compose, preview, and render the video GSAP → choreograph the timing, easing, and transitions Three.js → build the geometry, cameras, lighting, and depth the useful part: the animation lives in code you can change a scene, adjust the pacing, reuse a component, and render another version from the same project the loop: brief → storyboard → assets → scene code → motion → preview → refine → export give the agent your brief, reference frames, fonts, colors, and delivery format. build one scene first, refine the direction, then carry it through the reel save this, then create your own motion design studio, which will be run by your AI employee ↓
0:31

Opus 5.5 + Remotion just f*cking killed the jobs of motion designers... add GSAP + Three.js and you've got the building blocks for your own motion design studio the stack: Opus 5.5 → plan the scenes and write the code Remotion → compose, preview, and render the video GSAP → choreograph the timing, easing, and transitions Three.js → build the geometry, cameras, lighting, and depth the useful part: the animation lives in code you can change a scene, adjust the pacing, reuse a component, and render another version from the same project the loop: brief → storyboard → assets → scene code → motion → preview → refine → export give the agent your brief, reference frames, fonts, colors, and delivery format. build one scene first, refine the direction, then carry it through the reel save this, then create your own motion design studio, which will be run by your AI employee ↓

beamnxw ./

22,524 Aufrufe • vor 18 Tagen

Gemini 4 Argon / Antigravity Prompt: Create a dynamic 45 second motion graphics video that showcases your incredible motion design skills. I put the code on GitHub, and I'll start adding more complex prompts.
0:45

Gemini 4 Argon / Antigravity Prompt: Create a dynamic 45 second motion graphics video that showcases your incredible motion design skills. I put the code on GitHub, and I'll start adding more complex prompts.

Emily

12,124 Aufrufe • vor 18 Tagen

this is pure f*cking treasure 20 GitHub repos to build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓
0:20

this is pure f*cking treasure 20 GitHub repos to build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓

beamnxw ./

39,214 Aufrufe • vor 21 Tagen

this is the whole f*cking motion studio in 20 repos 20 open-source stacks for Opus 5.5, one job each engines. vector. 3D. sound. delivery 01 Remotion → video engine 02 HyperFrames → html renderer 03 GSAP → timeline control 04 Motion Canvas → explainer engine 05 Theatre.js → keyframe editor 06 Motion → ui motion 07 Lottie → vector player 08 Rive → state machines 09 Manim → math explainers 10 Figma Context MCP → design import 11 three.js → 3d scene 12 React Three Fiber → react 3d 13 Blender MCP → blender desk 14 postprocessing → film look 15 ShaderGradient → gradient lab 16 Cap → screen capture 17 Kokoro → voiceover 18 whisper.cpp → auto captions 19 OpenCut → final cut 20 FFmpeg → export desk Opus writes the scenes and the code. these repos are the camera, the lights and the edit bay. the loop: brief → storyboard → animate → render → ship bookmark this, then spin up your own launch video studio ↓
0:20

this is the whole f*cking motion studio in 20 repos 20 open-source stacks for Opus 5.5, one job each engines. vector. 3D. sound. delivery 01 Remotion → video engine 02 HyperFrames → html renderer 03 GSAP → timeline control 04 Motion Canvas → explainer engine 05 Theatre.js → keyframe editor 06 Motion → ui motion 07 Lottie → vector player 08 Rive → state machines 09 Manim → math explainers 10 Figma Context MCP → design import 11 three.js → 3d scene 12 React Three Fiber → react 3d 13 Blender MCP → blender desk 14 postprocessing → film look 15 ShaderGradient → gradient lab 16 Cap → screen capture 17 Kokoro → voiceover 18 whisper.cpp → auto captions 19 OpenCut → final cut 20 FFmpeg → export desk Opus writes the scenes and the code. these repos are the camera, the lights and the edit bay. the loop: brief → storyboard → animate → render → ship bookmark this, then spin up your own launch video studio ↓

Asteri

49,103 Aufrufe • vor 11 Tagen

this is a f*cking cheat code for GrokBot users... i created a skill-hub for GrokBot: • 20+ skills, plugins & MCP servers • straight from SpaceXAI team • motion design, coding, agents, web design skills • copy-paste install steps + GitHub links for every single one this place will make your GrokBot a genius save now, then read article on GrokBot templates below
1:10

this is a f*cking cheat code for GrokBot users... i created a skill-hub for GrokBot: • 20+ skills, plugins & MCP servers • straight from SpaceXAI team • motion design, coding, agents, web design skills • copy-paste install steps + GitHub links for every single one this place will make your GrokBot a genius save now, then read article on GrokBot templates below

0xRafy

25,085 Aufrufe • vor 9 Tagen

HOLY F*CK, motion studio in 100% free github skills for you guys. 20 open-source skills for Opus 5.5. Animation. Simulation. 3D. Audio. Export. 01 Remotion → React video engine. 02 Remotion Skills → Official video skills for coding agents. 03 Anime.js → Timeline choreography. 04 Motion → UI animation and layout transitions. 05 Manim → Animated diagrams, equations and explainers. 06 Lottie → Lightweight vector animation playback. 07 MCP for Blender → Let Claude build and edit 3D scenes. 08 Three.js → 3D scenes and camera moves. 09 Three GPU Pathtracer → Realistic lighting and reflections. 10 Jolt Physics → Collisions, rigid bodies and soft bodies. 11 postprocessing → Bloom, depth of field and color grading. 12 Three.quarks → Particle trails and VFX. 13 Tweakpane → Live controls for your scene parameters. 14 ComfyUI → Node-based generation workflows. 15 CosyVoice → Multilingual voiceovers. 16 librosa → Beat detection for music-synced animation. 17 WhisperX → Word-level timing for captions. 18 OBS Studio → Screen capture. 19 LosslessCut → Fast cuts without re-encoding. 20 FFmpeg → Encoding and delivery. Concept → scene → motion → sound → final cut. Bookmark this. Go build something worth watching ↓
0:20

HOLY F*CK, motion studio in 100% free github skills for you guys. 20 open-source skills for Opus 5.5. Animation. Simulation. 3D. Audio. Export. 01 Remotion → React video engine. 02 Remotion Skills → Official video skills for coding agents. 03 Anime.js → Timeline choreography. 04 Motion → UI animation and layout transitions. 05 Manim → Animated diagrams, equations and explainers. 06 Lottie → Lightweight vector animation playback. 07 MCP for Blender → Let Claude build and edit 3D scenes. 08 Three.js → 3D scenes and camera moves. 09 Three GPU Pathtracer → Realistic lighting and reflections. 10 Jolt Physics → Collisions, rigid bodies and soft bodies. 11 postprocessing → Bloom, depth of field and color grading. 12 Three.quarks → Particle trails and VFX. 13 Tweakpane → Live controls for your scene parameters. 14 ComfyUI → Node-based generation workflows. 15 CosyVoice → Multilingual voiceovers. 16 librosa → Beat detection for music-synced animation. 17 WhisperX → Word-level timing for captions. 18 OBS Studio → Screen capture. 19 LosslessCut → Fast cuts without re-encoding. 20 FFmpeg → Encoding and delivery. Concept → scene → motion → sound → final cut. Bookmark this. Go build something worth watching ↓

eigen

415,030 Aufrufe • vor 5 Tagen

Introducing design-to-code Pixel-exact websites from any design, in one shot → A skill for every agent. → From Figma frames, Screenshots or mockups to real, responsive code → Checks itself against your design before calling it done → Six sites in the video, each built from one prompt npx skills add Atharvsinh-codez/skills
0:35

Introducing design-to-code Pixel-exact websites from any design, in one shot → A skill for every agent. → From Figma frames, Screenshots or mockups to real, responsive code → Checks itself against your design before calling it done → Six sites in the video, each built from one prompt npx skills add Atharvsinh-codez/skills

Athrix ☄️

27,024 Aufrufe • vor 1 Tag

Motion2Code Claude can't design motion this good on its own. So I let H3 Max on fal design it, and fal-agent (Claude Opus 5.5) rebuilds it as one HTML file: SVG + GSAP GSAP, looping seamlessly, sharp up to 32K. I'm open-sourcing the library that makes these animations.
0:34

Motion2Code Claude can't design motion this good on its own. So I let H3 Max on fal design it, and fal-agent (Claude Opus 5.5) rebuilds it as one HTML file: SVG + GSAP GSAP, looping seamlessly, sharp up to 32K. I'm open-sourcing the library that makes these animations.

Lovis Odin

37,611 Aufrufe • vor 15 Tagen