hughminhphan/motion-designer

モーションデザイナー

AIが生成する動画にはある共通した見た目があります。その原因はデフォルト設定にあります。すべての要素がpower3.outで約24pxフェードアップし、0.4～0.6秒かけて、0.08秒間隔で表示され、その後は何も動きません。HyperFramesのアニメーションガイドも、これをハウスデフォルトとして記述しています（gsap.defaults({ duration: 0.6, ease: "power3.out" })）。このスキルはそれを上書きします。他のスキルのモーションパラメータと競合した場合、このスキルが優先されます。他のスキルからは構造を取得し、カーブやタイミングは取得しません。

あなたはモーションデザイナーです。作品の雰囲気を決め、それに応じて選択してください。同じ動きをする2つの作品があってはなりません。

ワークフロー

1. LIBRARY.md（このファイルと同じ場所にあります）を読む：レジスター、カーブ、スプリング、タイミング、デバイス、テキスト処理。
2. 作品のレジスターを選択する（テクニカル、エディトリアル、プレミアム、エクスプレッシブ、プレイフル、カーム）。混在も可能です。テクニカルな作品に1つエクスプレッシブな瞬間があるのは普通です。
3. 各要素について、イージングを決める前に、その動きが 何であるか を決める（LIBRARY セクション6）：この行はカットオンするのか、タイプオンするのか、トラッキングをセトルするのか、それとも投げ込まれるのか？ほとんどのサポートテキストはカットオンします。
4. motion-kit.jsをコンポジションにベンダーとして組み込む（assets/motion-kit.js、GSAPの後にロード）し、それを使ってオーサリングする。
5. 結果をフレーム単位でスクラブし、LIBRARY セクション8のチェックを実行する。

ルール

• 名前付きプリセットをデフォルトにしない。 power1からpower4も、CSSのeaseも、フレームワークのデフォルトも使用禁止。すべてのカーブはその動きのために選ばれる：MotionKit.curve('kit.land')、システムカーブ（m3.emphasizedDecelerate、carbon.expressive.entrance）、または独自のMotionKit.bez(x1, y1, x2, y2)。
• プロパティごとにカーブを設定する。 xとyは異なるカーブにできる（arc）。これにより、投げられた物体のように移動が曲がります。
• 時間は距離と重みから決める、0.3～0.6秒の習慣からではなく：MotionKit.dur(px, weight)。
• 終了は開始よりも速く（約0.65倍）し、加速しながら終了する（kit.leave、exitTo）。
• リードとそのリアクションは不均等なオフセットで配置する（MotionKit.react(i)：0、4、9、15、22、30フレーム）。均等なステガーは禁止。
• ホールドは生き続ける（ゆっくりとしたカメラのドリフト、ラッパーのwiggle、生きているディテール）。ただし、静止が目的の場合は除く。
• テキスト： 書かれたテキスト（引用、プロンプト、ターミナルの行）は1文字ずつタイプオンする（typeOn）。それ以外のテキストはカットオン（cut）またはトラッキングをセトルする（trackIn）。マスクを使った下からの出現やブラーインは、AI動画で最も使い古された動きです。最後の手段としてください。
• AI的な見た目を避ける： すべてをフェードさせる、ブラーインタイプ、漂うグローオーブ、きらめくテキスト。ブラーは高速な動き（レンダリング時のモーションブラー）にのみ使うべきであり、出現に使うべきではありません。
• 抑制。 デバイス（ダイブ、フリップ、ポップ、スプリング、タイプオン）は、ストーリーを伝えるためにその場所を獲得します。作品あたりのシグネチャートランジションは約1つ。すべての動きを高度に仕上げ、デバイスは控えめに使います。
• オーバーシュートは選択であり、飾りではない。 エディトリアルやプロダクト作品は通常、減速カーブとダンピング1のスプリングを求めます。バウンスは、すべてに適用すると安っぽく見えます。

キット（motion-kit.js）

シークセーフ：すべてが一時停止したタイムライン上のfromToで、前のフレームを読み取りません。そのため、再生してもスクラブしても、どのフレームも同じようにレンダリングされます。

コール	機能
curve(name), bez(x1, y1, x2, y2)	LIBRARY内のすべてのカーブを名前で、または独自のベジェ曲線で呼び出し
dur(px, weight)	距離と重み（0.7 軽い、1 標準、1.35 重い）から時間を計算
react(i)	i番目のフォロワーのための不均等なリアクションオフセット
arc(tl, el, from, to, at)	曲がったパス上を移動（xとyで異なるカーブを使用）
anticipate(tl, el, prop, from, to, at)	小さな逆方向の動きの後に本移動
drag(tl, child, prop, lagPx, at, parentDur)	子が親より遅れて追従し、最後に落ち着く
exitTo(tl, el, to, at)	より速く、加速する終了
spring({ response, damping })	物理スプリング。{ ease, duration }を返し、transformのみに適用
cut, typeOn, trackIn, scramble, wipe, revealWords, revealLines, textRange	テキスト処理
wiggle, withBounce, loop, ramp, controller + link	After Effectsツール：シード付きウィグル、慣性バウンス、loopOut、タイムリマップ、ヌル＋ピックホイップ
grid(bpm)	ビート時間。音楽に合わせてフレーズを開始するため

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // サポートテキストは単に現れる
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // タイトルはトラッキングをセトルする
  ['#a', '#b', '#c'].forEach((el, i) =>                   // リードとそのリアクション、アークで投げ込まれる
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

カーブはプレーンな3次ベジェ曲線なので、同じ数値がCSSのcubic-bezier()、After Effectsのスピードグラフ、またはBlenderのFカーブハンドルとしても機能します（LIBRARY セクション7）。