💫 GSAP Skills
greensock/gsap-skills
Give your coding agent resources for creating animations with GSAP.
Think kinetic typography, animated callouts and smooth transitions for polished videos.
2 likes · 12 views
AI 모션그래픽 저장소 20개 모음
모션그래픽 제작에 쓰는 저장소 20개를 기획·에셋·움직임·입체 장면·출력 순서로 정리했습니다. 필요한 도구만 조합하고 각 저장소의 설치 안내와 이용 조건을 확인하면 됩니다.
도구·자료 주소
penpot/penpot
excalidraw/excalidraw
fontsource/fontsource
lucide-icons/lucide
svg/svgo
lovell/sharp
airbnb/lottie-web
rive-app/rive-wasm
motiondivision/motion
greensock/GSAP
juliangarnier/anime
theatre-js/theatre
mrdoob/three.js
pmndrs/react-three-fiber
pmndrs/drei
pmndrs/postprocessing
remotion-dev/remotion
remotion-dev/skills
FFmpeg/FFmpeg
Vanilagy/mediabunny
#모션그래픽 #개발도구 #AI활용 #투더제이
[en-US] 20 AI Motion Graphics Resources Collection
We have organized 20 repositories used for motion graphics production in the order of Planning, Assets, Motion, 3D Scenes, and Output. Simply combine the tools you need and check the installation instructions and terms of use for each repository.
Tool/Resource Addresses
penpot/penpot
excalidraw/excalidraw
fontsource/fontsource
lucide-icons/lucide
svg/svgo
lovell/sharp
airbnb/lottie-web
rive-app/rive-wasm
motiondivision/motion
greensock/GSAP
gi thub.com/juliangarnier/anime
theatre-js/theatre
mrdoob/three.js
pmndrs/react-three-fiber
pmndrs/drei
pmndrs/postprocessing
remotion-dev/remotion
remotion-dev/skills
FFmpeg/FFmpeg
Vanilagy/mediabunny
#MotionGraphics #DevelopmentTools #AIUtilization #ToTheJ
81 likes · 2 comments · 2,503 views
gsap-skills:GSAP 官方开源的 AI Skills,教 Agent 正确使用 timeline、ScrollTrigger、插件、框架集成和性能规则。适合减少动画 API 误用、补齐实现规范;不提供现成视觉模板,镜头节奏和设计判断仍要由人完成。
👉 greensock/gsap-skills
16 views
7 أدوات على GitHub تعطي الذكاء الاصطناعي ذوق في تصميم المواقع
المواقع اللي يسويها الذكاء الاصطناعي كلها شكل واحد؟ مو ذنب النموذج بس، ناقصه أدوات تعطيه ذوق.
سبع أدوات على GitHub تفرق:
1. Taste Skill: تخلي الوكيل يختار ستايل للتصميم، ويجيب صور من أرشيفات مفتوحة، ويراجع شغله بالمتصفح.
Leonxlnx/taste-skill
2. Impeccable: ناقد تصميم، أوامر تنقد الواجهة وتزبّط التفاصيل.
pbakaus/impeccable
3. Designlang: عطها رابط موقع يعجبك، تطلع لك ألوانه وخطوطه ومسافاته.
Manavarya09/design-extract
4. React Bits: أكثر من 215 قطعة متحركة جاهزة.
DavidHDev/react-bits
5. GSAP Skills: تعلّم الوكيل يحرك عناصر الموقع وانت تنزل بالصفحة.
greensock/gsap-skills
6. Transitions.dev: حركات صغيرة للقوائم والبطاقات والتنبيهات.
Jakubantalik/transitions.dev
7. Playwright CLI من مايكروسوفت: الوكيل يفتح المتصفح ويصوّر موقعه ويشوف مشاكله.
microsoft/playwright-cli
ابدأ بـTaste Skill أو Impeccable، عطها وكيلك وقل له: استخدمها وراجع النتيجة.
(أعداد النجوم حسب GitHub بتاريخ 25 أكتوبر 2026)
#ذكاء_اصطناعي #تصميم_مواقع #GitHub #برمجة #عبدالرحمن_AI
29 likes · 650 views
15 repo biến Claude Code thành studio làm video motion #shorts
Biến Claude Code thành studio làm video motion chỉ bằng code 🎬 Tổng hợp 15 repo GitHub, chia theo từng việc.
🚀 Video ra mắt sản phẩm: product-launch-motion, motion-graphics-skills, claude-motion-design
✂️ Hậu kỳ, dựng reel/Shorts từ footage: hyperframes-student-kit, motion-graphics
🎨 Hoạt hình ngắn: animate, claude-motion, claude-remotion-skill
🖱️ Chuyển động cho web: motion, motion-dev-animations-skill
🧱 Bộ nền chính thức: HyperFrames, Remotion, Remotion skills, GSAP skills, LottieFiles motion-design-skill
⚠️ Remotion có license riêng: miễn phí cho cá nhân và công ty tối đa 3 người, công ty lớn hơn phải mua license. Repo nhỏ nên đọc README và license trước khi dùng.
🔗 heygen-com/hyperframes
🔗 remotion-dev/remotion
🔗 greensock/gsap-skills
#NachiLab #NachiAITechTalk #ClaudeCode #MotionDesign #AIVideo #OpenSource
31 views
把大佬的宝藏做成了一个开箱即用的skill,大家可以来玩呀
GitHub:JuniverseLi/motion-studio-skill
2 likes · 1 repost · 8 views
It's interesting to see everyone referencing the LottieFiles Motion Design skill, which is just basic motion design principles in a markdown file!
Less is more in this new era of AI!
LottieFiles/motion-design-skill
1 like · 249 views
GSAP (GreenSock Animation Platform): A JavaScript animation library for the modern web (29k stars)
Here's what it does:
*All text below is quoted directly from the project README.*
GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes.
Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects... anything JavaScript can touch!
GSAP's ScrollTrigger plugin delivers jaw-dropping scroll-based animations with minimal code. gsap.matchMedia makes building responsive, accessibility-friendly animations a breeze. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 12 million sites.
GSAP works around countless browser inconsistencies; your animations. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! GSAP is completely flexible; sprinkle it wherever you want. Zero dependencies.
There are many optional plugins and easing functions for achieving advanced effects easily like scrolling, morphing, text splitting, animating along a motion path or FLIP animations. There's even a handy Observer for normalizing event detection across browsers/devices. GSAP's core can animate almost anything including CSS and attributes, plus it includes all of the utility methods like interpolate, mapRange, most of the eases, and it can do snapping and modifiers.
greensock/GSAP
1 point
Check out my motion graphic skill!
Barty-Bart/motion-graphics
I am actually building out an entire funnel to edit my youtube videos end to end. And it all started from the first motion graphics skill on the above repo
I have a living project folder in Claude that handles everything from the moment of RAW footage:
- Transcribes and cuts out gaps, retakes filler words and produces a rough cut
- Local AI model to split me from the background (object separation) so I can add animations and text behind me, change my background, etc.)
- Planner agent that uses my default styles and elements and plans each scene, layout, transition, motion graphics, etc.
- We then edit the intro and main body by splitting each key section and overlaying animations, layouts, etc.
- Each section has a text input box where you can drop comments and make micro-edits (this makes things SO easy)
- Final render and then export so I can upload to Youtube
I am constantly improving this system. I am now working on waveform based editing, like Descript, where I can edit the waveform or text - but really I don't need to as Claude does it all
Main reason for waveform is that some of my random cuts have 'half-words' that aren't picked up super well by my rough cut skill, so I can manually get in there and fix things up. But over time I plan to automate this too
I am also working on shorts production too. My current MVP process gives me the script, which I record like 5 shorts scripts in one go, then drop the 10 min RAW clip into Claude, and then I get 5 fully edited reels out
Still a WIP but here is a sample: instagram.com
And I am now working on an ideation and hook engine. To help plan out winners before I create videos. This is the hardest part of all, but I have started and it can only get better
6 likes · 345 views
Mentions
💫 GSAP Skills greensock/gsap-skills Give your coding agent resources for creating animations with GSAP. Think kinetic typography, animated callouts and smooth transitions for polished videos.
AI 모션그래픽 저장소 20개 모음 모션그래픽 제작에 쓰는 저장소 20개를 기획·에셋·움직임·입체 장면·출력 순서로 정리했습니다. 필요한 도구만 조합하고 각 저장소의 설치 안내와 이용 조건을 확인하면 됩니다. 도구·자료 주소 penpot/penpot excalidraw/excalidraw fontsource/fontsource lucide-icons/lucide svg/svgo lovell/sharp airbnb/lottie-web rive-app/rive-wasm motiondivision/motion greensock/GSAP juliangarnier/anime theatre-js/theatre mrdoob/three.js pmndrs/react-three-fiber pmndrs/drei pmndrs/postprocessing remotion-dev/remotion remotion-dev/skills FFmpeg/FFmpeg Vanilagy/mediabunny #모션그래픽 #개발도구 #AI활용 #투더제이 [en-US] 20 AI Motion Graphics Resources Collection We have organized 20 repositories used for motion graphics production in the order of Planning, Assets, Motion, 3D Scenes, and Output. Simply combine the tools you need and check the installation instructions and terms of use for each repository. Tool/Resource Addresses penpot/penpot excalidraw/excalidraw fontsource/fontsource lucide-icons/lucide svg/svgo lovell/sharp airbnb/lottie-web rive-app/rive-wasm motiondivision/motion greensock/GSAP gi thub.com/juliangarnier/anime theatre-js/theatre mrdoob/three.js pmndrs/react-three-fiber pmndrs/drei pmndrs/postprocessing remotion-dev/remotion remotion-dev/skills FFmpeg/FFmpeg Vanilagy/mediabunny #MotionGraphics #DevelopmentTools #AIUtilization #ToTheJ
gsap-skills:GSAP 官方开源的 AI Skills,教 Agent 正确使用 timeline、ScrollTrigger、插件、框架集成和性能规则。适合减少动画 API 误用、补齐实现规范;不提供现成视觉模板,镜头节奏和设计判断仍要由人完成。 👉 greensock/gsap-skills
7 أدوات على GitHub تعطي الذكاء الاصطناعي ذوق في تصميم المواقع المواقع اللي يسويها الذكاء الاصطناعي كلها شكل واحد؟ مو ذنب النموذج بس، ناقصه أدوات تعطيه ذوق. سبع أدوات على GitHub تفرق: 1. Taste Skill: تخلي الوكيل يختار ستايل للتصميم، ويجيب صور من أرشيفات مفتوحة، ويراجع شغله بالمتصفح. Leonxlnx/taste-skill 2. Impeccable: ناقد تصميم، أوامر تنقد الواجهة وتزبّط التفاصيل. pbakaus/impeccable 3. Designlang: عطها رابط موقع يعجبك، تطلع لك ألوانه وخطوطه ومسافاته. Manavarya09/design-extract 4. React Bits: أكثر من 215 قطعة متحركة جاهزة. DavidHDev/react-bits 5. GSAP Skills: تعلّم الوكيل يحرك عناصر الموقع وانت تنزل بالصفحة. greensock/gsap-skills 6. Transitions.dev: حركات صغيرة للقوائم والبطاقات والتنبيهات. Jakubantalik/transitions.dev 7. Playwright CLI من مايكروسوفت: الوكيل يفتح المتصفح ويصوّر موقعه ويشوف مشاكله. microsoft/playwright-cli ابدأ بـTaste Skill أو Impeccable، عطها وكيلك وقل له: استخدمها وراجع النتيجة. (أعداد النجوم حسب GitHub بتاريخ 25 أكتوبر 2026) #ذكاء_اصطناعي #تصميم_مواقع #GitHub #برمجة #عبدالرحمن_AI
15 repo biến Claude Code thành studio làm video motion #shorts Biến Claude Code thành studio làm video motion chỉ bằng code 🎬 Tổng hợp 15 repo GitHub, chia theo từng việc. 🚀 Video ra mắt sản phẩm: product-launch-motion, motion-graphics-skills, claude-motion-design ✂️ Hậu kỳ, dựng reel/Shorts từ footage: hyperframes-student-kit, motion-graphics 🎨 Hoạt hình ngắn: animate, claude-motion, claude-remotion-skill 🖱️ Chuyển động cho web: motion, motion-dev-animations-skill 🧱 Bộ nền chính thức: HyperFrames, Remotion, Remotion skills, GSAP skills, LottieFiles motion-design-skill ⚠️ Remotion có license riêng: miễn phí cho cá nhân và công ty tối đa 3 người, công ty lớn hơn phải mua license. Repo nhỏ nên đọc README và license trước khi dùng. 🔗 heygen-com/hyperframes 🔗 remotion-dev/remotion 🔗 greensock/gsap-skills #NachiLab #NachiAITechTalk #ClaudeCode #MotionDesign #AIVideo #OpenSource
把大佬的宝藏做成了一个开箱即用的skill,大家可以来玩呀 GitHub:JuniverseLi/motion-studio-skill
It's interesting to see everyone referencing the LottieFiles Motion Design skill, which is just basic motion design principles in a markdown file! Less is more in this new era of AI! LottieFiles/motion-design-skill
GSAP (GreenSock Animation Platform): A JavaScript animation library for the modern web (29k stars) Here's what it does: *All text below is quoted directly from the project README.* GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects... anything JavaScript can touch! GSAP's ScrollTrigger plugin delivers jaw-dropping scroll-based animations with minimal code. gsap.matchMedia makes building responsive, accessibility-friendly animations a breeze. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 12 million sites. GSAP works around countless browser inconsistencies; your animations. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! GSAP is completely flexible; sprinkle it wherever you want. Zero dependencies. There are many optional plugins and easing functions for achieving advanced effects easily like scrolling, morphing, text splitting, animating along a motion path or FLIP animations. There's even a handy Observer for normalizing event detection across browsers/devices. GSAP's core can animate almost anything including CSS and attributes, plus it includes all of the utility methods like interpolate, mapRange, most of the eases, and it can do snapping and modifiers. greensock/GSAP
Check out my motion graphic skill! Barty-Bart/motion-graphics I am actually building out an entire funnel to edit my youtube videos end to end. And it all started from the first motion graphics skill on the above repo I have a living project folder in Claude that handles everything from the moment of RAW footage: - Transcribes and cuts out gaps, retakes filler words and produces a rough cut - Local AI model to split me from the background (object separation) so I can add animations and text behind me, change my background, etc.) - Planner agent that uses my default styles and elements and plans each scene, layout, transition, motion graphics, etc. - We then edit the intro and main body by splitting each key section and overlaying animations, layouts, etc. - Each section has a text input box where you can drop comments and make micro-edits (this makes things SO easy) - Final render and then export so I can upload to Youtube I am constantly improving this system. I am now working on waveform based editing, like Descript, where I can edit the waveform or text - but really I don't need to as Claude does it all Main reason for waveform is that some of my random cuts have 'half-words' that aren't picked up super well by my rough cut skill, so I can manually get in there and fix things up. But over time I plan to automate this too I am also working on shorts production too. My current MVP process gives me the script, which I record like 5 shorts scripts in one go, then drop the 10 min RAW clip into Claude, and then I get 5 fully edited reels out Still a WIP but here is a sample: instagram.com And I am now working on an ideation and hook engine. To help plan out winners before I create videos. This is the hardest part of all, but I have started and it can only get better