madhavsomani/animation-skills

Canvas explainer Reel（キャンバス説明リール）

2026年10月に履歴書アドバイス用リールとして初めて作成され、その後繰り返し使える公式として保存されました。

• 実例：template/example-08-resume.html（そのリールの完全なHyperFrames構成ファイルです。メディアアセットは含まれません）。
• スクリーンショット：../../docs/canvas-explainer/。

適用されるハウスルール：アバターは短い間隔（約3〜4秒）で画面上に表示し、フル品質のマスターのみを納品すること。エンジン：HyperFrames（[email protected]に固定）。FFmpegは準備とQAのみに使用。

フォーマル（すべてを維持すること）

1. 1つの無限の黒いキャンバス。 #worldを2400x6400で使用し、微妙なドットグリッドを配置します。カメラは決してカットせず、power3.inOutで滑らかに移動し、大きな動きには短いモーションブラーをかけます。
2. すべてが話された単語のタイミングでライブ描画される。
   • マーカーのストロークは、ラフなfeDisplacementMapフィルタを適用したSVGパスです。
   • 手書きラベルはInk Freeフォントを使用し、steps()でタイプライター風に表示されます。
   • 色：白 #f4f4ef、黄色 #ffd84a、青 #6f8cff、ピンク #ff6fae、緑 #7ee08a、赤 #ff4b3e。
   • 赤い矢印と丸で重要なものを指し示します。
3. 実際のテックアーティファクトを使い、単なる抽象的な落書きだけにしない。 ソフトウェアエンジニアリングの視聴者は、実際のアーキテクチャ、コード、ターミナル、実際のスクリーンショット、実際のドキュメント（例：一部を伏せた履歴書）を求めています。これらをボックスや手書きで注釈付けします。
4. キャンバス上のスケッチフレーム内にアバターを配置。
   • フレームは405x720（9:16）。カメラがフレームにズームインすると（s = 1080/405）、映像が全画面になります。このズーム自体がトランジションです。映像の上に手書きで注釈を重ねます。
   • アバターの合計時間はランタイムの40%未満（約20%を目標）に抑えます。フックの1拍、中間の「パーソナル」な1拍、クロージングの3か所に使用します。
5. 空画面禁止。
   • 各領域はビュー内のy 120〜1500を占めます。
   • カメラ移動中に、領域間に赤いコネクタ矢印が描画されます。
   • カメラが到着すると同時に黄色のヘッダーが配置されます。
   • キャプションはy 1555〜1720に配置し、Ink Free 64px、黄色のキーワードを使用します。結合されたキャプションHTMLを内部の<span>でラップしないと、flexがスペースを削除します。
6. エンディング。
   • カメラは描かれたマップ全体（s ≈ 0.31）までズームアウトし、半透明（0.58）のエンドカードの背後に表示されます。
   • CTAは音声で話されます。例：「履歴書が欲しいですか？「resume」とコメントしてください。テンプレートとしてお送りします。」キーワードを黄色で大きく表示します。
   • 共有されたリソースをコピーしないように視聴者に指示しないでください。リソースは視聴者が自由に使えるものです。
7. サウンド。
   • 音声の下に音楽を敷き、~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <dir with node_modules/@hyperframes/core>でカットします。--coreは、@hyperframes/coreがインストールされている任意のプロジェクトフォルダを指定します。
   • 音声の隙間とズームアウト時に音楽を盛り上げます。
   • SE：チェック/ラベルにペンクリック、コードにタイピング、カメラ移動にページめくり/ウーッシュ、ポップアップにスウィッシュスラッシュ、最後にチャイム。
   • 音楽はInstagramで安全に使用できるものにしてください（下記「音楽」参照）。

ビルド手順

1. 入力。
   • 音声WAVファイル、-16 LUFSにノーマライズ済み。フック＋ナレーションを連結。
   • 単語タイミング word@seconds：整列されたJSONまたはclips.jsonキャプション。words.txtとして保存。
   • アバターMP4：メディア時間は音声時間からフック長を引いたもの。
   • 実際のアーティファクト画像。
2. ストーリーボード領域。 各ビートについて、ワールドの原点を選び、話された単語の時間とともに描画リストを作成します。テキストが1080pxビュー内に収まるようにします（Ink Freeは1文字あたり約0.5em）。
3. template/example-08-resume.htmlを新しいプロジェクトフォルダにコピーし、領域ブロック、フレーム（各`<video class=