feat(character-animation): add local rigged character pipeline

New beta pipeline for reusable cartoon characters with SVG rigs, pose
libraries, action timelines, and Canvas/Remotion/HyperFrames rendering.

- pipeline_defs/character-animation.yaml: 11-stage manifest
- skills/pipelines/character-animation/: 11 stage director skills
- tools/character/: BaseTool implementations for char design, rigging,
  pose libraries, action timelines, previews, and QA
- schemas/artifacts/{character_design,rig_plan,pose_library,
  action_timeline,character_qa_report}.schema.json: canonical artifacts
- schemas/artifacts/scene_plan.schema.json: extended for character-led
  scenes
- .agents/skills/{canvas-procedural-animation,character-animation-qa,
  character-rigging,pose-library-design,svg-character-animation}/:
  Layer 3 vendor knowledge
- AGENT_GUIDE / PROJECT_CONTEXT / README / ARCHITECTURE / PROVIDERS:
  surface the new pipeline and its capability family
- tools/video/hyperframes_compose.py: SVG character rig support
- tests/contracts/test_character_animation_pipeline.py: contract tests
This commit is contained in:
calesthio
2026-04-28 08:11:02 -07:00
parent 386338c92b
commit 2b0801030c
33 changed files with 2528 additions and 15 deletions
@@ -0,0 +1,56 @@
---
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
```js
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
```tsx
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