svg-assembly-animator
SVG Assembly Animator
这个 Skill 专门用于将静态 SVG 转换为具有专业动效(Viscous & Dynamic 风格)的 HTML5 动画,并提供透明序列帧导出功能。
核心工作流
- 分析 SVG 结构:读取 SVG 文件,识别出主要的“船体/主体”(通常是第一个 path)和“细节零件”(剩余 path)。
- 准备 HTML 模板:
- 使用 GSAP (TweenMax) 作为动画引擎。
- 使用 JSZip 和 Canvas 实现纯前端透明帧导出。
- 加载内置资产
assets/animation_template.html作为基础。
- 实现动画逻辑(参考
references/animation_logic.md):- 打散阶段:利用“反向逻辑”,将零件随机抛射到视口外,并进行极端的轴向缩放(ScaleX: 0.05, ScaleY: 4)以营造速度感。
- 组装阶段:
- 主体骨架率先以
elastic.out效果浮现。 - 零件以
stagger随机顺序飞入,伴随back.out的过冲回弹(Overshoot)。 - 整体场景伴随大角度旋转(180° 或 360°)和缩放。
- 主体骨架率先以
- 生成与交付:生成
.html文件,提示用户可以在浏览器中预览并点击导出按钮。
More from vibe-motion/skills
claude-typer
Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做 Claude 打字动画", "创建提示词动画", or similar requests that convert a text prompt into a typing-animation video.
373procedural-fish-render
Clone or update https://github.com/vibe-motion/procedural-fish and render procedural-fish animation to a video using the project's own render command. Use when the user asks to render 程序鱼/procedural fish, export a 程序鱼视频, or run procedural-fish Remotion rendering.
340ruler-progress-render
Clone or update https://github.com/sxhzju/ruler-progress-animator and render a ruler progress video with default parameters. Use when users ask for requests like "绘制个尺子进度条", "做个尺子进度动画", "渲染 ruler progress", or ask to export the default demo video from this project.
262light-spotlight-render
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.
149remotion-3d-ticker
Creates infinite 3D vertical scrolling ticker animations in Remotion. Use when you need to build a parallax gallery, infinite image scroll, multi-column continuous vertical scrolling effect, or a 3D photo wall (3D照片滚动墙 / 3D相册瀑布流).
137wechat-2d-render
Clone or update https://github.com/sxhzju/wechat-2d and render the default WeChat-style 2D chat motion video with Remotion. Use when users ask for 微信聊天动画, wechat 2d chat render, 微信视频消息动效, or exporting the default demo from the wechat-2d project.
133