Communitygithub.com

ronnnner/norstack

プログラムによるReact動画生成。Remotionオーバーレイ、モーショングラフィックス、ReactコンポジションのMP4レンダリングに使用。生成されるモーションのみで、フッテージは動画・ポートレートに残ります。

norstack とは?

このスキルは、Remotionを活用してReactコンポジションから動画をプログラム的に生成するためのエージェント指示書です。主に、モーショングラフィックスやオーバーレイ、Reactで記述されたアニメーションをMP4にレンダリングするユースケースを想定しています。フッテージ(元動画)はそのままに、Reactで生成したモーションだけを重ねる「生成モーション」に特化しており、ビデオ編集のワークフローに組み込むことができます。指定されたスロットディレクトリにプロジェクトをスキャフォールドし、`render.mp4`に出力。EDLオーバーレイはそのファイルを参照します。注意点として、CSSの秒数ではなく`durationInFrames`で時間を管理し、アニメーションには`interpolate`や`spring`などのRemotionネイティブ関数を使用するルールが定められています。また、フォント・オーディオのプリロード、透明オーバーレイのコーデック選択、レンダリング後の`ffprobe`確認など、実践的な工程が含まれています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

remotion

フッテージ → video / portrait。これはReactで生成されたモーションのためのものです。

スロット

決してリポジトリルートには置かないでください。常に:

<videos_dir>/edit/animations/slot_<id>/

そこにスキャフォールドしてください。render.mp4にレンダリングします。EDLオーバーレイはそのファイルを参照します。

ルール

  • durationInFramesが真実です。CSSで秒数を推測しないでください。
  • interpolate / spring。リニアは使わない。レイアウトアニメーション(top/left/width)も使わない。
  • Sequence + AbsoluteFill。1つのコンポジションに1つのアイデア。
  • フォントとオーディオをプリロードする。フォントがないと再レンダリングが必要です。
  • fpsは親に合わせます(24はフィルム、30はソーシャル)。ただし、別途指定した場合は除く。
  • 透明オーバーレイ → ProRes 4444またはアルファ付きWebM。選択前に確認してください。

レンダリング後

ffprobe render.mp4
# その後、出力フレームを確認 / 見てください

ハードな動画ルールは依然として適用されます: オーバーレイPTSシフト、字幕は最後、親カットで30msのオーディオフェード。

ベンチャー

profileとtasteからパレットを取得します。各プロジェクトには独自のパレットがあります。残ったオレンジ色の起動ビデオキットはありません。

スロットエージェント内で質問しないでください。明白なものを選んでレンダリングしてください。

関連スキル