mcpField
S
svg-character-animation

svg-character-animation

github.com/calesthioCreative & media72.7k1.3k installsUpdated today
Repository

About svg-character-animation

svg-character-animation is a skill for animating character rigs built from SVG parts. It provides guidance for GSAP timelines, stable pivots, and frame-driven animation in Remotion, plus a quality checklist.

Key features

  1. 01Transform-based character movement
  2. 02GSAP timelines for multi-part acting
  3. 03Stable pivots for SVG elements
  4. 04Frame-driven timelines in Remotion
  5. 05Animation quality checklist

Use cases

  1. 01Animating a character assembled from SVG parts
  2. 02Synchronizing multi-part motion to a timeline
  3. 03Driving Remotion animation from the current frame

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/calesthio/openmontage --skill svg-character-animation

After installing, type/svg-character-animationin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported