Portfolio reel (テンプレート: "skill 2")
このスキルは、1つの設定ファイル promo.json から、完成された約30秒のイントロリールを生成します。CanvasシーンがヘッドレスChromeですべてのフレームを描画し、ユーザーのクリップをカード内で再生します。ストックフッテージ、AI動画、テンプレートサービスは使用しません。構造は参考リール skill2.MP4（TikTokクリエイターイントロ）のペース配分を模倣しています。手法のみをコピーし、そのフッテージ、言葉、名前、ハンドル、透かしは一切使用しません。
| 時間（3セクション） | シーン |
|---|---|
| 0-2.3秒 | マスタードグラデーション、2つの大きな柔らかな円がスライドイン；hook[0] が1文字ずつタイプされ、続いて hook[1] が大きく太字でポップアップ |
| 2.3-2.9秒 | 白い円が下からワイプアップ；アバターが小さな黄色い円盤としてポップイン |
| 2.9-6.4秒 | 白背景のプロフィールヒーロー：アバターが大きな円に成長（黄色いリングまたは黄色いデュオトーン）、次に星付きのアウトライン badge ピル、hello が1語ずつ、細い棒で区切られた roles、そして↑付きの黒い button ピル（白色円内）。矢印が上に飛び出し、ページがスクロール |
| 6.4-20.5秒 | ライトグレー背景に柔らかな窓明かりの影が付いたセクションページ（各4.6秒）：グラデーションタイトル、次にスクロールに追従して浮遊する1～3枚の丸みを帯びたカード。動画は再生され、写真はゆっくりズーム。ポートレートカードは縦長に、ランドスケープカードは横長に、混合行は千鳥配置 |
| 20.5-24.4秒 | 左下から黄色い光が広がりグラデーションに；cta[0]、次に cta[1] が1語ずつ表示 |
| 24.4-30.3秒 | 黒いプロフィールカードが点からポップ（アバターまたは logo、handle、name、最大3つのカウント stats、2つのボタン）。カーソルが最初のボタンをクリックするとグレーになり clicked と表示、その後カードが3Dで裏返り back を表示 |
長さは3セクションで約30秒、セクションごとに約4.6秒増減し、長いテキストでやや長くなります。
2つのUI: "ui": "classic"（デフォルト）または "app"
app は同じタイムラインとテキストを維持しますが、すべてのシーンが動くメッシュグラデーション上のモダンなアプリ画面になります：
| 時間 | app シーン |
|---|---|
| hook | ガラス製の検索バーが hook[0] hook[1] をタイプ；結果ドロップダウンに人物（アバター、名前、役割）と最初の2セクションがリスト表示；カーソルが人物をクリック |
| hero | クリックされた結果がベントーダッシュボードに拡大：ガラスタイルのフォトタイル（名前とハンドル）、グリーティングタイル（バッジ、ハイライター付き hello、役割チップ）、profile.stats をカウントする統計タイル、カーソルがクリックする button タイル、セクションをリストするタイル |
| sections | 水平カルーセル、セクションごとに1スライド：大きな数字、タイトル、「n works」、上部にプログレスバー。作品はデバイスモックアップで表示：ランドスケープクリップはブラウザウィンドウ（信号機、アドレスバー site/section-title）、ポートレートクリップは電話機内、右側にカスケード配置 |
| cta | チャット画面：タイピングドット、次に cta[0] と cta[1] が人物からのメッセージバブルとして到着（最後のバブルはアクセントカラー） |
| card | グラデーションカバーバナー付きプロフィールカード、オーバーラップするアバター、ハンドル、名前、カウント統計、2つのピルボタン；カーソルが「フォロー」をクリック（紙吹雪）、その後QRコード（profile.qr / profile.back から、qrencode がインストールされていれば生成）に裏返り、下部にアドレスが表示 |
site（オプション）はブラウザモックアップに表示するアドレスを設定します。デフォルトは profile.back です。すべてのスタイルとエフェクトは両方のUIで機能します（app では orbit と ticker は使用されません）。
スタイルとエフェクト
"style" でカラーテーマを選択します。ダークスタイルは、薄いグリッドと窓明かりの影の代わりに光るカードを持つダークページになります。
| スタイル | 外観 |
|---|---|
mustard（デフォルト） | テンプレート：マスタードイエローグラデーション、白いヒーロー、ライトグレーページ、黒いピル、青いボタン |
midnight | インディゴから黒、ネオンシアンとバイオレット、ダークページ、光るカード |
sunset | ピーチからピンク、暖かい白いページ、コーラルのタイトルとボタン |
amber | ほぼ黒地にゴールド（開発者/ポートフォリオ風）、ダークページ、アンバーのピルとボタン |
mint | ミントからティール、白いページ、緑のタイトル |
"colors" はスタイルの任意の単色を上書きします。
すべてのエフェクトはデフォルトでオンです。"effects": {"ticker": false} で1つオフにするか、"effects": false ですべてオフにしてプレーンなテンプレート外観にできます：
| エフェクト | 動作 |
|---|---|
bokeh | 柔らかな光の粒子がグラデーションシーンで漂い上昇 |
shine | 大きな質問、ボタン、プロフィールカード上を光がスイープ、さらに円ワイプにエコーリング、ボタンにパルスリング |
marker | 名前の下にハイライターがスワイプ（text.highlight で単語を指定、または2番目の単語以降すべて） |
orbit | 3つのドットを持つ破線リングがアバターの周りを回転 |
blur | ページスクロール中の垂直方向のモーションブラー |
labels | 各セクションタイトルの上に「01 / 03」と、描画されるアンダーライン |
glare | 各ワークカードが着地した後、斜めのグレアが通過 |
ticker | 大きなアウトラインタグがクロージングラインの後ろをスクロール（text.tags、または役割とセクションタイトル） |
confetti | ボタンがクリックされたときにスタイルカラーの紙吹雪バースト |
grain | すべてにフィルムグレインとソフトなビネット効果 |
ユーザーに選択させるには、フルレンダリング前にすべてのスタイルで同じ4つの瞬間をレンダリングします（「スタイルボード」）。promo.json のコピーで style のみを変更し、render.mjs --times を使用します。
要件: ffmpeg、Node 22+、Google Chrome または Chromium（CHROME_PATH）、および numpy と scipy がインストールされたPython（PROMO_PY；promo.sh は自動で見つけます）。
ワークフロー
1. リールに必要なものを集める
- アバター: ポートレート写真、顔と肩。
crop: [x, y, size]（ピクセル）を指定して顔が円に収まるようにし、プレビューで確認します。背景が込み入っているか明るい場合、"avatarStyle": "duotone"でテンプレートのように黄色の上に暗いシルエットを作成できます。 - セクション（1～4）: それぞれ短いタイトル（2～4語）と1～3のクリップ：動画（
{"file", "at"}、atから5.5秒間カード内で再生）または静止画。ユーザーの最高の作品を使用し、バラエティのためにポートレートとランドスケープを混ぜます。 - テキスト: 短く保ちます。
hook: 小さい行と大きな1～2語の質問。badge: 約50文字までのスローガン。hello: 「Hello, I'm …」。roles: 2～4の短い役割。button: ボタンのラベル。cta: 2つのクロージングライン。
- プロフィールカード:
handle、name、最大3つのstats、buttons、clicked、back。実際の数字のみ使用（ユーザー、そのサイト、またはプロフィールから）。文字列値（"2023"など）はカウントせずにそのまま表示されます。 - 言語: クメール語の場合、
"lang": "km"を設定し、自然なクメール語を書きます。Kantumruy Pro がバンドルされています。 - オプション:
style、effects、logo（カードの円内）、colors、text.highlight、text.tags、music（+musicStart）、sfxDir。
2. プロジェクトを作成する
プロジェクトフォルダを作成し、examples/creator-reel.json を promo.json としてコピーし、編集します。すべてのキーは references/config.md で説明されています。パスはプロジェクトフォルダからの相対パスです。
3. プレビュー（約10秒）
<skill>/scripts/promo.sh <project>/promo.json --preview
これによりクリップがカットされ、約13枚の静止画が out/<name>-preview.png にレンダリングされます。それを読んで以下を確認します：
- アバターのクロップ；
- どの行も詰まっていないか（長いテキストは縮小されます）；
- 各セクションのカードが良いフレームを表示しているか：
atを変更； - プロフィールカードの数字。
4. レンダリング（約2分；バックグラウンドで実行）
<skill>/scripts/promo.sh <project>/promo.json --jobs 4
ステージは次の順序で実行されます：assets、plan、render、mix、encode。--from mix はフレームを再レンダリングせずにサウンドをリミックスします。
出力：out/<name>-1080p60.mp4 と out/<name>-contact.png。
5. 引き渡す前に確認する
- コンタクトシートを読む。
ffprobeがbuild/cues.jsonの示す長さを表示するはずです。ミックスは -14 LUFS / -1 dBTP にノーマライズされています。- 結果の音声は聞こえないので、確認したことをユーザーに伝え、聞いてもらうよう依頼します。
チューニング
- タイミング:
scripts/scene.mjsのplan()。SECはセクションの長さ、SCROLLはページスクロールの長さ。buildCues()のキューは自動的に追従します。 - 外観:
- テーマは
scene.mjsのSTYLES、エフェクトはEFFECTS；色はcolorsからも取得可能。 - カードレイアウトは
layout()。 - 窓明かりの影は
buildShade()。 - フリップは
drawFlip()、遠近感のあるストリップ。
- テーマは
- サウンド:
scripts/audio.pyのSFXがsfxDirで試行されるファイル名をリストします。make_bed()がローファイビートです。