rossark0/rossark-motion-skill

解決すること

絵を動かすのは簡単ですが、生きているように感じさせるのは難しいものです。素朴なアニメーションはスライドショーのように見えます。顔は表情間をテレポートし、体は各ポーズで完全に停止し、すべてが同期して動き、まばたきはちらつき、形状には継ぎ目が見えます。このスキルは、実際のアニメーターが使う原則をコード化することでこれらの問題を修正し、AIエージェントが呼吸し、周囲を見渡し、体重を移動し、凍りついたりジャンプしたりせずに動作するモーションを生成できるようにします。

仕組み

このスキルは、一連のルール、テンプレート、ツールを提供します。シーン全体で1つのクロックを使用するため、すべてのパーツが同じ時間で動きます。パーツは実際のピボットを中心に回転し、後続のパーツは1ビート遅れて追従し、アイドルライフは決して止まりません。キーポーズを通る滑らかなパスを定義し、小さな振幅と強いカーブを持たせます。参照ビデオがある場合は、含まれているツールを使用してモーションをフレームごとに測定します。なぜなら、何かを生き生きと感じさせる微妙な動きは、目に見えないほど小さいことが多いからです。インターフェースのモーションについては、Emil KowalskiとBenji Taylorによる確立されたデザインルールに従います。リポジトリには、完全なスキルドキュメント（SKILL.md）、プロジェクト用のノートファイル（MOTION.md）、React NativeとSwiftUI用のすぐに使えるアニメーションエンジン、ライブフェイスコンポーネント、コンタクトシートの作成、エッジの追跡、色のサンプリングのためのツールが含まれています。デモは、テンプレートでレンダリングされた完全にコード化されたアニメーションシーンです。

対象読者

アプリやドローイングに命を吹き込みたいデザイナーやエンジニア。特に、AIコーディングエージェントを使用してキャラクター、生き物、植物、布、火、煙、水、天気、光、機械、アイコン、ロゴ、チャート、シーン全体をアニメーション化する人にとって有用です。エージェントが初心者レベルのアニメーションの間違いに陥ることなく。

ハイライト

• シーン全体で共有される1つのクロックが、機械的で同期していないモーションを防ぎます。
• パーツは真のピボットを中心に回転し、後続のパーツは遅延して追従するため、自然なフォロースルーが得られます。
• アイドルライフ（呼吸、まばたき、体重移動）は、アクションの間も続きます。
• 滑らかなflowカーブが各ポーズで停止する代わりにキーポーズを通り抜けます。
• 参照ビデオをフレームごとに測定して、目に見えないほど小さな動きを捉えることができます。
• React Native（motion.ts）とSwiftUI（Motion.swift）用のすぐに使えるエンジンテンプレートが含まれています。
• ライブフェイスコンポーネント（LiveFace.tsx / LiveFace.swift）は、滑らかに動き、まばたき、微笑む目と口を生成します。
• 完全にコードで60 fpsでレンダリングされた4つの完全なデモシーン（Reveal、Garden、Chef、Orbit）が付属しています。