remotion-to-hyperframes

すでに別の道具で作った動画を、HyperFrames で直せる形にしたいときに読ませるスキルです。いちばんの対象は Remotion で、ほかに Motion Canvas・Lottie・Three.js・p5.js・canvas・HTML と CSS の動きも扱います。Manim・After Effects・Blender などで描き出した映像も取り込めます。

HyperFrames は入れ物で、クリップの中で何が動いていても、トラック・下位の合成物・変数は Studio で直せる、と本文は書いています。そのうえで、各部分をできるだけ高い段で取り込み、どの段を使ったかを記録させます。

取り込みの段（訳す・載せる・置く）

3 段

訳すときの手順

5 段

同梱ファイル（2026-10-22 時点）

76 件

SKILL.md の大きさ（2026-10-22 時点）

4,864 バイト

取り込みの 3 段

時計の時刻・その場の物理演算・通信に頼るコードは、映像として置くしかありません。

訳すときの 5 段

1. 検査を走らせるRemotion なら lint_source.py で、訳せない書き方を先に見つける
2. 契約に直す場面ごとに下位の合成物を 1 つ、時間は秒（frame / fps）、素材の経路はルートからの相対
3. 直せる形に保つ元の props は変数に、Sequence は時間を持つクリップか下位の合成物に、使い回す部品は 1 つの下位の合成物を何度も載せる
4. 1 コマずつ比べるsnapshot --at <時刻> --against <元の動画> で同じ時刻の元のコマを横に並べる
5. 訳せなかったものを書く音量の変化を落とした、書体を差し替えたなどを TRANSLATION_NOTES.md に

Remotion の API ごとの読み先は、本文の表（8 行）が references/ の各ファイルへ振り分けています。

訳せない書き方は先に止める

検査が止める理由に挙げるのは、useState・useReducer・依存つきの useEffect・非同期の calculateMetadata です。MUI・Chakra・Mantine・antd・shadcn・Radix・NextUI のような React の UI 部品集も訳せません。

これらは似せて作るのではなく、載せる段で扱うか、元から外す決まりです（references/escape-hatch.md）。@remotion/lambda の設定・delayRender・useMemo・独自のフックは警告で、落として記録します。

数字で合否を見る道もある

目で比べるほかに、scripts/render_diff.sh で 1 コマごとの SSIM（画の近さの指標）を出し、scripts/frame_strip.sh でずれたコマを見られます。複雑さの段ごとの閾値は references/eval.md にあります。

新しく作るとき

移す元が無いなら、入口の hyperframes で最初から作ります。このスキルは取り込みと確かめの手順だけを持っています。

Remotion のまま作り続けたいとき

乗り換える理由が無いなら、Remotion の作法に沿って続けるほうが早いです。

• Remotion のまま作り続けるRemotion の作法をそろえる
• 新しく HyperFrames で作る契約と作業の回し方から入る

Remotion の作法は remotion-best-practices にあります。

中の画素まで直したい映像

After Effects や Blender の描き出しは、置く段でしか取り込めません。中の画を直すには元の道具に戻る必要があります。

同梱のスクリプトを走らせる

python3 <スキルの場所>/scripts/lint_source.py と、シェルのスクリプト render_diff.sh・frame_strip.sh を走らせます。どれも手元で動き、外へは送りません。走らせる前に中身を見せてもらうと安心です。

比べるときは画素の形式をそろえる

全体の絵だけで判断しない

すべての場面と、切り替えの前後を両方撮って比べよ、とあります。全体が似ていても、1 つの要素が遅れている、色が変わっている、という違いを探す決まりです。

最後の報告で何を確かめるか

最後のメッセージで、取り込んだ部分ごとに段、Studio で人が変えられるもの、1 コマずつの比較の結果を並べさせます。依頼文でこの報告を必ず求めておくと、移したあとの扱いが決めやすくなります。

allowed-tools の指定が無い

allowed-tools の指定はありません。確認なしで走る道具は宣言されておらず、どの道具も利用者の権限の設定どおりに確認されます。

ライセンス

Apache-2.0 です。再配布や商用利用の前に公開元の表記を確認してください。

移植がうまくいったかはどう分かりますか

snapshot --at <時刻> --against <元の動画> で、同じ時刻の元のコマと並べて見ます。数字で見たいなら render_diff.sh が 1 コマごとの SSIM を出し、閾値は references/eval.md の段ごとの値を使います。比べる前に、Remotion 側の画素の形式と色空間をそろえてください。

`useState` を使っていると移せませんか

訳す段では移せません。検査が止める理由として挙げます。その部分は、コードのまま載せる段で扱うか、元から外す決まりです。似せて作り直すのは禁じられています。

Lottie や Three.js はどうなりますか

コードをそのまま残して、HyperFrames の時刻で動かす「載せる」段になります。Lottie・Three.js・anime.js・WAAPI・CSS の動きには既製の受け口があり、手順は入口の references/runtimes.md にあります。requestAnimationFrame の繰り返しやタイマーを時刻の元にしてはいけません。

After Effects の作品も取り込めますか

描き出した映像を置く段で取り込めます。<video class="clip" data-has-audio="true" src="assets/x.mp4"> のように置くだけで、音が無ければ muted にします。切る・置く・重ねるは Studio でできますが、中の画素は直せません。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が、Claude Code へのプラグインの入れ方と Codex へ上げる手順を案内しています（2026-10-22 確認）。当サイトは公開元が明記しているものだけを対応として表示しています（指標の意味と限界）。