taoyanzhu1024-bot/kinetic-reel

Kinetic reel

コードのみで編集的な高エネルギーモーションリールを作成する手法です。「Work Reel ’26」（84 秒のポートフォリオリール：Microsoft → UW–Madison Surgery → Enterprise RAG → trace フィナーレ）から抽出されました。実行可能な template/（すべての技法を使用した 17 秒のデモ）と、examples/work-reel-26/ の完全な実例がバンドルされています。

仕組み。 すべてのフレームは時間 t の純関数です。reel/index.html は reel/cues.js（タイムライン）と reel/reel.js（ES モジュール：three.js レイヤー、2D タイプキャンバス、WebGL ポストパス）を読み込みます。render.mjs はヘッドレス Chrome を駆動し、コンタクトシート、ストリップ、スチルをレビュー用にレンダリングするか、全フレームを並列レンダリングし、ffmpeg が MP4 にエンコードします。music/score.mjs は同じ cues.js から Node 上でスコアを合成するため、すべてのヒットが正確なフレームに配置されます。

ワークフロー

0. スキャフォールド

bash <skill-dir>/scripts/new_project.sh <project-dir>   # <skill-dir> = この SKILL.md が置かれているフォルダ

次に、デザインに入る前に references/style-guide.md（ルック、モーション語彙、トランジションカタログ、レイアウトルール）と references/sound.md をすべて読んでください。長いリールの構成を理解するために examples/work-reel-26/reel.js をざっと見てください。

1. 重点を決め、ストーリーボードを作成する

• 何が主導し、各部分にどれだけの時間を割くか を尋ねる（または決定する）。視聴者は比率を気にします。Work Reel の v2 では Microsoft が約 60% を占めていたため、バランスを取り直す必要がありました。修正は、人気のあった部分を削るのではなく、他の章にランタイムを 追加 することでした。主導部分は約 35～40% を目指します。
• テンプレートから STORYBOARD.md を書きます：時間配分、事実のソース、統一デバイス、ショットごとに 1 行（見出し、ビジュアルメカニズム、トランジションイン、サウンド）。
• 事実は神聖です。 提供されたソースからの数値のみを使用し、それぞれにスコープを明記します（「約 180 個の自作ケース」、「320 のバイリンガルプロンプト」）。図解的なもの（ツール ID、ドキュメント ID、回答例、AST）は HUD で SCHEMATIC とラベル付けします。持っていない次元のデータを描画しないでください。プロセス を可視化します。医療/臨床業務：有効性の主張は禁止し、該当する場合は「開発中 / 未検証」と明記します。

2. ビルド

• reel/cues.js：S（シーン開始）、hits（すべての重要なビート）、CH（章 → セグメント化されたプログレスバー）、dur。120 BPM：カットはビート上、章の変更は小節上。
• reel/reel.js：ショットごとに1関数、sName(t)。各関数がフレーム全体を描画します：bg() → glShot(...) による GL レイヤー → タイプとシェイプ → hud(t, {...})。ショットをキーとともに SCENES に登録し、TR にトランジションを追加します（またはビート上のハードカットの場合は省略）。
• 描画するすべての中国語文字をリストする CJK 定数を維持します（フォントはサブセットとして読み込みます）。

3. すべてのショットを何度も確認する

node render.mjs --sheet=1,4,7,10,13,15.5 --cols=3 --w=640 --out=out/check/sheet.jpg   # キーフレーム
node render.mjs --stills=10.4 --out=out/stills                                          # フル解像度の詳細
ffmpeg -ss 16.0 -t .6 -i out/reel.mp4 -vf "fps=10,scale=320:-1,tile=6x1" out/check/tr.jpg   # エンコードからトランジションを確認

すべての画像を「Read」で開きます。ラベルとラインの重なり、統計情報の重複、テキストの HUD バンドへの侵入、カット時の空フレーム、1600 px 幅での可読性、各トランジションが 何かから始まり クリーンに着地するかを確認します。予算：章ごとに1枚のシート、密度の高いショットごとに1枚のフル解像度スチル、トランジションタイプごとに1枚のストリップ。

4. スコア作成、レンダリング、エンコード

node music/score.mjs && ffmpeg -y -i music/score.wav -af "highpass=f=30,equalizer=f=250:t=q:w=1:g=-2,loudnorm=I=-14:TP=-1.2:LRA=8" -c:a aac -b:a 192k assets/score.m4a
node render.mjs --frames --workers=4                                    # Mac GPU で約 8～40 ms/フレーム：数分ではなく数秒
node render.mjs --encode --audio=assets/score.m4a --out=out/reel.mp4 --fps=30
# Web 用コピー：ffmpeg -i out/reel.mp4 -vf scale=1600:900:flags=lanczos -c:v libx264 -preset slow -crf 23 -c:a aac -b:a 128k -movflags +faststart out/reel-web.mp4

スコアは聞いて確認できません：showspectrumpic とセクションごとの RMS で確認し、報告時にその旨を伝えてください。オーディオのみの変更は再レンダリング不要：リマックス（-map 0:v -map 1:a -c:v copy）で対応します。

最も重要なルール

1. タイポグラフィが主役。 見出しには Condensed ディスプレイ（Anton）、強烈なフレーズにはワイドグロテスク（Archivo Black）、1行の「声」のラインにはイタリックセリフ（Instrument Serif）、すべてのラベルにはモノ（JetBrains Mono）を使用。大きな英語の見出し、バイリンガル視聴者向けの小さな中国語注釈。
2. すべてのショットにはメカニズムがある。 単なる言葉ではなく：グリッドルーティング、マトリックススキャン、ステートマシンをホップするトークン、リストの融合、ゲートを通過するパケット。見出しが名前を付け、メカニズムがそれを証明する。
3. ビートロック。 文字、チップ、カウンター、カットは hits に配置される。高速イン（expo-out）、ホールド、次へ。
4. 連続性。 章内のハードカットよりも、シェイプ連続性トランジション（視点が留まっている要素をズームイン、直前のハイライトからアイリス）を優先する。ハードカット＋インパクトは章の強烈な区切り用。
5. ノイズのスウッシュは禁止。 章へのインキーのスウェル、内部では静かな音程の合図、カットの約半数は無音。
6. 誠実なデータ（ステップ1参照）と、図解的なものには SCHEMATIC ラベル。
7. 計算を保護する。 backOut() からの半径は0未満になる可能性がある（canvas がエラーを投げる）：circle/starburst/jelly は既にガードしている。シンセでは、pow() の前にローカルタイムを ≥ 0 にクランプし、SVF の f/q をクランプする（どちらもテンプレートに既に含まれている）。

リールをサイトイントロとして配信する

Work Reel はサイトのエントリページとして配信されます：index.html がリールを全画面再生し、ポートフォリオにハンドオフします。パターンは examples/site-intro/ にバンドルされています（index.html、css/intro-reel.css、js/intro-reel.js、さらに HTTP Range サポートを追加する Cloudflare Worker）：

• 音声付き自動再生を試みる。拒否された場合はミュート再生し、脈動する「タップでサウンドオン」を表示する。それも拒否された場合、または prefers-reduced-motion が設定されている場合は、エンド画面を「スタート」モードで表示する（再生がリードボタン）。
• 再生中：リールの HUD がコーナーを占有するため、上部中央に小さなガラスピルを表示。「スキップイントロ」にはリールの進行に合わせてリングが埋まる。サウンドトグルのイコライザーバーがリールの BPM で脈動する。Escでスキップ、Mでミュート。
• エンド画面：リールの文法を HTML で表現。コーナーブラケット、名前をドロップインレター（Anton）で表示、モノマイクロタイプ、セグメント化されたトレースバー、パーティクル地形の2Dドットフィールドバージョン、ライムのプライマリ CTA（ホバー時にテキストロール、シーン、マグネット、バーごとにパルス）、ゴーストの「もう一度見る」。
• 押されたコントロールからライムのアイリスで遷移し、オーディオをフェードアウト、その後ナビゲート。
• 2つのエンコード（1600×900 約1.3 Mbps、960×540 約0.6 Mbps 携帯電話/省データ用）、preload="auto"、ポスター。HTTP Range（206）で配信すること。そうしないとシークと Safari が壊れる。