Communitygithub.com

Hive-RSI-Lab/video

デモビデオ、ハイライトリール、GIFをコードで作成します。スムーズでフレーム精度の高い出力が可能です。画面収録がカクつく場合や、デモ動画・製品GIFが必要な場合に使用します。

video とは?

このスキルは、Webアプリ、ターミナル、3Dシーンのデモビデオやハイライトリール、GIFを、画面収録ではなくコードで生成するためのツールです。画面収録では避けられない処理中のカクつきや、修正後の再現性の欠如を解決します。仮想クロック上でページを動作させ、1/30秒ごとに1フレームをキャプチャするため、アニメーション、タイマー、スクロール、キー入力がすべて正確なフレームに配置されます。カメラ移動、カーソル、クリックリングは後からオーバーレイされるため、同じスクリプトから常に同一の動画が生成されます。Blenderを使用した3Dショットのレンダリングや、tmux/bashセッションの録画・再生によるターミナル映像の生成にも対応しており、ビデオ制作のワークフロー全体をコードベースで管理できます。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Hive-RSI-Lab/hive-video/tree/HEAD

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

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

ドキュメント

動画の作成

画面収録はしないでください。ブラウザがビジーなときに収録するとカクつきが発生し、修正後に誰も再実行できません。代わりに、フィルムをスクリプトとして記述してください。このキットは、仮想クロック上でページを実行し、ページ時間の1/30秒ごとに1フレームをキャプチャします。そのため、すべてのアニメーション、タイマー、スクロール、キー入力が正確なフレームに配置されます。カメラ移動、カーソル、クリックリングは、フレームの後からオーバーレイ描画されます。同じスクリプトは常に同じフィルムを生成します。

ループ

  1. video new DIR は、スターター DIR/film.mjs を作成します。ダミーデータを保持する使い捨てのサーバーを指定し、実際のアカウントを指定しないでください。それぞれ1つのアイデアを持つ、3〜5つのビートを記述します。
  2. heavy timeout 1800 video render DIR/film.mjs OUT/ は、各ビートをフィルムに収め、エンコードし、ビートをMP4に結合します。最初のレンダリングは最初に video check を実行します。拒否リストに含まれる単語が画面に表示されるとレンダリングは失敗します。
  3. video sheet OUT/film.mp4 OUT/sheet.png 16 を実行し、シートを見てください。ほとんどのバグはここでのみ現れます。スクロールしなかったリスト、空のパネル、間違ったものを見ているカメラなどです。
  4. video stutters OUT/film.mp4 は0のスタッターを報告する必要があります。カクつきとは、速い動きやポップするような動きです。コンテンツがカットされるべき箇所(ページ切り替え、メッセージ到着)でのカクつきは問題ありません。--allow A-B でそれらの範囲をスキップします。
  5. video mp4 IN OUT.mp4 はWeb MP4(H.264、faststart)を作成します。video gif IN OUT.gif --max 3 は、GIFが3MB未満に収まるまで幅を960pxから段階的に縮小します。
  6. ビデオをトリミングするのではなく、スクリプト内のタイミングを繰り返し調整します。

ペースと完全なディレクターAPIは kit/KIT.md にあります。最初のフィルムの前に読んでください。簡単に言うと: 合計約20秒; 2秒以内に動作が完了すること; 1ビートにつき1つのカメラ移動(1.5-2倍、0.4-0.7秒); 結果を少なくとも0.8秒間保持する(d.show); 毎秒約30キーの速度でタイプすること。

スムーズにするためのポイント(苦労して学びました)

  • フィルム専用の調整はアプリではなく、initスクリプトに記述してください。 新しいアイテムがポップインする代わりにイーズインするようにします(animation: in .4s cubic-bezier(.16,1,.3,1)、opacity 0 と translateY 12pxから)。最後までジャンプするリストの場合は、Element.prototype.scrollTop のセッターをラップして、約500msかけてスムーズに移動するようにします。hive-starsデモフィルムは、その両方を示す実践例です。
  • setTimeout で独自のモーションを制御してください。 フィルムのクロックはタイマーを正確に実行します。requestAnimationFrameのコールバックは、クロックが一時停止されている間は実行されない場合があります。
  • ページのタイムラインに合わせてください。 アプリがタイマー(0.7秒、1.8秒などで定型応答)に依存している場合、各ビートの hold をそれらに合わせて調整し、ビートが表示するものの直後に終了するようにします。
  • zoom とビューポート単位。 ディレクターの zoom: 1.5 は、1280x720のレイアウトを1920x1080でフィルムに収めます。Chromeは vh/dvh/vw をルートズームで除算しないため、キットは同一オリジンのスタイルシート内のそれらの単位を書き換えます。これがないと、calc(100dvh - x) レイアウトは1.5倍高くなり、スクローラーがスクロールしなくなります。クロスオリジンのCSSは書き換えられないため、ページは自分で提供してください。
  • Date をパッチするアプリ。 キットは自身が保存した Date を通じてクロックを読み取るため、Date をラップするページ(時刻のずれ、偽の「現在時刻」)は pauseAt を逆方向にできません。
  • 拒否リスト: ホスト名、ユーザー名、git名とメールアドレス、実際のプロジェクト名。ダミーデータのみを使用してください。

3Dショット(Blender)

video blender SHOT.py OUT/ [--quality preview|final] は、CPU上でショットスクリプトをレンダリングします。ジョブリミッター(H2のheavy)の下で実行し、最初は --quality preview を実行してください。最終レンダリングはフィルムの1秒あたり数分かかるためです。ヘルパー(イージング、被写界深度付きカメラ、ライトリグ、KiCadからのPCB、GDS押し出し、UIプレーン、ノードグラフ)は kit/blender/README.md にあります。キットの encodeFrames またはffmpegでフレームをエンコードし、stitch でそれらをカットインします。

ターミナル

kit/term.mjs は、ダミーのホームとホストを持つサンドボックス内で実際のtmux/bashセッションを録画し、それをxterm.jsを使用してフィルムクロックで再生します。kit/KIT.md を参照してください。

関連スキル