本文へ移動
cccskills
無料GitHub で公開

svg-character-animation

Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.

calesthio/OpenMontage
インストール方法を見る

含まれるファイル（1）

  • SKILL.md1.6 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3d-asset-generation

無料

Generate, reconstruct, inspect, and route production 3D assets for OpenMontage worlds using Atlas Cloud, fal.ai, licensed catalogs, and Blender.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.8万2026年10月13日 更新

acestep

無料

AI music generation with ACE-Step 1.5 — background music, vocal tracks, covers, stem extraction for video production. Use when generating music, soundtracks, jingles, or working with audio stems. Triggers include background music, soundtrack, jingle, music generation, stem extraction, cover, style transfer, or musical composition tasks.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.8万2026年10月13日 更新

agents

無料

Build voice AI agents with ElevenLabs. Use when creating voice assistants, customer service bots, interactive voice characters, or any real-time voice conversation experience.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.8万2026年10月13日 更新

ai-video-gen

無料

Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content production, (3) Image-to-video generation with a reference image, (4) Choosing between video generation providers (VEO, Kling, Sora, Runway, Seedance, MiniMax, Gemini Omni). Supports gateways: HeyGen API, fal.ai API, and the Gemini API (Gemini Omni Flash).

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.8万2026年10月13日 更新

ai-video-gen

無料

Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content production, (3) Image-to-video generation with a reference image, (4) Choosing between video generation providers (VEO, Kling, Sora, Runway, Seedance, MiniMax, Gemini Omni). Supports gateways: HeyGen API, fal.ai API, Kling official direct API, and the Gemini API (Gemini Omni Flash).

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.8万2026年10月13日 更新

atlas-cloud

無料

Generate or edit images and videos through the Atlas Cloud gateway. Use for Atlas-hosted Seedance 2.5/2.0, Gemini Omni Flash, MiniMax H3, Seedream 5.0, GPT Image 2, Nano Banana 2, or when one ATLASCLOUD_API_KEY should access multiple media model families.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.8万2026年10月13日 更新

calesthio のスキルをすべて見る

このスキルの問題を報告する