UIモーションリール は何をしますか？
リールは1つのHTMLシーンをフレームごとにレンダリングしたものです。すべてのアニメーション値（形状のサイズ、半径、色、カメラズーム、カーソル、コントロール）は、フレームレートの8倍で事前に一度だけシミュレートされるダンプトスプリング（減衰バネ）で制御されます。そのため、各フレームを独立かつ並列にレンダリングできます。スコアは同じタイムラインから合成されるため、すべてのビート、クリック、スウッシュが映像と正確に同期します。
バンドルされているコンポーネント:
assets/engine/reel.js: エンジン本体（スプリング、計測、カーソルスクリプト、カメラ、コンテンツブラースワップ、ホバー＆プレス、シームレスループ、オドメーターカウンター、アイコンセット）assets/engine/score.js: オリジナルのループ可能なトラック（パッド、アルペジオ、ベース、ドラム、ライザー、ベル）とUIサウンドデザイン（クリック、スウッシュ、タイピング、ディテント、スワイプ）。OfflineAudioContextでレンダリングassets/template/index.html: 24秒のスターターシーン。すべてのインタラクションタイプ（リスト行ホバー、スライダードラッグ、トグル、オドメーター、ホールド確認リング、成功ピル、サマリーカード、ループバック）を含むscripts/setup.sh: リールフォルダをスキャフォールド（エンジン＋テンプレート＋スクリプト＋Node依存関係）scripts/render.mjs: 静止画、オーディオ、およびスコアをミックスしラウドネスノーマライズした並列MP4レンダリングscripts/qa.mjs: コンタクトシート、ループ継ぎ目チェック、トランジションストリップ、ラウドネス＆スペクトログラムreferences/api.md:Reel.define設定の完全リファレンス。シーンを書く前に読むことreferences/craft.md: モーションとデザインのルール、および既に試行錯誤して修正されたミスについて。状態をデザインする前に読むことreferences/score.md: 音楽とサウンドデザインの形、および聴けないミックスの確認方法references/examples/stockback.html: このスキルが抽出された元の60秒・14状態のリール（フィンテックのレシートto株式アプリ）。コンテンツアイデアと凝った振り付けのために参照すること。エンジンAPIより前のものなので、コードではなくパターンをコピーすること
ワークフロー
-
まず製品を理解する。 製品のサイトやコードから、パレット、フォント、ロゴ、そしてストーリーを伝える5〜8つのモーメント（入力、"魔法"、証明、ペイオフ）を読み取る。可能な限り実際のコピーと実際のデータを使用する：実際の数字とロゴがリールを信頼性のあるものにする。ユーザーが特定の外観を要求した場合、それが製品本来の外観よりも優先される。
-
マークアップを書く前に状態をスクリプト化する。 各状態について、サイズ（幅、高さ、半径）、塗りつぶし（パレットの3〜4色のいずれか）、カメラズーム（フレームの高さまたは幅の約80%を占めるように）、持続時間、カーソルの動作を決定する。フルリールの場合は45〜60秒、10〜14状態を目指す。ティーザーの場合は20〜30秒、5〜7状態。120 BPMでは、ビートは0.5秒、小節は2秒。各状態の持続時間は0.5秒の倍数にし、重要な瞬間は小節線（2秒の倍数）に配置することで音楽が強調できるようにする。持続時間の合計は全体と正確に一致しなければならない。
-
スキャフォールドする。
bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <プロジェクト>/videoを実行後、<プロジェクト>/video/index.htmlを編集する。リールにエンジン機能が必要でない限り、エンジンファイルは変更しないでおく。必要な場合はプロジェクト内のコピーを変更し、その旨を伝える。 -
references/api.mdに従ってシーンを構築する： 状態ごとに1つの.contentブロック（id="c-<id>"、data-w/data-hは状態の幅/高さと等しくする）、カーソルがターゲットとするものやアニメーションさせるすべての要素にIDを付与。その後Reel.define({...})で状態、カーソルイベント、カスタムチャンネル（スライダー、トグル、ホールド、スクラブ）、および内部アニメーション用の状態ごとのupdate関数を定義する。 -
静止画を早期かつ頻繁にレビューする。
node render.mjs --stills 0,1.5,4,...を実行し、結果を確認する（node qa.mjs --every 2でコンタクトシートを作成）。すべての状態の静止状態といくつかの変形途中フレームをチェックする。静止画のレンダリングは数秒で完了する。フルレンダリングは60秒で6ワーカー使用時、約1分半かかる。 -
スコアを付ける。
score（プログレッション、キー状態でのヒット、ブレイク）と、シーン固有のサウンド（タイピング、ディテント、カウンター、スワイプ）用のsfxフックを設定する。node render.mjs --audioを実行後、node qa.mjsでラウドネス行とout/qa/spectrum.pngを確認する（references/score.md参照：聴くことができないため、数値と画像でミックスを判断する）。 -
レンダリングとQA。
node render.mjs --mp4 --with-audio --out <名前>.mp4を実行後、node qa.mjs --transitions --video out/<名前>.mp4を実行する。生のループ継ぎ目が1.000000であることを確認し、transitions.pngで灰色の中間変形やフレーム外のコンテンツがないか確認する。コンタクトシートをもう一度確認する。 -
納品する。 MP4（ファイル転送でサイズが問題になる場合は720pコピーも）と、その内容の短いリスト（状態、インタラクション、音楽の動作）を添えて提供する。オーディオを分析で確認したものであり、実際に聴いて確認したわけではないことを正直に伝える。タイミング変更やテーマ変更の申し出を行う：再レンダリングは安価である。
絶対条件（外観）
これらが、テンプレートではなくデザイナーによるリールと見なされる理由です。references/craft.md に各項目の説明があります。
- 単一形状、カットなし。すべての状態は同じ要素がサイズ、半径、塗りつぶしを変更するもの。内部のコンテンツは短いブラーで切り替わる（エンジンが処理）
- すべての変化はカーソルが原因：クリック、ドラッグ、または長押し。状態が単独で変化することはない。ただし、システム応答（ホールド完了など）は除く
- すべてにスプリングを使用。せいぜいわずかなオーバーシュート（サイズにはζ≒0.86、色とカメラには1.0）。弾むようなイージングは不可
- カメラは各状態にフィット。最後のフレームは最初のフレームと等しく、リールがループする
- 無駄な時間なし：すべての瞬間に何か意味のある動きがあり、カーソルが約1秒以上待つことはない
- パーティクルバースト、グロー、レンズフレア、UIクローム上のグラデーション、ミスマッチなアイコンストロークは禁止（エンジンのアイコンセットを使用：1つの24グリッド、1つの1.75ストローク）
- 1つのUI書体、オプションで1つの表示用アクセント（テンプレートはGeistとInstrument Serif斜体を併用）。製品に固有のフォントがある場合はそれを使用
パフォーマンスノート
- 60秒のリールを1080p60でレンダリングすると3600フレーム。6ワーカーでAppleシリコンMacで約80〜90秒
- スクリプトは最後に
process.exitを呼び出す。Puppeteerが作業完了後もNodeを生かし続ける可能性があるため。独自スクリプトを作成する場合も同様にしないと、長時間実行コマンドがハングしたように見える - 大容量アップロードがタイムアウトするネットワークでは、720pコピーもエクスポート：
ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4（ffmpegはnode_modules/@ffmpeg-installer/*/ffmpegにある）