モーションデザイン（コードで作る）
まず最初に確認すること
- フォーマットと尺（例：リール 9:16 1080×1920 30fps）、公開先
- ブランドのカラー、フォント、ロゴ、および変更不可の要素（ロゴはそのまま使用）
- 参考スタイル（動画または画像）、テキストの有無、グラフィックのみかどうか
- 最終編集をユーザーが行うか（Premiere/After Effects）：その場合は単一動画ではなくクリップで納品
エンジン
- Node +
@napi-rs/canvas で描画、ffmpeg でエンコード
- 各フレームは時間の純粋関数
draw(ctx, t)：フレーム間で状態を持たないため、任意の瞬間を再生成・確認・並列レンダリング可能
- ファイルは機能別に分割：ライブラリ（パレット、フォント、イージング、バネ）、シーケンス、背景、レンダー、コンタクトシート、解析
- WindowsではPythonは
py
動き
- バネ（減衰バネの応答）を使用：入りと移動には力強いスタート、ソフトな到達、わずかなオーバーシュート。3～4のプリセット（標準、高速（出用）、低速（大きな移動用）、ソフト）を保持し、ばらつきを避ける
- 図形のモーフィングや線が描かれる動きにはソフトなイーズイン・イーズアウト
- モーションブラー：180°シャッターで4サブフレームを平均。レンダリングが遅くなるため、プレビュー用にブラーなしオプションを用意
- 直列の要素間には0.05～0.15秒のずれ
- エレガントなスタイルの場合はカートゥーン的な跳ね返りなし。リラックスしたテンポ、アクション間に余白
連続性
- 「変形する一つの形状」スタイル：各シーンは前のシーンの形状から生成され、カットなし
- 変形中に要素が消えて再出現しない：元の要素の描画が終了するのと同じフレームで、その子孫が同じ位置・サイズ・色で生成され始める
- 二つの形状が入れ替わる場合、入れ替わりの瞬間に回転・スケール・色を共有。クロスフェードは重なる（空または二重のフレームが発生しない）
- 大きな白い塗りつぶし：フェードインではなく中心から満たしながら拡大（フェードインだとグレーに見える）
- スタイルが求める場合、静止を避ける：呼吸、ゆっくりした回転、浮遊、小さなカメラのプッシュイン
チェック
- レンダリング前にフレームのコンタクトシート（連絡票）を作成
- 解析スクリプト：0.5秒ごとに画像の変化量を測定し、静止部分や急な動きを検出
ffprobeで最終ファイルの尺、解像度、fpsを確認
書き出し
- プレビュー/SNS：MP4 H.264
-crf 14 -pix_fmt yuv420p
- 編集用：MOV ProRes 422 HQ 10ビット
- 音声は後で追加：
ffmpeg -i video.mp4 -i audio.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest finale.mp4
Instagramリール
- グラフィックの中心は (540, 960)；有効幅は最大約900px
- プロフィールグリッドは中央を4:5 (1080×1350) および3:4にトリミング：キーコンテンツはy約420から1500の間
- 下部と右側にはキャプションとアプリボタンがあるため、それらのスペースを空けておく
- その他の書き出しサイズについては
graficaプラグインを参照