remotion-to-hyperframes

プラグインのインストール： このスキルが HyperFrames プラグイン内にある場合、セットアップや鮮度確認のコマンドを実行する前に、プラグインの実行ルールに従ってください。

HyperFrames にインポートする

HyperFrames がコンテナです。クリップ内で何が動作していても、そのトラック、サブコンポジション、変数は Studio で編集できます。各パーツは、対応できる最も高いレベルで取り込み、使用したレベルを記録してください。

レベル	対象	方法	Studio での編集可否
ネイティブ	HTML + GSAP にできるコード：ほとんどの Remotion、HTML/CSS/GSAP アニメーション、シンプルな Motion Canvas	変換してから、フレームごとに検証します	すべての要素。変数、カタログ、プリセットを適用できます
ホスト型	ブラウザーで任意のフレームを描画できるコード：canvas、p5.js、Three.js、Lottie、WebGL、その他の JS アニメーション	コードをそのまま使い、HyperFrames の時間に合わせて動かします	タイミング、位置、公開パラメーター
メディア	映像またはフレームを出力するもの：Manim、After Effects、Blender、PIL、moviepy	ファイルにレンダリングし、クリップとして使います	カット、配置、レイヤー。ピクセルの編集はできません

実時間、ライブ物理演算、またはネットワークに依存するコードは、メディアとしてのみ取り込めます。

ネイティブ：変換してから検証する

1. Remotion の場合は、まず python3 <SKILL_DIR>/scripts/lint_source.py <source dir> を実行します。ブロッカー（useState、useReducer、依存関係を持つ useEffect、非同期の calculateMetadata、MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI などの React UI キット）は変換できません。ホスト型にするか、リファクタリングで取り除いてください。決して近似してはいけません（references/escape-hatch.md）。警告（@remotion/lambda の設定、delayRender、useMemo、カスタムフック）は削除され、その旨が記録されます。
2. /hyperframes の仕様に合わせて変換します。シーンごとにサブコンポジションを 1 つ作成し、時間には秒（frame / fps）を使い、アセットのパスはルート相対にします。各 Remotion API に相当する機能は references/api-map.md に記載されています。Remotion のレンダーページのルール * { box-sizing: border-box; } は、ルートの index.html の <style> に 1 回だけ記述します。これがないと、枠線やパディングのある要素はすべて、枠線とパディングの分だけ大きくなります。
3. 編集可能な状態を保ちます。ソースの props は data-var-text、data-var-src、または var(--id) にバインドされた data-composition-variables にします。各 Sequence は、タイミング付きクリップまたはサブコンポジションにします。再利用するコンポーネントは、data-variable-values を使って複数回マウントする 1 つのサブコンポジションにします。
4. フレームごとに比較します。npx hyperframes snapshot --at <t,…> --against <original.mp4> を実行すると、各時間の元動画のフレームが、出力のフレームの横に保存されます。すべてのシーンと各カットの前後をサンプリングし、全体の見た目だけでなく、遅れて表示される要素や色が変わった要素がないか確認してください。スコア付きで確認する場合は、scripts/render_diff.sh <original.mp4> <hf.mp4> <out> でフレームごとの SSIM を取得し、scripts/frame_strip.sh で差異のあるフレームを確認できます（複雑さの段階ごとのしきい値は references/eval.md を参照）。エンコーダーの差異を測定しないよう（SSIM で約 0.05 の差が出ます）、Remotion 側は Config.setVideoImageFormat("png") と Config.setColorSpace("bt709") を使ってレンダリングします。
5. 変換がうまくいかなかった点（削除した音量ランプ、近似した表示、代替フォントなど）を TRANSLATION_NOTES.md に記載します。

Remotion	参照先
Composition, defaultProps, schema, calculateMetadata	references/parameters.md
Sequence, Series, Loop, AbsoluteFill, Freeze	references/sequencing.md
useCurrentFrame, interpolate, spring, Easing, interpolateColors	references/timing.md
Audio, Video, Img, IFrame, staticFile, delayRender	references/media.md
TransitionSeries, @remotion/transitions	references/transitions.md
@remotion/lottie	references/lottie.md
@remotion/google-fonts, Font.loadFont, @font-face	references/fonts.md
移植できないもの	references/limitations.md

ソースで使われている名前付きのビジュアルを手作業で作る前に、npx hyperframes catalog --query "<the visual, in English>" --json を検索してください。何もインストールされていなくても、レジストリ全体から候補を順位付けします。

ホスティング

コードはそのままにして、時間の管理は HyperFrames に任せます。HyperFrames は、指定された時間のフレームを描画します。シークプロトコルと、Lottie、Three.js、anime.js、WAAPI、CSS アニメーション用の組み込みアダプターについては、../hyperframes/references/runtimes.md を参照してください。時間の基準となる requestAnimationFrame ループやタイマーは使わず、乱数はシード付きのものだけを使います。長さを定義するものがほかにない場合は、ルートに data-duration を指定します。

メディア

<video class="clip" data-has-audio="true" src="assets/x.mp4" ...> を指定します。無音の場合は muted を指定してください。それ以外は必要ありません。

最終メッセージでは、インポートした各パーツについて、レベル、Studio で変更できる内容、フレームごとの比較結果を記載してください。