hyperframes-to-remotion について
既存の HyperFrames HTML コンポジションを React ベースの Remotion コードへ移行するワークフローです。シーン構成やタイムラインを Remotion のフレーム単位のプリミティブへ移したい制作者や開発者向けです。
主な機能
- 01HTML 構造とタイムラインの解析
- 02シーンを React コンポーネントとして再構築
- 03GSAP の補間を Remotion プリミティブに置換
- 04Remotion Studio で結果を確認
活用シーン
- 01既存の HyperFrames コンポジションの移行
- 02Remotion でタイムラインアニメーションを再構成
- 03Remotion Studio で変換結果を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/hyperframes-to-remotionを入力して読み込まれたか確認します。
詳細
HyperFrames から Remotion への移行ワークフロー
レガシーまたは既存の HyperFrames HTML コンポジションを、純粋な React Remotion コードに移行します。
対応表
| HyperFrames の概念 | Remotion での相当機能 |
|---|---|
GSAP Timeline .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
<video> 要素 | <OffthreadVideo src={staticFile('...')} /> |
<audio> 要素 | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
移行手順
- HyperFrames の HTML 構造とタイムラインの値を解析します。
- シーンのレイアウトを React の
<AbsoluteFill>コンポーネントとして再作成します。 - GSAP の補間を、フレーム単位で決定論的な Remotion の
spring()およびinterpolate()プリミティブに置き換えます。 - Remotion Studio で出力を確認します。
コメント
Markdown 対応