motion-effects

ブランドに組み込まれたモーションエフェクト

モーションデザイナーが手がけたように、製品、数字、言葉を動かす16種類のエフェクトです。それぞれがレシピになっています。内容、開始状態、終了状態、8秒のループ内で各パーツが動くタイミング、そして高級感を生み出すひと工夫が記されています。エフェクトを選び、実際に使う言葉を指定すれば、あなたの色と書体で一から作成されます。

始める前に： brand.md と MOTION.md があれば、先に読んでください。なければ、まず brand-intake を実行するか、16進カラーコード、フォント、ロゴファイルを尋ねてください。これらが揃うまでは、成果物をブランドに合っていると判断してはいけません。

ステップ1：4つの項目を尋ねてから待ちます

1. エフェクト。 16種類の中から、名前または番号で選んでもらいます。用途だけを説明された場合（「料金を見せる」「ローンチ名を表示する」など）は、下の表から最適なエフェクトを2つ提案し、選んでもらいます。
2. 実際に使うコンテンツ。 エフェクトに入れる言葉、ラベル、数字です。実際の数値を使うか、サンプルだと明示してもらいます。
3. サイズ。 1080 x 1080（正方形）、1080 x 1350（LinkedIn 縦長）、1080 x 1920（Reel）、1920 x 1080（YouTube）から選んでもらいます。
4. ループまたは停止。 ループは無限に繰り返します（投稿またはGIF向け）。停止は1回再生して完成フレームのまま停止します（ナレーションの背後に表示し、文の途中でリセットされないようにする場合）。

#	エフェクト	次のような用途に適しています
01	ボタン → プレーヤー	ランディングページやローンチメールに「デモを見る」という演出を加える
02	検索 → 結果	ヘルプセンターやコンテンツライブラリで見つかるものを紹介する
03	カード → ワークスペース	機能を発表し、小さなカードをエディター全体へと展開する
04	タブ → パネル	テキストを詰め込まずに、プラン、パッケージ、チャネルを比較する
05	チャート変形	週間の成果をクライアントレポートや成果投稿に掲載する
06	ダッシュボードズーム	ダッシュボードから重要なKPIを取り出して見せる
07	スプリングスタック	3つのオファー、事例、推薦コメントを順番に見せる
08	マグネティックドック	使用しているツールや、製品の連携機能を紹介する
09	マスク付き文字	キャンペーン名、号数、ローンチの見出しを表示する
10	弾性文字	タイトルカードでイベント、ウェビナー、ポッドキャストを始める
11	テキスト → レイアウト	見出しをカルーセルの表紙や記事のティーザーに変える
12	画像表示	新製品を予告してから、自分の写真に差し替える
13	パースペクティブシフト	サービス、ブランドシステム、技術スタックの階層を説明する
14	ガラスフォーカス	レポートの中で重要な一文に注目してもらう
15	流れるパス	1つのコンテンツが複数のチャネルに配信される様子を見せる
16	パーティクルロゴ	動画、リール、投稿を自社のロゴで締めくくる

ステップ2：レシピを確認します

references/effects.md を開き、選んだエフェクトの内容をすべて読んでください。開始状態、終了状態、タイミング、高級感を生み出すひと工夫を確認します。レシピが仕様です。デモ用の言葉をユーザーが実際に使う言葉に置き換え、各カラーの役割（背景、表面、文字、控えめな要素、アクセント、第2アクセント）を MOTION.md 内の色に対応付けます。

ステップ 3：構築する

次のルールに従って、自己完結型のファイル effect.html を 1 つ作成します。

1. 時計は 1 つ。 各フレームは時間だけをもとに計算します。window.seek(seconds) を追加し、呼び出された順序や回数にかかわらず、その時刻の正確なフレームを描画できるようにします。setTimeout は使わず、CSS アニメーションを自律的に実行せず、シード値のないランダム性も使いません。
2. ループは 1 回、8 秒。 0.0 から 2.2 まで動かし、6.6 まで停止し、8.0 までに戻します。seek(0) と seek(8) は同じフレームを描画する必要があります。ホールドモードでは動きを 1 回再生し、6.6 以降は終了フレームにとどまります。
3. 開始位置に戻す。 戻る動きでは、すべての要素を開始時とまったく同じ位置までイージングします。元の位置に瞬時に戻る要素があってはいけません。
4. 実際のコンテンツを使い、lorem は使わない。 ユーザーの言葉と数字を使います。サンプルの数字には、すべてのフレームで「illustrative」または「example」というラベルを見える形で付けます。
5. 自己完結型にする。 フォントを埋め込み、画像をインライン化し、ネットワークリクエストを行わないようにします。オフラインで開いても、毎回同じようにレンダリングされます。
6. 指示がない限り自動再生する。 ブラウザーで開いたらリアルタイムで再生し、URL が ?render で終わる場合は時計を止めて、エクスポーターが window.seek() を自ら実行できるようにします。
7. エフェクトを大きく表示する。 MOTION.md に記載された余白を設け、選択したサイズのフレームをエフェクトで満たします。広い空白キャンバスの中に小さなタイルとして置いてはいけません。

ステップ 4：表示する前に確認する

0、1、2.2、4.4、6.6、7.9、8 秒のフレームをキャプチャし、すべて確認します。

• ループ： フレーム 0 とフレーム 8 は同一です。
• 動き： フレーム 0、1、2.2 はすべて異なります。2 つが一致する場合、エフェクトの一部が動いていません。
• 収まり： どのテキストも枠からはみ出さず、7 つの時点のどのフレームでも切れていません。
• 静止画： 4.4 秒で一時停止します。その 1 枚のフレームだけでエフェクトの意図が伝わります。
• ブランド： 画面上のすべての色とフォントが MOTION.md に記載されています。

問題があれば修正して、もう一度キャプチャします。その後で初めて、ファイルパスとともに 2.2 秒と 4.4 秒のフレームをユーザーに見せます。

ステップ 5：エクスポートする

Now turn effect.html into a video and a GIF I can post. Use tools already on this computer. If you need something that is not installed, stop and tell me what it is before you install anything. Load the page with ?render, call window.seek() for every frame at 30 frames per second (240 frames for 8 seconds), and encode an MP4 in H.264 at [SIZE]. Then make a GIF that loops forever. Show me three frames from the finished GIF so I can check it came out right.

HyperFrames（npx skills add heygen-com/hyperframes）がインストールされていれば、これを 1 ステップで実行できます。

苦労して学んだこと

• 「プレミアムにして」とは、1つのオブジェクトの形を変えることです。 16種類のエフェクトはどれも、ボタンがプレーヤーに、バーが線に、カードがウィンドウに変わるように、あるものが別のものに変化します。ある画像から別の画像へフェードするだけでは、毎回安っぽく見えます。
• 実際に注目されるのはホールド中です。 8秒のうち4.4秒がホールドです。その間に何も動かないと、ループが止まっているように感じられます。各レシピでは、プログレスバーやカーソル、もう一筋の光など、小さな動きを残しています。
• 開始状態のゴーストを残すと、変化が伝わります。 ボタンやカードが最初にあった位置に薄い輪郭を残すと、目で動きを追えます。これがないと、最終状態が何もないところから現れたように見えます。
• すべてを一斉に動かすのではなく、少しずつずらします。 行やスラット、文字、ドットは、それぞれ直前のものよりわずかに遅れて動き始めます。すべてが同時に動くと、スライド切り替えのように見えます。
• フレーム0は、間違ったフォントで描画されました。 埋め込みフォントは、何かがそのフォントを使うまで読み込まれないため、最初のフレームは代替フォントで描画されることがあります。最初のseek(0)の前に、すべてのフォントを明示的に読み込んでください。
• 描き直すのではなく、拡大します。 固定座標で描画されたエフェクトは、キャンバスのサイズだけを変えると片隅に表示されてしまいます。描画全体を拡大して、フレームいっぱいに表示してください。
• ページが空白になる原因は、たいてい名前の二重宣言です。 ファイル間でヘルパーをコピーしたときに色定数が重複し、スクリプト全体が停止しました。名前はそれぞれ一度だけ宣言し、ページが空白ならコンソールの赤いエラーをClaudeに貼り付けてください。
• Reelのカットには8秒では長すぎます。 ループ全体をInstagramのBロールに入れたところ、動きのチェックに失敗しました。動きのある部分（約1.4秒）を切り出し、ナレーションの下ではホールドモードを使ってください。
• 時間の単位は1つに決めて統一します。 エクスポーターとページで、秒とミリ秒のどちらを使うかを一致させる必要があります。このパックでは、すべて秒を使っています。
• 作成した数値にはフレーム上でラベルを付けます。 デモ用のボードにある数値はすべて自分で作ったものなので、実際の数値を入れるまでは、すべてのエフェクトに「サンプル」というラベルを付けています。

引き渡し

effect.html、MP4、GIF、チェック済みの3つのフレームをユーザーに渡します。次のステップとして、同じグループから別のエフェクトを作るか、reel-exportを使ってセーフゾーンテキスト付きの縦型Reelにするかを、1行で提案してください。