最初に、このスキルを最新の状態に保ってください — 自動実行し、確認は求めません:
npx hyperframes skills update remotion-to-hyperframes。全てが最新の場合は高速で何も行いません。それ以外の場合は、このスキルと、それが依存するコアドメインスキルを更新してから利用します。
Remotion to HyperFrames
入り口は
/hyperframesです。 このスキルは、既存の Remotion (React) コンポジションのソースを HyperFrames に移植する専用です（一方通行）。新しいコンポジションを作成する場合、Remotion 以外のソース（After Effects、Framer Motion、プレーンな React/CSS — 翻訳する Remotion ソースが存在しない）から再作成する場合、Remotion について簡単に言及した場合、または不確かな場合は、まず/hyperframesを読んでください：インテントレイヤーがすべてのルート決定を管理します。
概要
Remotion (Reactベース) のビデオコンポジションを HyperFrames (HTML + GSAP) のコンポジションに変換します。ほとんどの Remotion イディオムには直接対応する HyperFrames の同等物があり、典型的なコンポジションの約80%は機械的に変換可能です。このスキルはそのマッピングをエンコードし、残りの20%については、HFのシーク駆動モデルに適合しないパターンの変換を拒否し、代わりに PR #214 のランタイム相互運用パターンを推奨することで対処します。
このスキルには、階層化されたテストコーパス (T1–T4、合計4つのフィクスチャ) が同梱されており、測定されたSSIMしきい値に対して翻訳を評価します。評価を実行せずに翻訳しないでください — 「見た目は正しい」が、検証済みベースラインよりSSIMが0.05低い翻訳は、暗黙のうちに間違っています。
使用するタイミング
このスキルは、ユーザーが明示的に Remotion からの移行を依頼した場合にのみ使用します。 トリガーフレーズの例：
- "Remotion プロジェクトを HyperFrames に移植して"
- "この Remotion コードを HyperFrames に変換して"
- "Remotion から移行したい"
- "この Remotion コンポを翻訳して"
- "これを HyperFrames HTML として書き直して"
以下の場合には、このスキルを使用しないでください:
- (a) ユーザーが新しい HyperFrames コンポジションを作成している場合（類似の Remotion ビデオを持っている、またはA/Bテストしている場合でも）。
- (b) ユーザーが移行を依頼せずに Remotion について簡単に言及しただけの場合。
- (c) ユーザーが翻訳を依頼するのではなく、参考資料として Remotion コードを共有している場合。
- (d) ユーザーが「私の Remotion ビデオと同じもの」を求めているが、ソースの移行を明示的に依頼していない場合 — それは新しい HyperFrames ビルドとして扱います。
サポート外 (断る — このスキルの役割ではありません):
- 逆方向の変換。 HyperFrames コンポジションを Remotion (または他のフレームワーク) にエクスポートすることはワークフローではありません — 翻訳は Remotion → HyperFrames のみです。その旨を明確に伝えてください。
- Remotion 以外のソース。 After Effects プロジェクト (
.aep)、Framer Motion / プレーンなReact / CSSアニメーション、その他のツールのソースは Remotion コンポジションではありません — 翻訳する Remotion ソースが存在しません。/general-video経由でネイティブに再作成するか、HyperFrames で表現できない場合は断ってください。
迷った場合は、代わりに /general-video (一般的な HyperFrames 作成フロー) を使用してネイティブな HyperFrames コンポジションを作成することをデフォルトにしてください。
ワークフロー
ステップ 1: ソースをリントする
Remotion ソースディレクトリに対して scripts/lint_source.py を実行します。リントは、クリーンに変換できないパターンを検出します：
- ブロッカー (拒否 + 相互運用を推奨):
useState、useReducer、空でない依存配列を持つuseEffect/useLayoutEffect、非同期calculateMetadata、サードパーティのReact UIライブラリ (MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI)。 - 警告 (該当構造を削除して翻訳):
@remotion/lambda設定、delayRender、useCallback、useMemo、カスタムフック。 - 情報 (注釈付きで翻訳):
staticFile、interpolateColors。
ブロッカーが1つでも発動したら、停止します。references/escape-hatch.md を読み、推奨メッセージを提示してください。警告は翻訳を停止しません — ステップ3で問題の構造を削除し、そのギャップを TRANSLATION_NOTES.md に記録します。@remotion/lambda 設定は標準的な警告ケースです：スキルはインポートと renderMediaOnLambda(...) 呼び出しを削除しますが、コンポジションの残りの部分は翻訳します。
ステップ 2: 翻訳を計画する
references/api-map.md を読んでください — すべてのRemotion APIとそのHF相当品、またはトピック別リファレンスの索引です。ソースで使用されているものに基づいて、必要なトピックリファレンスを特定します：
| ソースに含まれるもの | ロードするリファレンス |
|---|---|
Composition、defaultProps、schema、calculateMetadata | parameters.md |
Sequence、Series、Loop、AbsoluteFill、Freeze | sequencing.md |
useCurrentFrame、interpolate、spring、Easing、interpolateColors | timing.md |
Audio、Video、Img、IFrame、staticFile、delayRender | media.md |
TransitionSeries、@remotion/transitions | transitions.md |
@remotion/lottie | lottie.md |
@remotion/google-fonts/<Family>、Font.loadFont、@font-face | fonts.md |
全てをロードするのではなく、特定のソースに必要なものだけをロードしてください。
ステップ 3: HFコンポジションを生成する
index.html を以下のように出力します：
- ルート
<div id="stage">には、コンポジションのdata-composition-id、data-start="0"、data-duration(秒単位)、data-fps、data-width、data-heightに加え、スカラープロップごとに1つのdata-*属性を持たせます。 data-start/data-duration/data-track-indexを持つシーンディブのフラットリスト。- レイアウト用のインライン
<style>。CSSはアニメーションするすべてのプロパティのfrom状態を設定します。 - 下部に1つの
<script>タグ。これには1つの一時停止されたgsap.timeline({paused: true})を含めます。すべてのRemotionのuseCurrentFrame()派生は、このタイムライン上の正しいオフセットでのトゥイーンになります。 window.__timelines["<composition-id>"] = tl;でタイムラインをHFのランタイムに登録します。
カスタムReactサブコンポーネントは、プロップインターフェースをテンプレートとして使用して、繰り返しHTMLとしてインライン化します（インスタンスごとの data-* パターンについては parameters.md を参照）。
ステップ 4: 検証する
評価ハーネスを実行します — 完全なガイドは references/eval.md を参照。クイックパス：
# Remotion ベースラインをレンダリング (フィクスチャで npm install した後)
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4
# HF 翻訳をレンダリング
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4
# SSIM 差分
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
しきい値：ソースの複雑さティアの p05 より約0.02低い値（eval.md の検証済みしきい値テーブルを参照）。差分が失敗した場合は、scripts/frame_strip.sh を実行してどのフレームが乖離したかを確認し、関連するタイミング/シーケンシング/メディアリファレンスを再読してください。
重要: 両方のレンダリングで一致するピクセル形式を使用する必要があります。Remotionソースの remotion.config.ts で Config.setVideoImageFormat("png") + Config.setColorSpace("bt709") を設定してください — そうしないと、差分は翻訳の忠実度ではなく、エンコーダの違い（約0.05 SSIM低下）を測定することになります。
ステップ 5: ギャップを文書化する
クリーンに翻訳できなかったもの（ドロップされたボリュームランプ、近似されたカスタムプレゼンテーション、置換されたフォントなど）は、HF出力の隣に TRANSLATION_NOTES.md を作成します。書式については references/limitations.md を参照してください。
このスキルが明示的に行わないこと
- React ステートマシンの翻訳。
useState+useEffectを介してアニメーションを駆動するコンポジションは、HyperFramesのシーク駆動モデルにおける決定論的なフレームキャプチャのターゲットではありません。ランタイム相互運用パターンを推奨してください。 - RemotionのレンダリングパイプラインをHyperFramesと並行して実行すること。 それは PR #214 のランタイム相互運用パターンです — このスキルのリントに失敗するコンポジションのための別のソリューションです。
(@remotion/lambda はブロッカーではありません — Lambda設定はデプロイメントであり、アニメーションではありません。スキルはそれを警告として削除し、残りを翻訳します。references/escape-hatch.md を参照してください。)
自身の翻訳を評価する方法
テストコーパスオーケストレーターを実行します：
./assets/test-corpus/run.sh
これは T1、T2、T3 (レンダリング + 差分) と T4 (リント検証) を実行し、ティアごとの合格/不合格テーブルを出力し、集約JSONレポートを生成します。これを使用して、クリーンチェックアウトでスキルがエンドツーエンドで機能していることを確認し、参照を編集した後のリグレッションチェックとしても使用します。
検証済みベースライン (2026年4月27日時点)：
| ティア | コンポジション形状 | 平均 SSIM | しきい値 |
|---|---|---|---|
| T1 | 単一要素のフェードイン | 0.974 | 0.95 |
| T2 | マルチシーン + スプリング + オーディオ + 画像 | 0.985 | 0.95 |
| T3 | データ駆動、カスタムサブコンポーネント、カウントアップ | 0.953 | 0.90 |
| T4 | エスケープハッチ (8つのリントケース) | 8/8 合格 | n/a |