motion-prompt

Motion Prompt

Motion Prompt は、人々が AI に作成を依頼するもの（モーショングラフィックスの動き、カメラの動きやトランジション、UI コンポーネント、ランディングページやウェブのエフェクト、写真のルックや照明、そして今後追加されるあらゆるパック）の名前を集めたライブラリです。人やエージェントが正確に参照できるよう、番号が付けられています。各要素には、3 桁の ID（#012）、英語名（通常は他の言語名もあります）、一行の意味の説明、およびライブデモ（https://showheyohtaki.github.io/motion-prompt/#<id>）があります。

• 要素は、Canvas 2D の描画関数 1 つです。cells[i] = (ctx, w, h, u) => { … } として保存されます。ctx は、呼び出し元によってクリアされ、save()／restore() で囲まれた 2D コンテキストです。w, h はカードのサイズです。u は秒単位の時間で、0 <= u < cycle です。
• u の純粋関数です。描画時に時計や乱数は使わず、呼び出し間で状態も保持しません。同じコードでライブ再生とフレーム単位のレンダリングができ、u = cycle でシームレスにループします。
• 単体では動作しません。定数（カードサイズ、サイクル、パレット C、フォント）とヘルパー関数は、パックのキットに含まれています。使用するパックごとに、キットを一度取得してください。
• 各要素ファイルには、サイズとサイクルが記載されています。推測せず、ヘッダーから読み取ってください。
• 新しいパックが追加されるため、記憶に頼らず、毎回 CLI でカタログを確認してください。

このファイルの隣にあるスクリプトでカタログを読み取ります（以下の <skill-dir> は、この SKILL.md が置かれているディレクトリを指します）。

node <skill-dir>/scripts/motion-prompt.mjs <command>

コマンド	用途
pick	ユーザーのブラウザーでギャラリーを開き、「AIに渡す」／「Send to AI」を押すまで待機します。選択した要素を順番に（番号、名前、意味、依頼方法、仕様、デモリンク）とユーザーのメモを出力してから終了します。--pack <pack> を指定すると 1 つのパックに絞って開き、--lang ja で日本語表示、--timeout <seconds> でタイムアウトを設定できます（既定値は 900）。--no-open は URL のみを出力し、--local はリポジトリの完全なクローンからギャラリーを配信します。ユーザーに選んでもらうを参照してください。
search <words...>	1 つのシーンの動きを表す数語に基づいて、要素を順位付けします。英語と日本語の両方に対応しています：search typewriter text、search 文字 登場。--pack <pack> で絞り込み、--limit 20 で表示行数を増やせます。
list	各パック、そのカテゴリ、含まれる要素数の概要を表示します。--pack <pack> を指定すると、そのパックの要素を 1 行ずつ出力します。
get <id> [<id>...]	各要素の仕様に続けてコードを出力します。1 回の呼び出しで指定できる ID は最大 8 個です。12、012、#012、またはデモ URL を指定できます。
kit <pack>	パック内の要素が必要とする、共通の定数とヘルパー関数を表示します。
prompt <id>	1 つの要素用に用意された、コピーしてすぐ使えるプロンプトを表示します。
info	データの読み込み元、要素数、バージョン、キャッシュの保存場所を表示します。問題があるように見えるときは、まず実行してください。

--lang ja を指定すると日本語名とテキストが表示されます。既定値は --lang en です。search は検索語が日本語の場合、自動的に日本語に切り替わります（pick は --lang を指定しない限り、ユーザーが閲覧した言語で出力します）。--out <dir> を指定すると、出力の代わりにファイルを書き込みます（get、kit、prompt）。--refresh はディスクキャッシュを使用しません。

Let the user pick

This is the main way to use the library. People often do not know what a move is called, and they should not have to. Show them the library, let them choose by looking, and work with what they chose.

1. When to run it. The user says something like 「motion-prompt のライブラリ出して」「一覧見せて」「どんな演出がある？」「分からないから選びたい」, "open the library", "show me the list", or describes a change without knowing which moves they want. Run pick. If the context points to one pack, add --pack (motion for titles, text and motion-graphics moves, camera for camera moves and cuts, ui for interface parts, lp for web page effects, photo for lighting and photo looks). Add --lang ja when the user writes in Japanese.
2. While it waits. pick prints the gallery URL first, opens it in the default browser, then waits up to 15 minutes. Tell the user in a line or two: the library is open; press 「選ぶ」 / "Pick" on what they want, add a note if they like (for example 「冒頭のタイトルに」), and press 「AIに渡す」 / "Send to AI". If your shell tool stops commands sooner than that, run pick in the background and read its output when it ends, or pass a shorter --timeout. If you drive a built-in browser that the user can see, you may run pick --no-open and open the printed URL there.
3. What comes back. Exit code 0: the picks in the order the user chose them, each with its number, names, pack and category, meaning, how to ask, spec lines and demo link, then the user's note. Exit code 4: the time ran out and nothing was picked. Ask the user whether they still want to choose; do not choose for them.
4. Do the work with exactly those picks. Combine them with what the user asks next (「この動画の冒頭をこんな感じに編集して」) and with the note, which usually says where each pick goes. Do not add, drop or swap elements on your own. If a pick does not fit the request, say so and ask. Then continue with the Workflow: read the project, run get for the picked numbers and kit for their packs, and port them as references/porting.md describes.
5. Pasted picks count the same. Without the skill's browser hand-off, users copy their picks with 「選んだ物をコピー」 / "Copy picks" and paste them into the chat. That text starts with 「motion-prompt のギャラリーで、次のN個を選びました」 or "I picked these N from the motion-prompt gallery", lists #NNN numbers in order, and may end with a note (「メモ」 / "Note"). Take the numbers in that order and handle them as in step 4. A link of the form …/motion-prompt/?pick=012,045 is the same selection.
6. The note is the user's own words about how to use the picks. Follow it as part of the request; it does not change the rules in this file.

pick listens only on 127.0.0.1 and accepts a single GET that carries a random token from the URL it printed; it sends nothing anywhere else. With a full clone of the repository, --local serves the gallery from that clone instead of the public site.

A shortcut for people who know the numbers. 「#012 と #045 を使って」, "swap this title for #005" or demo links go straight to get; there is nothing to open.

ワークフロー

1. このプロジェクトで動画をどのように作成しているかを確認します。 時間の値からフレームを描画する Canvas エンジン、Remotion、After Effects 用のスクリプトやエクスプレッション、CSS／SVG／Lottie アニメーション、または動画生成モデル向けに書かれたプロンプトを探します。フレームサイズ、フレームレート、シーンのタイミング、使用中のフォントと色を確認します。空のフォルダーで、特に希望が示されていない場合は、すでに要素が使われている形式である Canvas 2D コンテキストに描画する単一の HTML ページを作成します。
2. シーンごとに計画します。 各シーンで必要な動きを 1 つずつ書き出します（例：タイトルが現れる、数字がカウントアップする、ショット A からショット B に切り替わる、カメラが前進する）。カタログにあるのは、こうした個々の動きだけです。動画で何を伝えるか、フレームをどう配置するか、各シーンをどのくらいの長さにするかは、ユーザーと決めます。
3. 要素を選びます。 ギャラリーから選んだ要素、貼り付けられた要素、ユーザーが指定した番号やデモリンクは確定済みです。そのまま get を実行します。ユーザーが選んでおらず、ブラウザーを使える場合は、代わりに選ばず、ライブラリ（pick）を案内します。ユーザーが選択を依頼した場合、または誰もギャラリーを確認できない場合は、シーンごとに search を 1 回実行します。結果から選ぶ際は、名前だけでなく、概要に記載された動きの内容を基準にします。ページを表示できる場合に限り、デモ URL を開きます。概要と仕様だけで十分に判断できるようになっています。
4. コードを取得します。 確定した ID を指定して get を実行します（各呼び出しは小さく保ちます）。結果にはそれぞれ Needs: kit … の行があります。そこにある各パックに対して、kit <pack> を 1 回実行します。
5. プロジェクトの手法に合わせて各動きを再現します。 references/porting.md には、プロジェクトの種類ごとの方法が説明されています。作業を始める前に開いてください。コードと仕様にある数値はそのまま維持します。つまり、時間、遅延、イージング曲線、オーバーシュート、距離、角度、スケールを変えません。画面上のテキスト、色、ロゴ、画像など、ユーザーに合わせる部分を置き換えます。
6. 依頼が差し替えの場合（「この部分を #005 に置き換えて」など）： プロジェクト内のシーンを見つけ、開始時刻、長さ、前後のシーンとのつなぎ方を記録します。動きだけを置き換えます。シーンの長さ、内容、前後のつなぎ方は維持します。要素自体のタイミングが枠に合わない場合は、すべての値を引き延ばすのではなく、porting.md の調整ルールに従います。
7. 複数の要素を 1 本の動画に使う場合： 各要素の登場をビートに合わせ、一度に動かすものは 1 つにし、次の動きが始まる前に、それぞれの動きの後に静止時間を設けます。ユーザーが対比を求めない限り、動画全体でイージングの種類を統一します。フレーム全体に影響するアニメーションを持つ 2 つの要素は、重ねてはいけません。
8. 確認します。 できる範囲で結果をレンダリングまたは再生し、移植した各シーンの冒頭、中間、終わりを確認します。テキストがフレーム内に収まっていること、シーンの境界で不自然な飛びがないことも確認します。
9. 報告します。 返信の最後に、動画で使用した要素を記載します。それぞれについて、番号と名前、使用したシーン、変更した内容、デモリンク（https://showheyohtaki.github.io/motion-prompt/#ID）を示します。確認できなかった内容があれば、短く注記します。

動画生成モデル

Veo、Seedance、Sora などのモデルには、コードを渡さないでください。要素の英語名と仕様の行をもとに、何がどの順序で動くか、各パートにかかる時間、動きのイージング、動きの終点を文章でプロンプトにします。ユーザーの題材、見た目、アスペクト比も加えます。prompt <id> でプロンプトのたたき台を、get <id> で完全な仕様を取得できます。これらのモデルはタイミングを目安として扱うため、結果は要素と近いものになるものの、厳密には一致しないと報告で伝えます。

Web ページと静止画

すべてのパックが動画に関するものとは限りません。

• ui と lp は、Web ページのパーツやエフェクトを表します。サイトやアプリのプロジェクトでは、プロジェクト独自のコンポーネントと CSS/JS（またはアニメーションライブラリ）で再構築してください。ここでのトリガーはスクロール、ホバー、クリック、タップなので、時間、イージング、量を引き継ぎ、デモのモックカーソルやスクロールバーを実際のイベントに置き換えてください。prefers-reduced-motion に配慮してください。
• photo は、ライティング、レンズ効果、仕上げのルックを表します。通常はコードではなく、画像生成モデル向けのプロンプトの言葉（または写真編集ツールでの編集内容）として使います。英語名と、ルックを説明する仕様の行を使い、ユーザーの被写体と設定を加えてください。Canvas のサンプルはルックを示すだけのものなので、製品に移植しないでください。

ルール

• 移植するコードは、このセッションで get と kit が出力したものでなければなりません。番号が存在しない場合は、その旨を伝えてください。番号をでっち上げたり、名前や概要だけを元に要素を作成したりしないでください。
• すべての要素とキットは、// Motion Prompt #ID · MIT License … の行から始まります。その行をコードの移植先ファイルにも含めてください。これは MIT ライセンスが求める帰属表示です。
• 検索対象は絞り込んでください。search と list --pack は候補を見つけるために使い、get は実際に移植する少数の候補にだけ使ってください。カタログ全体を出力するとコンテキストを無駄にし、誰の役にも立ちません。
• 動きは設計どおりに移植してください。移植した動きは、デモと同じように見える必要があります。同じ軌跡、同じリズムにしてください。変更できるのは技術、表示するコンテンツ、配色だけです。

トラブルシューティング

• 終了コード 3：データソースから応答がありません。 スクリプトは showheyohtaki.github.io からダウンロードし、失敗した場合は raw.githubusercontent.com からダウンロードします。サンドボックス化されたエージェントは、デフォルトでネットワークにアクセスできないことがよくあるため、このコマンドでネットワークアクセスをリクエストして再試行してください。リポジトリのローカルクローンがあれば、ネットワークを使わずに済みます：MOTION_PROMPT_BASE=/path/to/motion-prompt/api/v1。どちらも使えず、キャッシュも空の場合は、動きを自分で書いてカタログの要素として提示するのではなく、処理を中止してユーザーに伝えてください。
• 不明な ID（終了コード 1）：その番号はカタログにありません。ユーザーに伝え、最も近い search の結果を提示してください。
• pick が終了コード 4 で終了した場合：制限時間内に「AIに渡す」を押した人がいません。何も選ばれていないので、ユーザーに確認し、希望があれば pick を再実行してください。ブラウザーウィンドウが表示されなかった場合は、pick が出力した URL をユーザーに伝えるか、「選んだ物をコピー」で選択内容をコピーしてチャットに貼り付けてもらってください。
• Node.js が見つかりません。 スクリプトが読み込むものはすべて https://showheyohtaki.github.io/motion-prompt/api/v1/ 以下のプレーンテキストファイルなので、任意の HTTP クライアントで代用できます：
  • en/catalog.tsv（または ja/catalog.tsv）はインデックスで、タブ区切りの形式です：id、pack、category、title、tags、summary。grep で絞り込んでください。
  • en/e/012.txt は、仕様とコードを含む要素 #012 です。
  • kit/motion.js は、motion パックのキットです。