kosta4a/stopmotion-video

ストップモーション動画

このスキルで作成される動画は、楽曲に合わせて撮影されたストップモーションのように動きます。各ポーズは8分音符1つ分保持され、その後すべてが一斉に変化します。ページは小節線で登場します。すべてのクリックはドラムのヒット音に合わせて鳴り、大きな変化は大きなキックに合わせて配置されます。フレームレートは意図的に低く保たれます。動きが粗く見える場合は、ポーズの間隔をより適切に調整します。ビートが滑らかにされることは決してありません。

このルールは、169.825 BPM のドラムンベーストラックに合わせてカットされた47秒のローンチフィルムを、数百ラウンドのノートを経て作成した経験から生まれました。フィルムは 30fps で動作し、8分音符ごとに1ポース（1秒間に5.66ポーズ、各ポーズ5～6フレーム）を保持しました。ここに記載されている値はそのフィルムのものです。また、live.md には、そのフィルムのシーンをメトロノームに合わせて再生するウェブページの値が記載されています。ルールがこれらの値を超えて一般化される場合、その旨がテキストに明記されます。

用語

• ポーズ: 1つの静止画、楽曲の8分音符。コード上ではビート（STEP_MS、useBeat）と呼ばれます。
• 楽曲ビート: BPM がカウントするもの、つまり4分音符。2つのポーズの長さで、メトロノームのクリックが1回入ります。
• 小節: 4つの楽曲ビート、つまり8つのポーズ。ドラムンベースでは、キックはポーズ0、スネアはポーズ2と6に配置されます（0から数えます）。
• ヒット: 楽曲内のドラムサウンド。ビッグキックとは、フレーズの開始を告げるキックです（フィルムのトラックでは奇数小節ごとに発生）。
• オーサリングミリ秒: コード内の時間。200ms のポーズで記述され、SPEED 倍の速度で再生されます（SPEED = TEMPO / 150）。
• タイムスタンプ は m:ss.ff 形式で記述されます。ここで ff はフレーム数をカウントします。これは Remotion Studio が時間を表示する方法であり、ノートが届く形式でもあります。

運用姿勢

• 低フレームレートを意図的に維持する。 動きを修正するためにビートを滑らかにしないでください。代わりに、動きのポーズ間隔をより適切に調整してください。
• すべての要素はポーズを1拍保持し、一斉に変化します（トランジションも含む）。個別のクロックで動作するものはありません。埋め込まれたアニメーションやスクロールするページも、ポーズに合わせてステップ動作します。タイピングは唯一の例外で、ビートよりも速く動作します。これはタイピング本来の特性であり、そのポーズから開始されます。
• 楽曲がクロックである。 ストーリーボードを作成する前に楽曲を測定してください。楽曲の小節上にページをレイアウトし、ヒット音にアクションを配置してください。
• 動画全体で1つのクロックを使用する。 動画のフレーム上でポーズをカウントし、シーンごとにカウントしないでください。
• 小節単位で移動する。 ページの長さを変更する場合は小節単位で行うか、次の小節線の前でポーズを元に戻してください。そうしないと、それ以降のすべての要素が楽曲からずれます。
• 無駄なポーズを作らない。 ページで行うべきことが完了したら、視聴者が内容を把握するのに必要な時間だけその状態を保持してください。
• 変化の種類は少数に抑え、方向性を統一し、フェードは使用しない。
• 測定して確認する。 1ポーズあたり1枚のスチル、レンダリングオーディオで測定されたタイミング、およびメトロノームカットを使用してください。目視で同期を判断しないでください。

ツール: デフォルトでは Remotion

プロジェクトが既に別の方法で動画を作成している場合を除き、動画作成には Remotion を提案してください。ストーリーボードを作成する前に、その理由を添えて提案し、ユーザーが別のツールを希望する場合のみ変更してください。ウェブページの場合は、代わりにライブ再生を使用します（live.md）。モーションツールの場合でもルールは適用されますが、ヘルパーは使用できません。

• なぜ適しているか。 すべてのフレームはフレーム番号から計算される React コンポーネントであるため、ポーズはそれが配置されるフレーム上で正確に配置され、毎回同じようにレンダリングされます。レンダリングはフレームを順不同で、複数のタブにわたって描画しますが、これはフレーム駆動型のビデオのみが対応できます。assets/remotion/ 内のヘルパーはこれ用に記述されており、その Studio はノートが届く形式である m:ss.ff で時間を表示します。
• セットアップ方法。 npx create-video@latest をブランクテンプレートで実行します。remotion およびすべての @remotion/* パッケージを1つの正確なバージョン（フィルムのバージョン: 4.0.532）に固定し、TypeScript は 5.x に維持します（clock.md §7）。1つのコンポジション、1920×1080、30fps。beat.ts と transitions.tsx を src/ にコピーし、TEMPO を設定します。
• 設定方法。 remotion.config.ts で: JPEG フレームを品質 95 に設定（デフォルトの 80 では、フラットな地面や細いタイプのエッジが粗くなります）、BT.709 カラー（プレーヤーがブラウザと同じように色を表示するため）、上書きをオンにします。
• プレビューとレンダリング。 npx remotion studio で作業、npx remotion render <Comp> out/<name>.mp4 で 1080p レンダリング（--scale=2 で 4K）、--frames=<first>-<last> または npx remotion still <Comp> --frame=<n> で特定の範囲やポーズを確認します。

決定順序

上から下に向かって作業します。各ステップが次のステップを制約します。

1. ツールを提案する。 Remotion。プロジェクトが既に別の方法で動画を作成している場合を除きます。他のすべての作業の前に、上記のようにセットアップしてください。
2. 楽曲を測定する。 オンセットからテンポを見つけ、使用する区間全体でグリッドが維持されているか確認します。小節とフレーズ、ドラムが抜けて戻ってくる箇所、ビッグキックをマークします。サンプルに正確に合わせて、フレーズの最初のキックの少し前（23ms）で楽曲の抜粋をカットします。song.md を参照してください。
3. クロックを設定する。 ポーズは楽曲の8分音符です。200ms のポーズで SPEED = TEMPO / 150 としてオーサリングし、30fps でレンダリングし、動画全体のフレーム上でポーズをカウントします。clock.md を参照してください。
4. ページを小節上にレイアウトする。 ストーリーボードをポーズ単位で記述します。各ページは整数のポーズ数であり、小節線で開始されます。アニメーションを作成する前に、楽曲のイベントをポーズにマッピングします。
5. ヒットを配置する。 コードは8分音符単位でチャンクとしてタイプ入力され、タイトルや長押しのバックスペースはそのポーズからビートよりも速く実行されます。クリック音やポップ音はスネアに合わせ、着地や新しいページはダウンビートに合わせ、大きな変化はビッグキックに合わせます。ビルドアップは静かな部分で行い、着地はドラムが戻ってくるときに行います。hits.md を参照してください。
6. ポーズを配置する。 各カーブをそのポーズに合わせて選択します。動きの最初のポーズが最初のステップであり、すべてのポーズで動きが視認できるようにします。ものは忍び寄るのではなく、着地するようにします。poses.md を参照してください。
7. ページを変更する。 ビートに合わせたハードカット、地面のカット、シートのように重ねるページ、カメラが色の中に入る、内側からのフィル、形状を通した開き、またはピクセルブロックを使用します。フェードは絶対に使用しないでください。hits.md を参照してください。
8. タイポグラフィを設定する。 サイズが大きくなるにつれてトラッキングは狭くなり、リーディングもそれに伴って狭くなります。すべての単語は、すべてのポーズで背景に対して 4.5:1 のコントラスト比を満たします。タイトルはフェードインではなく、タイプ入力されます。type.md を参照してください。
9. サウンドを作成する。 すべてのクリックは楽曲自身のヒット音に合わせ、サンプルに正確に配置します。すべてのクリックは楽曲とともに開始する1つのトラックに焼き付けます。クリックが重要な部分では音楽をダッキングし、それ以外のクリックの下では 45% に 160ms 間下げます。確認用にメトロノームカットも保持します。sound.md を参照してください。
10. どの拍をスキップするか決定する。 ドロップ、ダック、ホールド、スナップ、小節全体をカット、楽曲ビートで終了。skipping.md を参照してください。
11. 確認する。 コンタクトシートを作成し、同期を測定し、メトロノームカットを視聴します。姿勢にマッピングされたタイムスタンプとしてノートを取得します。checking.md を参照してください。
12. ブラウザでライブ再生する？ メトロノームに対する同じルール: ページの時間を1つのクロックとし、画像は音声より25ms先行させ、音声はオーディオクロック上で先行してスケジュールし、楽曲がない場合はすべての変更をクリックに合わせます。live.md を参照してください。

ルール一覧

クロック

項目	ルール
フレームレート	30fps、意図的。スムーズな 60fps バリアントがストーリーボードを共有する場合があります（clock.md §8）
ポーズ	楽曲の8分音符: 169.825 BPM で 176.65ms、1秒間に5.66、30fpsで5または6フレーム
オーサリング	すべての時間を 200ms のポーズで ms 単位で記述; SPEED = TEMPO / 150; ms() でフレームに変換、seconds() で組み込みクロック用
ポーズ n の最初のフレーム	ceil(n × フレーム毎ポーズ)、動画全体のフレーム上で計算（beatFrame）
ページ	整数のポーズ数で構成され、小節線で開始（ポーズ番号が8で割り切れる）
長さの変更	小節単位で行うか、次の小節線の前でポーズを戻す
Studio のドラッグ	ドラッグされたトラックは、画像と音声をずらす from オフセットを書き込む：削除すること

配置

動き	カーブ	ポーズ
インアンドアウト（カメラ移動、通過、下線）	easeInOutSine	7, 18, 25, 25, 18, 7%、6つのポーズにわたって
フレーム外からのイン	イーズアウト	そうしないと、スローな開始が見えないところで費やされる
別のページの上に重ねるページ	easeOutSine	38, 70, 92%、3ポーズのトランジションにわたって
ズーム、線の太さの増加、開口部の拡大	各ポーズで同じ係数で成長	ズームはターゲットを中央への直線上に保つ
少数のポーズでは使用しない	3次インアウト（3, 12, 35, 35, 12, 3: 中間で跳躍）; 強いイーズアウト（最初のポーズで着地: 3ポーズトランジションとして 78, 97, 100%、moved() を使用した移動として 88, 99, 100%）

拍に合わせるもの

もの	ルール
クリック	1ポーズ押下、キックまたはスネアに合わせる; 最後のクリックの次のポーズでカーソル非表示
キャレット	タイピング中はソリッド、その後2ポーズオン、2ポーズオフ
スピナー	1ポーズあたり最大4分の1回転; 半回転を超えると逆回転に見える
ロールドマーク	半径に対する移動距離だけ回転し、直立して着地、easeOutSine を使用
カウンター	強いイーズアウトで1ポーズあたり1数字、表形式数字、ラウンドナンバーで2ポーズ保持
タイトル	そのポーズからビートより速くタイプ入力: 3フレームごとに1単語; 長い行は25msごとに1文字（オーサリング）
コード	2～4文字の不均等なチャンクを1ポーズでタイプ入力
長押しバックスペース	1回の実行、25msごとに1文字（オーサリング）、改行も同様
カメラの上昇	上昇し、頂上で2ポーズ完全に静止し、下降する
フレーム外からの表示	移動するまで描画されない
手動配置	そのポーズの移動量の最大10分の1の誤差、停止後はゼロ; 数px以内に収まるまで下げる

ヒット

楽曲内	映像内
8分音符	コードをチャンクでタイプ入力、動きのステップ
スネア	クリック、ポップ
ダウンビート	着地、新しいページ、ページの最初のアクション
ビッグキック	大きな変化: ページの着地、最後のページ全体、最後のクリック
ドラムが抜ける	ビルドアップ
ドラムが戻る	着地

クリックはビートに合わせる必要があります。トランジションはビートからずれても構いません。

サウンド

項目	ルール
クリック配置	サンプルに合わせて、楽曲のヒット音に配置（フィルムのヒットはポーズより25ms後に配置された）
クリックファイル	チック音の前に40msの無音を含める。これにより、サンプルにトリミングしてもクリックが欠落しない
クリックトラック	すべてのクリックを1つのトラックに焼き付け、楽曲とともに開始する
ダッキング	重要なクリックの前後は無音; それ以外のクリックの下では 45% に 160ms 間低下; 10ms のフェード
メトロノーム	各楽曲ビートのヒット音にクリック、小節の最初は高め、音楽は 20%; エクスポートには含めない

タイポグラフィ

サイズ	トラッキング	リーディング
20px 未満	0; モノキャピタル +2%	1.4–1.5
20px 以上	−1%	約 1.4
32px 以上	−2%	約 1.25
56px 以上	−3%	1.1–1.2; 2行のディスプレイタイトルでは 0.9 まで

すべての単語は、すべてのポーズで背景に対して少なくとも 4.5:1 のコントラスト比を達成する必要があります。デフォルトでは1つのファミリー（例では Geist と Geist Mono）を使用し、白地に黒、タクタイルデザインのようにします。フィルム自体は、ディスプレイフェイスとテキストフェイスを組み合わせ、ページをフラットカラーの背景に設定しました。カウンターは表形式数字を使用します。タイトルはタイプ入力され、フェードインされることはありません。

ブラウザでのライブ再生

項目	ルール
クロック	beat = anchorBeat + elapsed s × BPM / 60 × 2 を performance.now() で計算; テンポ変更時に現在時刻で再アンカー; すべてのシーンはビートの純粋関数
画像（ピクチャー）	ビートを25ms先行して読み取り; すべてのシーンをアニメーションフレーム内でコミット（flushSync）
音声（サウンド）	25msごとのタイマーがオーディオクロック上で次の120msをスケジュール（getOutputTimestamp()）; ウィンドウはオーディオ時間で測定され、出力レイテンシが追加される
表示中	画面上のもののみアニメーション; 最も画面上にある例が聞こえる
開始	ロード時に試行、その後最初の押下またはキーで; 音声を開始した押下はミュートしない（600ms）; ミュート状態は記憶される
楽曲なし	すべての変更をクリックに合わせる: 動きは8分音符でステップする場合があるが、クリックで開始および着地; クリック自身のメトロノームクリックはドロップ
メトロノーム	静かな木質のノック音（880Hz 50ms、小節の最初は 1320Hz）、音楽なしでは低音なし、すべて1つのリミッターを通す
一時停止	最も近いクリックで: そのクリックまで再生、または 160ms かけて戻る
動きの抑制	アイデアを示す静止ポーズ、サウンドボタンを押した後にのみ移動
タイポグラフィ	単語 4.5:1、意味のあるマーク 3:1、スケーリングされたシーンの最小単語はレンダリング時に 9px 以上

いつ拍をスキップするか

グリッドは厳格であるため、それを破ることは決定事項です。以下の各中断には、skipping.md にその理由があります。

• 重要なクリックの前後で音楽をドロップする。 クリックの50ms前から次の小節線まで無音にし、10msのフェードを適用します。クリックだけが聞こえ、ビートはその後に続くものとともに戻ります。
• 他のクリックの下でダッキングする。 音楽を 45% に 160ms 間下げ、クリックの低音に余裕を持たせます。
• 結果を単独で保持する、次のことが始まる前に1楽曲ビート分、例えばコピー後のチェックマークなど。
• 上昇の頂上で2つの同一のポーズを保持する。
• ラウンドナンバーで2ポーズ保持する、次に進む前に。
• ビートの間にあるノートを最も近いアクセントのあるビートにスナップする。
• 小節全体をカットする、ノートがそれより短い間隔を要求する場合でも。そのコストを説明してください。
• 楽曲ビートで終了する。 最後のページは約2秒保持し、最後のポーズで音楽をフェードアウトします。それ以外の場合は、アクションの直後に終了します。

絶対にリリースしてはいけないもの

• 間隔の悪い動きを隠すためにビートから動きを滑らかにすること
• シーン自身の最初のフレームからポーズをカウントすること
• 小節線から始まるページにその理由が隣接して書かれていないこと
• 小節単位ではない長さの変更で、次の小節線の前に戻されていないこと
• Studio の from オフセットがコンポジションツリーに残っていること
• キックやスネアから外れたクリック、またはフレーム上に配置されたクリックサウンド（サンプルに合わせていない）
• 短いクリックサウンドを焼き付けた1つのトラックではなく、個別のフレームで開始すること
• 動きの最初のポーズが開始位置である場合、または最後の数pxを忍び寄るように動くこと
• フレーム外の要素が移動する前に描画されること
• スピナーやホイールが1ポーズあたり半回転を超えて回転すること
• フェード、または彩度の高い背景間のクロスフェード
• 1秒間に3回以上のフラッシュで地面が変化すること
• 任意のポーズで背景に対して 4.5:1 未満の単語
• …

（翻訳のため一部省略）