svg-character-animation
installsforks
How to install svg-character-animation?
calesthio/openmontage/svg-character-animation
$npx -y skills add calesthio/OpenMontage --skill svg-character-animationAnimate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
SKILL.md
| 1 | # SVG Character Animation |
| 2 | |
| 3 | Use this skill when animating character rigs made from SVG parts. |
| 4 | |
| 5 | ## Runtime Rules |
| 6 | |
| 7 | - Animate transforms (`x`, `y`, `scale`, `rotation`) rather than layout. |
| 8 | - Use timelines for multi-part acting beats. |
| 9 | - For SVG elements, use stable pivots (`svgOrigin` or correctly scoped |
| 10 | transform origins). |
| 11 | - In Remotion, do not let GSAP advance with `requestAnimationFrame`; drive a |
| 12 | paused timeline from the current frame. |
| 13 | |
| 14 | ## Browser Pattern |
| 15 | |
| 16 | ```js |
| 17 | gsap.set("#arm_right", { svgOrigin: "390 310" }); |
| 18 | const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } }); |
| 19 | tl.to("#head", { rotation: -8, duration: 0.2 }) |
| 20 | .to("#arm_right", { rotation: 35, duration: 0.4 }, "<"); |
| 21 | ``` |
| 22 | |
| 23 | ## Remotion Pattern |
| 24 | |
| 25 | ```tsx |
| 26 | const frame = useCurrentFrame(); |
| 27 | const progress = frame / durationInFrames; |
| 28 | timeline.progress(progress); |
| 29 | ``` |
| 30 | |
| 31 | ## HyperFrames Pattern |
| 32 | |
| 33 | Use HTML/SVG/GSAP components with deterministic timelines and validate via the |
| 34 | HyperFrames CLI before final render. |
| 35 | |
| 36 | ## Quality Checklist |
| 37 | |
| 38 | - Parts stay connected at pivots during motion. |
| 39 | - Blinks, gaze, and mouth shapes are separate enough to read. |
| 40 | - Pose holds are long enough to communicate emotion. |
| 41 | - Frame sampling shows meaningful deltas, not frozen animation. |
| 42 | |
| 43 | ## Sources |
| 44 | |
| 45 | - GSAP core transform properties and SVG handling: |
| 46 | https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/ |
| 47 | - GSAP timelines and sequencing: |
| 48 | https://gsap.com/docs/v3/GSAP/Timeline/ |
| 49 | - Remotion `useCurrentFrame`: |
| 50 | https://www.remotion.dev/docs/use-current-frame |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
