使い方
- インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
- 必要なツール、認証情報、対応環境を原文で確認します。
- 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/calesthio/openmontage --skill svg-character-animation開始前の確認
- 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
- スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文
見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
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 (
svgOriginor 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
