html-reel

HTML リール

HTML シーン · DreamCut · MCP 経由で Fil のビデオエディターを操作 · ffmpeg。 フレームワークを使わないシーンエンジンは scripts/reel-clock.js にあります。

リールとは、映像を合わせた声です。このスキルでは、すでにあるソース（ツイート、ランディングページ、YouTube 動画、動画ファイルなど）からリールを作成します。ソースが伝える内容をそのまま伝え、見た目もソースに合わせます。言葉は台本になり、メディアは映像になり、フォントと色はタイトルになります。映像はすべて言葉に合わせます。タイトルは該当する単語のところで表示され、デモはその名前を挙げるセリフのところで切り替わり、効果音は見せ場に合わせて鳴ります。最初の草稿からクリエイターが登場し、カメラを置く位置に逆光のシルエットとして立つため、一言も録音する前にリールが完成します。録音したテイクでその姿を置き換えれば、シーンはひとつのクロックから描画される HTML なので、アニメーションを作り直さなくても、すべてを実際の話し方に合わせてリタイミングできます。

使い分け。 Web ページ上のアプリウィンドウをライブ表示する場合（動画ファイルは不要）は、html-demo を使ってください。単独で完成度の高い画面録画を作る場合は、browser-video-recording を使ってください。音声なしでページを一定の長さのモーション作品にする場合は、website-to-motion-design を使ってください。ソースをもとに、声に合わせて編集した縦型動画を成果物として作る場合は、このスキルを使ってください。

制作の経緯。 2026 年 10 月、HTML Demo のローンチリール（Meng To 作、fil.design/skills/html-demo）から抽出しました。24.7 秒の参考リールの 8 つのレイアウトを調査し、クローンした ElevenLabs の声で仮ナレーションを作成し、スキルページを DreamCut で 4 回録画し、HTML の冒頭と末尾をフレームごとにレンダリングし、Fil のビデオエディターで 3 つの草稿を作成しました。さらに、各ラウンドで 2 人の審査員によるブラインド評価を行い、本人が録音したスマートフォンでのテイク 2 本を、本人の単語ごとのタイミングに合わせて 1 本の 33.7 秒のリールに編集し、後日、横向きのテイクも同じ方法で間をカットしてリタイミングし、37.5 秒にしました。その後、汎用化しました。本人の投稿 3 件（MiniMax のランディングページ、リバースエンジニアリングしたスマートホーム、Anatomy スキル）を、それぞれ独自のルックのリールにしました。最初は顔出しなしで作り、その後、カメラのレイアウトに仮の人物を入れて再度作成しました（最初は本人のインク画、次にスタジオの逆光シルエット）。映画的なタイポグラフィとキャプションを加え、Fil で確認する前にローカルでプレビューしました。以下のファイルと数値は、これらの実行結果に基づいています。

仕組み

すべての配置は単語ごとのタイミングに基づき、描画されるものはすべて t の純粋関数です。 各 HTML シーンは、540 × 960 のステージ（2 倍の 1080 × 1920 でレンダリング）上のすべての要素を、シーン開始からの秒数 t を使って window.__frame(t) 経由で設定します。レンダラーは各フレームでこれを 1 回呼び出してスクリーンショットを撮るだけで、クロックは参照しません。そのため、実際のテイクができたら、単語のアンカーを使って実時間 τ から仮ナレーションの時間 t への区分線形マッピングを作成し、シーンを t = W(τ) で再レンダリングできます。新しい話し方に合わせた同じアニメーションになり、カクつきもありません。

これがなければ、リールを人の話し方に合わせることはできません。CSS タイムライン、GSAP タイムライン、タイマーでアニメーションするシーンは、それぞれ独自のペースで再生されます。新しいテイクに合わせるには、セリフごとに手作業でアニメーションし直す必要があり、そのたびにカットのタイミングが数フレームずつずれていきます。画面録画もリタイミングできないため、イベントの位置でカットし、各パートの速度を個別に調整することになります。

// hook.js, on reel-clock.js: times are the scratch voice's words.
const T = { look: 0.27, recording: 1.1, zoom: 3.25, sharp: 4.54, html: 7.22 };
HTMLReel.scene({
  dur: 8.6,
  anchors: ANCHORS,                       // [[τ, t], …] once the real take exists
  draw(t, $) {
    $('#win').style.transform = `scale(${1 + 2.8 * ease(t, T.zoom, T.zoom + 1.2)})`;
    $('#w-recording').style.transform = `translateY(${(1 - word(t, T.recording, 2.2)) * 135}%)`;
    $('#tags').style.opacity = ease(t, T.html - 0.3, T.html);
  },
});

scripts/render-frames.mjs は、このようなページを MP4 にレンダリングし、各フレームでセーフエリアを確認します。Fil のビデオエディターは同じページを HTML シーンとして再生し、クロックをフレームごとに進めます。ブラウザーでは ?controls を付けてライブ再生できます。

ワークフロー

1. ソースを読む（scripts/read-source.mjs <tweet | page | YouTube | file> --out source --follow、references/source.md）。Source.mdを完成させます。内容は、ソースの言葉を一字一句そのまま、リールで使える事実、一つのアイデア、フック、誰の作品か、呼びかけです。測定した内容とフレームをもとにLook.mdを完成させます。形、地面、インク、アクセント、三つの役割（セットアップ、ペイオフ、ラベル）を持つ書体、背景、モチーフ、動きを記載します。
2. 構成、形、レイアウトを選ぶ（references/structures.md）：プロモーション（参考リールから学んだreferences/formula.md）、ショーケース、「見つけた」、解説、ビフォーアフター。9:16、4:5、1:1、または16:9。そして各ビートのレイアウト、呼びかけが大きくなるにつれて大きくなるクリエイターの顔（フックにはなし、バブル、画面の半分、呼びかけでは全面）。顔出しなしにするのは、クリエイターがカメラに映らない場合に限ります。クリエイターが気に入った参考リールから取り入れるのは構成とタイミングであり、見た目ではありません。
   • カメラのプレースホルダーを作る：逆光のスタジオで撮影したシルエット写真。クリエイター（または任意のモデル）の写真を使い、柔らかく光る温かみのあるクリーム色の背景に対して、後ろからのみ照らします。顔は影の中にあり、特徴がかすかに見える程度。頭と肩を正面に向け、レンズを見つめる姿勢で、縦9:16。鼻はフレームの中央、あごは上から約60％の位置に配置し、「CAMERA · PLACEHOLDER」とラベルを付けます（Filでは画像ノードを使い、Nano Bananaで写真を編集）。各カメラレイアウトでテイクに置き換わるまで使います。同じ構図で撮影したテイクなら、リフレーミングは不要です。
3. Source.mdをもとに、クリエイターの声でスクリプトを書く。ビートごとに1行とし、本人の言葉を短くします。使う事実はSource.mdに記載されたものだけとし、他者の名前はクレジットに記載します。読者のペースではなく、声のペースに合わせて分量を調整します。クローン音声は文の間のポーズを含めて毎秒約2.2～2.4語、カメラに映る本人は約2.6語なので、30秒なら約65～70語です。耳で聞いて自然になるように書きます。数字や名前は発音どおりに書きます（「five point oh」「Rea」）。大文字表記は画面上だけにします。各行にレイアウト、映像の内容、各動きが着地する単語を記します。
4. 単語ごとのタイムスタンプ付き音声を作る（scripts/vo-words.py：ElevenLabsのwith-timestamps、クリエイターのクローン音声、環境変数から取得するキーは表示しません。応答全体が保存されるため、音声は無料で再生成できます。スクリプトはペースも出力します）。顔出しなしのリールでは最終音声、テイクを撮る場合は仮音声として使います。次に進む前に、発話内容を確認します。Filの字幕を付けるか、ローカルのwhisperで、スクリプトと単語ごとに照合します（特に名前と数字）。
   • 1～2秒ほど長すぎる場合：scripts/tighten-voice.pyを使います。別テイクに費用をかけずに、長いポーズの中間を切り、単語もそれに合わせて移動します。
   • すべての単語に名前を付けます（scripts/named-times.py：T.zoom、T.skill2、T.htmlEnd）。以後はすべてその名前を基準にカットします。 1ドルを超える出費がある場合は、事前に確認します。
5. ソースの見た目で映像を作る。各シーンでscripts/reel-clock.jsを使い、Look.mdの変数を:rootに設定してHTMLReel.scene({ shape })を指定します。
   • まずカバーを作ります。フックの最良の瞬間（タイトル全体が最良の映像に重なる瞬間）をリールの最初の0.2秒に置き、そこからフックを続けます（全シーンならHTMLReel.scene({ cover: T.payoffEnd })、タイトルレイヤーのある本編ならscripts/frame-video.mjs --cover 3.6）。タイトルはグリッドに表示される3:4のクロップ内に収めます。
   • 画面録画をフレームに入れる前に、カーソルを取り除きます。3Dシーンやキャンバスの録画では、macOSの手のカーソルが表示されることがあります。scripts/decursor.pyで、映像を使う範囲だけ（scan src.mp4 track.json --pieces pieces.json）、6種類の大きさのつかむ手と開いた手を検出できます。検出結果を前後に並べてタイル表示し（sheet）、src-clean.mp4から消去します（clean）。以降、frame-videoで使う映像フレームには--video src-clean.mp4を指定します。venvでOpenCVが必要です（references/source.md）。
   • 単語に合わせてフレーミングし、カットしたデモ動画を作ります。各動画のパーツ（from、to、再生が続く単語）をscripts/frame-video.mjsに渡します。一つの本編に複数の動画を入れる場合（投稿の動画と、それが引用する投稿の動画）、フルフレームカードをパーツとして挿入し、その上にtから描画したタイトルレイヤーを重ねます（scripts/render-frames.mjs --alpha）。まず静止画を本編に重ねて確認します（--test … --under body.mp4）。
   • フック、タイトルカード、または末尾には、scripts/render-frames.mjsで全シーンをレンダリングします。フックでソース動画を独自のフレーム内に表示する場合は、動画のフレームを画像として描画します（60 fpsで一度だけ抽出し、setupでデコードして、drawでtに対応するフレームを設定して待機）。これで、ほかの部分と同じように再生速度を調整できます。
   • ソースに表示されていない製品は、DreamCutで録画します（scripts/record-window.mjs、scripts/flash-crop.mjs）。ポインターの動きは単語に合わせます。 表示するものはすべてセーフエリア内に収めます（9:16の場合、1920ピクセル中のy 280～1640）。
6. ローカルでプレビューする（scripts/preview-reel.mjs plan.json）。映像、各カメラレイアウトに配置されたプレースホルダー（エディター独自のset値を使用）、単語ごとのシネマティック字幕、音声、効果音を、−14 LUFSで確認します。コンタクトシートも出力されます。レイアウトに字幕を重ねた状態でここで判断します。変更には1分かかりますが、書き出しには作業時間と待ち時間がかかります。
7. Filの動画エディターをMCP経由で使って組み立てる（references/fil-editor.md）。映像をストーリーとして配置し、各カメラレイアウトでその上にプレースホルダーをオーバーレイとして配置します（全画面、縮小可能なバブル、画面の半分）。そうすれば、後でreplaceしてもクロップ、位置、キーフレームを維持できます。音声は独立したレーンに置きます。効果音の音量は0.1～0.2にします。シネマティック字幕は映像の境目か下に、顔が全画面のときはあごの下に置きます（字幕の範囲を指定）。顔には重ねません。ビートをチャプターにします。書き出してダウンロードし、フレームを確認します。
8. ブラインド判定で8/10を目指す（references/judging.md）。フレームとコンタクトシートを使って、独立した2人の判定者に評価してもらい、低い方のスコアを採用します。さらに変更前後を比較する判定者を1人用意します。両者が指摘した箇所を修正し、2回続けて評価が横ばいになったら終了します。
9. クリエイターが撮影する。スクリプトをテレプロンプター用のキャンバスドキュメントに入れます（見出しと[directions]は表示されますが、読み上げません）。スマートフォンにRecordを追加し、QRコードを画像として渡します。テイクはキャンバスに取り込まれ、音声はクリーンアップされます。各プレースホルダーをテイクでreplaceし、クリエイターの発話に合わせてすべてのタイミングを調整します（references/retime.md）。
   • テイクを結合します（scripts/join-takes.py）。約0.45秒を超えるポーズをトリミングし、15 msのフェードを加え、レイアウトが変わる箇所で結合します。
   • Filの字幕から単語のタイミングを取得します（look.max_words: 1を設定してから、get_videoの字幕をlistで取得し、scripts/fil-words.pyを使います）。
   • 仮音声と実際の音声の単語をアンカーに対応付けます（scripts/timemap.py）。アンカーに合わせてシーンを再レンダリングし、動画パーツを分割して速度を調整します。
   • カメラ映像を配置します。バブルはエディターのset.corner_radius、またはscripts/bubble.mjsで作成し、画面分割はscripts/split-flip.mjsを使います。
   • 実際の音声から字幕を再作成し、チャプターを追加して書き出し、scripts/verify-export.mjsを実行します。

ルールと、それぞれが防ぐ障害

• ソースに書かれていることだけを伝えます。 すべての数値、名前、主張は、Source.md の事実に基づいています。実在する投稿を紹介するリールで作者がどうしても許せないのは、捏造した結果を入れることです。視聴者は確認します。
• 見た目はソースに合わせます。 フォント、色、モチーフ、動きは Look.md に従います。時計のデフォルト設定（セリフ体、太いコンデンス書体の決め台詞、オレンジ色のドット）は、ある1本のリールの見た目です。見た目が合っていないリールは、別の誰かの広告のように見えます。
• シネマティックなタイポグラフィを、大きく見せます。 フォントはソースが指定し、リールがそのサイズとリズムを与えます。フック、締め、すべてのタイトルカードでは、セットアップの行を 540 ステージ上で約 52 px、決めの単語を 90–110 px の太字にします。マスク越しにその単語へ着地させ、アクセントカラーで終わらせます。CTA のキーワードは、フレームに収まる最大サイズにします（コンデンス書体の短い単語なら約 200 px、長い単語や幅広の書体ならそれ以下）。枠付き動画の上の帯に押し込まれたタイトルは、スライドショーのように見えます。スクロールを止めるのは、大きな文字です。
• キャプションもシネマティックにします。 約 78 px の太いサンセリフ体（Inter Tight 800、または Fil のリストにあるソース独自の太字書体）を使い、文字色はインク色、話している単語はアクセントカラーにします。5 px の濃いアウトラインを付け、単語ごとに表示します。1 行は最大 3 単語で、画面分割の境目か映像の下に配置します。小さくて平凡なキャプションは、タイポグラフィの効果を損ないます。
• 最初のフレームがカバーになります。 カバーを設定しない限り、Instagram と TikTok のグリッド、リール再生前のフィード、Fil の動画編集ノードでは、リールの最初のフレームが表示されます。そのため、アニメーションの途中から始まるフックでは、何もないフレームの上に、まだ半分しかせり上がっていない単語が表示されます（最初の4つの草稿はすべてそうでした：「This」、「Reverse engin…」、「One」）。代わりに、まずカバーを表示します。フックの最も印象的な瞬間を、タイトル全体が最良の映像の上に表示された状態で最初の 0.2 s だけ見せてから、フックを冒頭から再生します。タイトルは 3:4 のクロップ範囲（1920 のうち y 280–1640）に収め、幅 360 px でも読めるようにし、その上にキャプションを重ねないでください（最初のキャプションは 0.2 s 後に表示されます）。そのフレームを cover.jpg として保存し、各プラットフォームでカバーをアップロードします。
• 草稿にはクリエイターを入れます。 顔が入る場所が空いたままのリールは評価できません。どのカメラレイアウトでも逆光のシルエットを入れておけば、草稿を完成版として確認でき、各テイクを replace で差し替えられます。
• 他人の作品は画面上でクレジットを表示します。 引用した投稿、リンク先のリポジトリ、誰かのスキルには、視聴者が読める場所と音声で、名前とハンドルを表示します。クリエイター自身の作品として紹介すると、コメントで指摘されます。
• デモが映像の中心です。2–4 s ごとにフレーミングを変えます。 新しいパーツ、細部のクロップ、タイトルカードなどを入れます。変化のない1つの枠は、キャプション付きの画面録画に見えます。早口で並べるリスト（「ライト、ドア、エアコン、ロボット」）は例外です。どんなに短くても、項目ごとにその単語に合わせて1つずつパーツを見せます。
• 音声に合わせて編集する前に、実際に何と言ったか確認します。 クローン音声は「5.0」を「five」と読み、名前を別の単語として読み、先頭が大文字の単語を文字ごとに読み上げることがあります。Fil のキャプションか whisper で文字起こしして、台本と照らし合わせてください。シーンを音声に合わせてタイミング調整した後で単語を修正すると、再レンダリングが必要になります。
• ソース動画自体の不具合に注意します。 デモ動画には、フレーム落ちやページ切り替え時のフラッシュが隠れていることがあります。read-source はシーンの切り替わり（cuts）を一覧表示しますが、ショット内の短い不具合や走査線は表示しません（Anatomy には 15.8 s と 20.6 s 以降に両方ありました）。使う前に、各パーツの終端を 0.1 s 刻みで、全体を 0.25 s 刻みで確認してください。
• 投稿動画からカーソルを消します。 投稿の画面録画に映るカーソルは、審査員が最初に指摘するものです。Meng の投稿から作った2本のリールの草稿（Opus 5.5 のリリースと valley のボートのシーン）では、審査員4人全員がタイポグラフィ、レイアウト、CTA より先に macOS の手形カーソルを挙げました。scripts/decursor.py は 854 フレームと 1,138 フレームでカーソルを検出し、ぼかした影ごと塗りつぶしました。消去する前に検出シートを確認してください。別の白いカーソルに暗い輪郭が付いたもの（指差しの手形）は、まず同じ録画のフレームからテンプレート（template）を作ります。Apple 独自のカーソルファイルは使いません。矢印カーソル（黒地に白い輪郭）は検出できません。
• 推測ではなく、言葉に合わせてカットします。 草稿1は読む速度を基準にタイミングを決めたため、すべてのビートが早すぎるか遅すぎました。草稿2は仮音声の単語タイムスタンプに合わせてカットし、すべてのビートがぴったり合いました。各時刻には単語名を付けます（T.zoom、T.html）。そうすればスクリプトを音声のように読めます。
• シーンは t だけを使って描画します。 ステージ上では CSS アニメーション、トランジション、タイマー、Math.random を使いません。ほかの場所で時間を管理するシーンは、実行のたびに異なる結果になり、タイミングを調整できません。reel-clock.css は #stage 上のアニメーションとトランジションを無効にします。
• 引き伸ばすのではなく、アンカーを基準にタイミングを調整します。 シーン全体を新しい長さに引き伸ばすと、各ビートに異なる誤差が生じます。単語のアンカー（8.6 s のフックでは24個）が各ビートを単語に固定し、伸縮するのは間の空白だけです。対応表は単調増加に保ち、クリエイターが言い回しを変えた箇所（「happens」、「jumps」、「demos」、「fil」）には手動でペアを追加します。
• 速度を変えると再生時間も変わります。 長さ 3.853 s の画面パーツを速度 1.471 にすると、タイムライン上では 2.619 s になります。録画はイベントごと（スクラブ操作、各ステップのジャンプ）に分割し、イベントが対応する単語に合うよう各パーツの速度を設定します。速度は 0.5～2.2 の範囲に保ちます。それを超えると早送りのように見えます。
• レイアウトが変わる位置でテイクをつなぎます。 画面いっぱいに映った顔の途中でジャンプカットすると目立ちます。同じカットでも、吹き出しの縮小中や画面分割の反転中に隠せば目立ちません。
• キャプションは1つのトラックにまとめ、伸縮で配置を変えます。 リール全体を通して画面分割の境目に配置します（position: "middle"、offset: 0）。そのため、カメラが画面いっぱいに映る各ビートには、それぞれのキャプション範囲を指定します。{"op":"captions","ranges":[{"start":6.23,"end":7.33,"position":"bottom","offset":-380}]} を指定すると、78 px の行の中心は y 1332 になります。これは倍率 1 のイラストの顎の下で、鼻は y 960 にあります。ビートが終わると、行は境目に戻ります（Fil 0.433.0）。各コマンドはすべての範囲を置き換えるため、まとめて一度に送信し、get_video で反映を確認してください。テイクに映っている顔の位置（scale: 1、y: 0）を保ち、境目より上に移動して再フレーミングしないでください（scale 1.3、y −290）。また、そのビートのキャプションを残し、削除しないでください。同じ言葉を大きな文字で表示する箇所（フック、クレジット、CTA）では、重複する行を削除します（{"op":"caption","caption":…,"remove":true}）。大きな文字がすでにその言葉を示しており、公開されたリールでもフックの下にキャプションはありませんでした。
• 顔に文字を重ねないようにします。 キャプションは画面分割の境目（y ≈ 960）、またはカメラが画面いっぱいのときは顎の下（画面下部に配置し、offset −380：y ≈ 1332）に置きます。顔やウィンドウの操作部には重ねません。フックと締めのタイトルは y 280–1640 の範囲に収め、アプリのボタンや 3:4 のクロップで切れないようにします。
• CTA が強まるにつれて、顔も大きくします。 フックには顔を出さず、証拠を示す場面では吹き出し、デモでは画面の半分、提案と CTA では画面いっぱいにします。顔を早く出しすぎるとフックが弱まり、CTA で吹き出しを使うと信頼感が損なわれます。
• 効果音は音声より小さくします。 音量は 0.1～0.2 に設定し、実際のイベント（ボタンを押す、表示する、カードが着地する）にだけ合わせ、最後に絶対時間で配置します。
• Fil のオーバーレイはオーバーレイのままにします。 カメラのプレースホルダー、吹き出し、カードには overlay: true を指定します。そうすればストーリーの上に再生され、トリミング、差し替え、削除をしてもシーンが移動しません（Fil 0.424.0。それ以前は replace で画像オーバーレイがストーリーシーンになり、動画オーバーレイに対する trim from でシーンが 0.1 s に圧縮されていました）。隙間を閉じると、効果音も含め、その後のすべてが移動します。削除時は close_gap: false を指定するか、後で効果音を元の位置に戻します。
• 角丸の吹き出しは1つの設定で作れます。 Fil の動画または画像に set: { corner_radius: 30 } を指定すると、柔らかい影の付いた角丸ボックスで表示されます。正方形のクロップで幅の半分の角丸を指定すれば円になります。0.424.0 より前は、吹き出しをローカルで合成する必要がありました。
• 画像は scale 1 でフレームを覆います。 Fil エディターでは、画像の scale: 1 はフレーム全体を埋めます。カードや吹き出しの PNG には fit: "fit" を指定します（そうすれば scale 1 で全体が収まります）。
• 新しいウィンドウから書き出します。 export_video は、キャンバスが開いている Fil ウィンドウでレンダリングします。アップロード前に開いていたウィンドウがジョブを取得し、「This file isn't available」というエラーで失敗することがあります。そのウィンドウを閉じるか、新しいタブで編集を開き、Export › Save to canvas を選んでから、get_video でリンクを取得します。
• スマートフォン用のリンクは画像で渡します。 リンクは、最初に開いたデバイスで有効になります。エージェントのブラウザペインでリンクをクリックすると、そのデバイスがリンクを取得し、カメラは使えなくなります。QR コードを画像として送り、リンクをテストするために開いてはいけません。
• 設定はクラウド上のノードに保存されます。 テレプロンプターのスクリプト、プロンプター、follow-my-voice は録画ノード固有の設定です（update_node script_doc）。すべてのウィンドウとスマートフォンで共通です。リールの設定を1つのウィンドウのローカルストレージに保存してはいけません。
• レンダリングには数分かかり、マシンが混雑しているとさらに長くなります。 各フレームはブラウザーのスクリーンショットか ffmpeg の処理です。ロードアベレージが 350 のとき、1,017 フレームのキャプションレイヤーに9分かかりました。nice -n 10 で優先度を下げ、バックグラウンドで一度に1つずつ実行します。映画全体をレンダリングする前に、--test の静止画とコンタクトシートで確認してください。
• タイムラインではなく、書き出した動画を検証します。 MP4 をダウンロードし、0.5 s ごとにフレームを並べ、音量（ebur128）を測定し、破裂音でリップシンクを確認します。また、音声の高音域を未加工のテイクと比較し、Studio Sound が適用されていることを確認します。ドキュメントから読み取った位置は2回間違っていましたが、フレームは間違っていませんでした。

3 本の投稿の数値（プレースホルダー入りの下書き）

項目	値
長さ	29.5–33.9 s、1080 × 1920、30 fps、−14.4 to −14.7 LUFS
音声	それぞれ ElevenLabs のテイク 1 回、約 400 文字；毎秒 2.2–2.4 語；31.8 s から 29.5 s に短縮したものが 1 本
カメラ	フックでは顔を映さない（3–6 s）；全画面 0.9–2.7 s；吹き出し 3–7.5 s；画面の半分を使う区間 9–22 s；問いかけでは上半分を 3.7–4.1 s 使用
素材	リール 1 本あたり 7–19 個、速度 0.26（静止ウィンドウ）～2.02；数個ごとにディテールをクロップ
タイトル	導入は 540 px のステージで 52 px、見せ場は 100–104 px；問いかけのキーワードは 492 px に収まるサイズ（7 文字：96–112 px）
キャプション	Inter Tight 78 px、800、Look.md のインク色とアクセント色、5 px の輪郭線、境目に配置；20–29 行、大きな文字や全画面の顔の下では 3–5 行削除（キャプションの範囲指定前）
効果音	それぞれ 4 個、音量 0.10–0.16、発見、カード、キーワードに合わせる
カバー	フックのフレームを 2.8–3.6 s で使用（タイトル全体が表示された時点）、0 → 0.2 s まで表示；タイトルは y 900–1300、3:4 クロップ内

公開済みの数値（HTML デモリール）

項目	値
長さ	37.5 s、1080 × 1920、30 fps、−14 LUFS
セクション	フック 0–5.12 · ひねり –8.53 · 実証 –12.50 · デモ –18.72 · メリット –25.24 · オファー –28.97 · 価値の積み重ね –35.08 · CTA –37.50
ペース	毎秒約 2.6 語；仮音声 37.8 s、実際のテイクを 33.4 s にカット
テイク	縦向きのスマートフォンで 2 テイク；0.45 s を超える間はカット；15 ms のフェード；「it's HTML」の後に 0.8 s の間
ステージ	540 × 960 CSS、2×；1920 のうち y 280–1640 がセーフエリア
タイトル	Instrument Serif 52 px、その後に Anton 100 px の大文字、アクセントドットは 0.17 em；マスクのパディングは 0.14 em / 0.2 em
吹き出し	268 × 375、x 721、y 1072、角丸 30 px、白 55% の 2 px の縁取り；0.35 s で全画面から縮小
分割	y 960 にくっきりした境界線；カメラ映像は中央の 1080 × 960、0.35 s で 0.86 → 1 にズーム；0.32 s で上半分に切り替え、イーズイン・アウトは cubic
キャプション	Inter Tight 78 px、ウェイト 800、白、発話中の単語は #efb36c、5 px の暗い輪郭線、中央、最大 3 語
効果音	音量 0.1–0.2：カットに柔らかな風切り音、押下にクリック、カードにポップ音、タイピング中にタイピング音、CTA にインパクト音
アンカー	フックに 24 個、単調、手動ペア 4 組
画面素材	速度 1.13–2.07 で、スクラブとステップジャンプをそれぞれの語に合わせる
評価者	ブラインド絶対評価者 2 人（低い方のスコアを採用）＋ペア評価者 1 人；フックは 6.5 → 6.0 → 7.3 → 7.0 と推移し、横ばいで終了

確認

• 最初のフレームをカバーにする：フックで最もよい映像にタイトル全体を重ね、3:4 クロップ内に収め、幅 360 px でも読めるようにし、キャプションは載せない。
• 書き出しでは、すべてのビートを対応する語に合わせる（音声をオンにして 0.25× でいくつかスクラブする）。
• 0.5 s ごとのフレームを確認する：タイトルが y 280–1640 の範囲外や左右端から 16 px 以内にないこと、顔や動画の表示内容にキャプションが重ならないこと、吹き出しがウィンドウのコントロールに重ならないこと、デモ素材にカーソルが映っていないこと。
• 画面上の名前、数字、ハンドル名がすべて Source.md と一致し、他の人の作品にはすべてクレジットを記載する。
• 同じ t でフレームを 2 回レンダリングしたとき、同じ映像になること。
• 開始、中間、終了時のリップシンクを確認する（破裂音：p、b、m）。
• 統合ラウドネスは −14 LUFS ± 1、トゥルーピークは −1 dBTP 未満；音声の高域は未加工テイクより低いこと（クリーンな音声を使用）。
• キャプションが発話内容と一語一句一致し、名前のスペルが正しいこと。
• チャプターにはビートの名前を付ける（プロモーションは 8 個、ショーケースまたは「見つけたもの」は 5–7 個）。

ファイル

• scripts/read-source.mjs：ツイート、ページ、YouTube 動画、またはファイルを読み込み、文章、メディア、フレーム、測定した見た目、Source.md、Look.md に変換します。
• scripts/reel-clock.js、scripts/reel-clock.css：シーンエンジンです。HTMLReel.scene({ dur, draw, anchors, shape })、ワープ、4 種類の形状のステージ、変数で定義する 3 つの役割の文字、長さが不明な行のための fit、最初のフレームのための cover、コントロールが含まれます。
• scripts/frame-video.mjs：リールの形状に合わせて、ぼかしたコピーの上にデモ動画を配置し、各パーツを単語に合わせてカットし、タイトルレイヤーを重ね、カバーから開始します（--cover）。
• scripts/decursor.py、scripts/cursors/：画面録画から見つけた macOS のハンドカーソル（録画から切り出した、つかむ手と開いた手のテンプレート）を塗りつぶし、src-clean.mp4 にします。
• scripts/render-frames.mjs：__frame ページをフレームごとに MP4 に変換します（または透過タイトルレイヤー、--alpha）。ワープの有無を指定でき、安全領域のチェックも行います。
• scripts/timemap.py：仮の単語タイムと実際の単語タイムをアンカー、マップ W、シーンのローカルアンカーに変換します。
• scripts/vo-words.py：単語ごとのタイムスタンプ付き ElevenLabs ナレーションを生成し、応答を保存して、速度を表示します。
• scripts/tighten-voice.py：音声の長い無音部分を短縮し、それに合わせて単語のタイミングを移動します。
• scripts/named-times.py：シーンやパーツ用に、すべての単語に名前を付けます（T.zoom、T.skill2、T.htmlEnd）。
• scripts/fil-words.py：Fil のキャプションリストから単語のタイムを取得します。
• scripts/join-takes.py：スマートフォンで撮影したテイクをつなげて 1 本のトークトラックにし、編集リストも作成します。
• scripts/record-window.mjs、scripts/choreo-example.mjs、scripts/flash-crop.mjs：Playwright で操作する DreamCut の録画を、フラッシュのタイミングに合わせてクロップし、トリミングします。
• scripts/bubble.mjs、scripts/split-flip.mjs：カメラ映像をローカルで合成し、丸いバブルまたは反転する半面にします。
• scripts/preview-reel.mjs：Fil がレイアウトする方法を再現したローカルプレビューです。映像、エディターで設定した値のカメラレイヤー、映画風のキャプション、音声、効果音を表示します。
• scripts/verify-export.mjs：書き出しのサイズ、ラウドネス、シート、クリーン音声を確認します。
• references/source.md：ソースを読み込み、Source.md（文章）と Look.md（見た目）に変換する方法です。
• references/structures.md：構成（プロモーション、ショーケース、見つけたもの、解説、ビフォーアフター）と、顔出しなし・カメラ出演ありのレイアウトライブラリです。
• references/formula.md：プロモーションの 8 つのセクションと 6 つのカメラレイアウト、および参考リールの調査方法です。
• references/fil-editor.md：MCP 経由で Fil の動画エディターを使って組み立てる方法、スマートフォンで撮影したテイク、書き出しについて説明します。
• references/retime.md：テイクをつなげ、すべてのパートを実際の単語に合わせてリタイミングする方法です。
• references/judging.md：評価基準、ブラインド審査員、作業を止めるタイミングについて説明します。
• demo/index.html：クロック上のフックシーンを、仮の音声で再生するか、実際のテイクに合わせてリタイミングします。