モーションエフェクトピッカー
出典: tools/repos/awesome-ai-motion (MIT; GSAPは無料ライセンスの下でバンドルされています。ATTRIBUTIONS.md を参照)。637枚のエフェクトカード、そのうち128枚はレンダリング済みクリップとHTMLテンプレート付き、11のレシピ、決定表。インデックス全体を読まずにクエリしてください。
手順
- シーンの意図と媒体を一文で述べる(「動画の冒頭、ショートを開く質問」など)。
- クエリ:
python -S studio.py motion find reveal --purpose attention --medium shorts --rendered --limit 8
python -S studio.py motion show mask-reveal
python -S studio.py motion recipe # レシピ一覧
python -S studio.py motion recipe edu-hook # 時間とパラメータ付きの手順
目的: attention, explanation, comparison, sequence, emphasis, transition, data, feedback, atmosphere, branding。
媒体: explainer, shorts, scrolldeck, presentation, product-demo, data-story, web-ui。
--family、--level も使用可能。
3. 候補を2〜3個選び、各カードの use_when、avoid、params、ease、pairs_with を読む。まずカードのデフォルト値を使い、その後調整する。
4. 共通ルールに従って構成する: 1シーンにつき1フォーカス、1メインアクション+最大2つのサポートアクション、終了状態は読めるだけ十分に保持、transform と opacity のみを使用。
5. 時間の純粋関数として実装する。カードの snippet はGSAPですが、それを翻訳し、インポートしないでください:
- 秒から進行度へ:
p = clamp((t - start) / duration); スガーはstart + i * gap templates/motion-helpers.jsからのイージング(easeOut、easeIn、easeInOut、backOut、elasticOut、spring):power3.outはeaseOut(3)yPercent: 110 -> 0はoverflow: hiddenウィンドウ内の行でtranslateY(110% -> 0%)
motion-ui-polish(トークンとゲート)を使って構築し、開始時、メインアクション時、終了状態のフレームを確認し、カードのgood_exampleと比較する。
テンプレートが存在する場合
show が html_template を出力したら、それを開いて構造とタイミングを確認し、ジョブの source/ にコピーし、テキストまたはデータを置き換えます。タイムラインは維持します。Playwrightの依存関係をインストールせずにカタログの render.mjs を実行しないでください。パイプラインは vstudio またはHTMLレンダラーを通じてレンダリングします。
最初の5秒間(教育・解説動画)
0〜1秒: 質問または驚くべき結果。1〜3秒: メカニズムまたは比較への手がかり。3〜5秒: 読めるホールド付きの学習の約束。1画面につき1つの主張。カメラの大きな動きは、質問または結果を明らかにするためだけに使用します。motion recipe edu-hook から始め、次に mask-reveal、split-compare、count-up、annotation-callout を使用します。
制限
- カードのパラメータ名は一部韓国語です。値、範囲、
ease、snippetは言語に依存しません。説明とプロンプトは英語で返されます。 plannedカードにはクリップやテンプレートがありません。パラメータとプロンプトのみを使用します。- 使いすぎたエフェクトは生成的に見えます。1つのエフェクトを1シーン内の複数の要素に繰り返したり、同じ瞬間に3つのエフェクトを重ねたりしないでください。