design mediaby video-production-buddy
SVG Character Animation
video-production-buddy/svg-character-animation
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
What it changes
Passed 19 of 22 test cases with the skill, and 17 of 22 without it.
Without skill77%
With skill86%
Checks it passed that the model alone missed
- Output specifies validating the project using the HyperFrames CLI before rendering.
- Output states that the timelines must be deterministic and scrubbable by frame index.
- Output configures timeline defaults using the defaults: { ease: "power2.inOut" } configuration object.
3 fixed16 passed either way2 still failing1 broke
- Pass-rate lift
- +9 pp
- Tokens
- -19%
- Agent turns
- 0%
- Response time
- -41%
Model gemini-3.6-flashMeasured 8/17/2026v119 of 22 cases passed with skill
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
PromptWhat key requirement must GSAP timelines meet when building character components for rendering in HyperFrames environments?
What was checked, without and with the skill| Checked | Without skill | With skill |
|---|
| Output states that the timelines must be deterministic and scrubbable by frame index. | Missed | Passed |
|---|
What's inside
The instructions your model reads when the skill loads.
SKILL.md50 linessingle file
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.
Track record
Benchmark
19 / 22
test cases passed, vs 17 / 22 without
Adoption
- Users
- 0
- Times used
- 0
Safety and source details
SkillSafety
✓ 3 of 3 passed✓Code scan15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026
View 15 scanner checks
live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing
✓IntentSafe
LLM judge · does the skill do what it claims
✓ContentClean
LLM judge · policy & harmful-content review
Source
Importedvideo-production-buddy / video-production-buddy
.agents/local/skills/svg-character-animation/SKILL.md
License MITImported 8/3/2026Version v1