mirror of https://github.com/hanzoai/video.git synced 2026-11-03 04:21:39 +00:00

Files

T

calesthio e5367f7d66 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

2026-04-28 08:11:02 -07:00

1.6 KiB

Raw Permalink Blame History

name, description, license

name	description	license
svg-character-animation	Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.	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

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

1.6 KiB Raw Permalink Blame History