Agent Skills
› calesthio/OpenMontage
› svg-character-animation
svg-character-animation
GitHub指导使用GSAP和Remotion对SVG角色部件进行动画制作，涵盖浏览器、Remotion及HyperFrames场景的驱动模式与质量检查。
Trigger Scenarios
需要为SVG角色添加动画效果
在Remotion项目中控制SVG动画帧
Install
npx skills add calesthio/OpenMontage --skill svg-character-animation -g -y
SKILL.md
Frontmatter
{
"name": "svg-character-animation",
"license": "MIT",
"description": "Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews."
}
SVG Character Animation
Use this skill when animating character rigs made from SVG parts.
Runtime Rules
- Animate transforms (
x,y,scale,rotation) rather than layout. - Use timelines for multi-part acting beats.
- For SVG elements, use stable pivots (
svgOriginor correctly scoped transform origins). - In Remotion, do not let GSAP advance with
requestAnimationFrame; drive a paused timeline from the current frame.
Browser Pattern
gsap.set("#arm_right", { svgOrigin: "390 310" });
const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
tl.to("#head", { rotation: -8, duration: 0.2 })
.to("#arm_right", { rotation: 35, duration: 0.4 }, "<");
Remotion Pattern
const frame = useCurrentFrame();
const progress = frame / durationInFrames;
timeline.progress(progress);
HyperFrames Pattern
Use HTML/SVG/GSAP components with deterministic timelines and validate via the HyperFrames CLI before final render.
Quality Checklist
- Parts stay connected at pivots during motion.
- Blinks, gaze, and mouth shapes are separate enough to read.
- Pose holds are long enough to communicate emotion.
- Frame sampling shows meaningful deltas, not frozen animation.
Sources
- GSAP core transform properties and SVG handling: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/
- GSAP timelines and sequencing: https://gsap.com/docs/v3/GSAP/Timeline/
- Remotion
useCurrentFrame: https://www.remotion.dev/docs/use-current-frame
Version History
- 0af32ce Current 2026-07-24 22:22
