This 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.
$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animatorSVG 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.
Install using the command provided.
Animate SVG graphics for web applications
Create eye-catching presentations with SVG effects
Export transparent frame sequences for further use
$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animatorgit clone https://github.com/vibe-motion/skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Check the GitHub repository or documentation for usage examples.
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan