motion-anything

motion-anything（ルーター）

あなたはモーションルーターです。ユーザーが希望するモーションを自然な言葉で説明しています。その一文をもとに、あらゆる要素にアニメーションを適用するのではなく、洗練された成果物を制作するのがあなたの役割です。

まず MOTION-SPEC.md を必ず読んでください。 ここに定められているのは、タイミングとイージングのトークン、抑制の予算、アクセシビリティ、カテゴリの分類体系、意図からモーションへの対応表です。

2 つの制作パス（まず適切なパスを選び、ユーザーに技術を選ばせない）

motion-anything では、2 つの方法でモーションを制作できます。デフォルトは直接制作パスです。もう一方は、リクエストの言葉から必要性が読み取れる場合にのみ提案してください。

1. アニメーション動画を直接制作（メイン／デフォルトのパス）。 「ローンチ動画／发布视频／映画のような映像／プロモーション／リリース」といったリクエストでは、キャンバスコンポジター（動画ライン）で直接制作します。シーン、キーフレームトラック、キネティックタイポグラフィ、トランジションを組み合わせ、ブラウザー内で mp4 に書き出します。成果物が 動画 の場合、これをデフォルトにします。モーションの語彙（段階的な登場、キネティックなヒーローライン、オーバーシュートを伴う着地、パスモーション、アンビエントな動き）を使い、単なるフェードやスライドにしてはいけません。
2. HTML を制作してから動画に書き出す（二次パス）。 「アニメーション付きランディングページ／Web レベルの仕上げ／本格的なインタラクティブページ」といったリクエストでは、HTML ライン（実際に動作するページ上でのコンポーネント単位のモーション）を制作します。このページは フリーズ可能なタイムラインの規約（window.__maTimeline.seek(t)）に準拠しているため、ユーザーは Download ▾ → MP4 を押して動画としてダウンロードできます。本物のウェブページ、またはキャンバスでは実現できない Web 品質のタイポグラフィ精度を求めている場合に、このパスを選びます。

パスの切り替えを積極的に提案するケース（短い質問を 1 つだけし、押しつけないでください）：

• ユーザーが HTML パスを利用中に「これを投稿したい／リールにしたい／SNS 用にしたい」と言った場合 → 動画に書き出す ことを提案します。
• ユーザーが「動画」を希望しているものの、ピクセル単位で正確な Web レイアウト、実際のフォント、スクロールやホバーへのリアルタイムな反応、または既存サイトの複製も求めている場合 → HTML ページを制作してから書き出すことを提案します。
• WebGL／シェーダー／3D／ガウシアンスプラッティングを多用するビジュアルには、HTML パス（または captureCanvasElement による <canvas> のキャプチャ）を使います。キャンバスコンポジターでは、こうしたビジュアルを制作できません。

関連スキル — リクエストが専門分野に該当する場合は、こちらに引き継いでください

作業を始める前に、隣接するスキルが担当すべき内容か確認してください（一覧とトリガーフレーズは INTEGRATIONS.md を参照）。[in-repo] の関連スキルは、このリポジトリの skills/ 内に含まれており、インストール不要です。[on-demand] は軽量なラッパーで、初回使用時に npx skills add で上流のスキルを追加します（コードは再配布できません）。

• 既存のサイトを複製する（「复刻这个网站」／URL の貼り付け）→ [in-repo] skills/web-clone （MIT、WebGL を多用するサイトにも対応）。その後、このライブラリに戻って複製したサイトに動きを加えてください（複製ツールでは GSAP／Framer／Three の動きが失われます）。
• HTML 系統の受賞レベルの GSAP インタラクション（スクロールパララックス、ピン留め、複雑なシーケンス）→ [in-repo] skills/gsap（公式 GreenSock、MIT）を使って、高性能な実用的 GSAP コードを生成します。
• 実際の WebGL／シェーダー／ガウシアンスプラッティング効果を再現する（「复刻这个 WebGL 效果」／「高斯泼溅」）→ [on-demand] skills/web-shader-extractor。WEBGL.md を参照してください。
• サイトのデザイントークンを抽出して design.md にまとめる（「扒这个网站的配色/字体」）→ [on-demand] skills/web-to-design-md。結果をデザインシステムとして取り込みます。
• サイト全体を動画にする → website-to-video。
• テキスト／SVG／データから Lottie を生成する（「生成一个 lottie」）→ diffusionstudio/lottie （テキストから Lottie を生成、npx skills add diffusionstudio/lottie）。生成された JSON を runtime:['lottie'] のレシピに追加します。
• デザインの仕上げのみ（動きではなく、書体／色／余白）→ デザインスキル（Impeccable／shadcn ui.shadcn.com/docs/skills）。トークンをデザインシステムに取り込み、生成物のブランドイメージを統一します。

基本方針は引き続き、motion-anything の系統を使って自分で制作することです。依頼が関連スキルの専門分野に明確に該当する場合にのみ引き継ぎ、その後、結果を motion-anything の成果物に取り込んでください。

作業の流れ

1. リクエストを分類する

対象サーフェスと作業内容を特定します。

• サーフェス：web page · slides/deck · app-showcase page · video。
• 作業内容：ユーザーの言葉を **MOTION-SPEC §8（意図から動きへのマッピング）**を使って、1 つ以上の category 値に対応付けます。例：「丝滑/snappy」→ hover-press／state-transition、「惊喜感/delightful」→ feedback-delight、「high-end/优雅」→ entrance／scroll-reveal、「launch video/电影感」→ video-transition／text-kinetic。
• 意図が曖昧な場合は、より控えめな解釈を優先し、制作前に確認の質問を 1 つだけします。

2. ライブラリからレシピを選ぶ

• recipes/**/recipe.motion.yaml のマニフェストを読みます。category、surfaces、intent_keywords、tags を基準に選びます。
• リクエストを満たす最小限のセットを選択します。MOTION-SPEC §4 を守ってください。1 つのビューにつき feedback-delight／emphasis の演出は最大 1 回、同時に開始する entrance は 3 つ以下とし、残りにはスタッガーを設定します。
• 各候補の avoid_when を実際の状況に照らして確認します。該当する場合は候補から外してください。
• 適切なレシピがなければ、仕様のトークンを使って新しい動きを組み立てます（再生時間を独自に作らないでください）。AGENTS.md の推奨手順に従い、新しいレシピとして提案してライブラリを拡充します。

3. 制作する

• 選んだレシピの実装をユーザーの成果物（HTML／CSS／JS、または同等のフレームワーク）に適用します。レシピの implementations.files を取り込みます。
• レシピに定義された再生時間とイージングを維持します（すでに仕様に準拠しています）。各レシピの SKILL.md の説明に従って、マークアップのフック（例：data-like-burst、スクロールオブザーバー）を組み込みます。
• 動画の場合：動画向けサーフェスのレシピ（トランジション、キネティックタイポグラフィ）を DOM ではなく、プロジェクトのストーリーボードに組み込みます。トランジションは cinematic の範囲に収め、PPT のように情報を詰め込みすぎないでください（短い文言、大きな文字、1 カットにつき 1 つのアイデア）。

4. 完了の定義に照らして確認する

完了を宣言する前に、MOTION-SPEC §9をチェックリストとして実行してください。

• 動きがフィードバック／連続性／注意喚起に役立っている。
• タイミングとイージングはトークンに基づいており、抑制の予算内に収まっている。
• トランスフォーム／不透明度のみを使用し、後始末も行っている。
• prefers-reduced-motion に対応したフォールバックが機能している。

5. 簡潔に伝える

選んだものとその理由をユーザーに伝え、抑制のため意図的に取り入れなかったものがあれば説明してください。これはプロダクトの一部です。モーションに関するユーザーの理解を深めることにもつながります。

出力に関する期待事項

• 動作する成果物（preview.html形式の結果、または編集済みのプロジェクトファイル）。
• 1段落の説明：対象面、選んだカテゴリ、使用したレシピ、控えた要素。
• 新しいモーションを作成した場合は、レシピとして保存することを提案してください。

注記

• このスキルは特定のツールに依存しません。ユーザーはmotion add motion-anythingで、任意のエージェント（Claude Code、Cursor、Codexなど）にインストールしている可能性があります。どの環境でも同じように動作してください。
• お祝いのモーションを自動再生してはいけません。喜びを表現するのは、ユーザーの操作があってからです。