360 Secure SkillHub
360 安全技能中心

svg-character-animation

该 Skill 提供 SVG 角色动画指南：用 GSAP 变换与时间轴驱动头、肢体和表情，强调稳定支点；在 Remotion 中按当前帧推进暂停时间轴；通过 HyperFrames 浏览器预览并用 CLI 校验。还含质量检查清单，但未附带 SVG 素材或可运行工程。

calesthio
热度 0.00
最近更新 2026-10-19 03:34:07
分类：创作依赖：纯提示词应用场景：图像生成 / 视频编辑 / 故事创作 / 工作流

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add calesthio/openmontage/svg-character-animation
Metadata
name
svg-character-animation
description
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
license
MIT

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 (svgOrigin or 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