SVG Assembly Animator
0This skill converts static SVG files into professional dynamic HTML5 animations with export capabilities. It's designed for developers looking to animate SVG assets using GSAP.
000Updated 3w ago
Animation
Quick InstallView Source
$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animatorOverview
About This Skill
SVG Assembly Animator converts static SVG vector graphics into professional HTML5 animations with viscous, dynamic motion styles. The skill analyzes SVG structure, identifies main body and detail parts, then orchestrates multi-stage animations: a scatter phase where components are ejected with extreme scaling for speed, followed by an assembly phase with staggered entrance, elastic easing, and large rotations. It generates interactive HTML files with built-in export functionality to produce transparent 1080x1080 PNG sequences at 30fps, ready for compositing in video software like After Effects or Premiere Pro using standard ffmpeg commands.
How to Use
Install using the command provided.
Use Cases
Animate SVG graphics for web applications
Create eye-catching presentations with SVG effects
Export transparent frame sequences for further use
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animatorAlternative Install (Git Clone)
git clone https://github.com/vibe-motion/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
📝
No Examples Available
Check the GitHub repository or documentation for usage examples.
Apply to these tools
Browse all tools
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan