vvedantb/eva

eva製品動画

既存のRemotionプロジェクト（video/）を使用して、evaアプリ（Linear/Notion品質）の高品質な製品動画を作成します。映像はagent-browserを使用して実際のアプリからキャプチャします。

スキルが間違っていますか？ こちらは洗練されたマルチシーン編集版（Remotion、音楽、キャプション）です。単一機能の場合は、より軽量な姉妹スキル eva-feature-screenshot（1枚のスクリーンショット＋ツイート）または eva-feature-demo（1つの生のagent-browser録画＋ツイート）をお勧めします。これら3つのスキルのツイートコピーは eva-tweet から取得します。

正規のプロジェクトは既に存在します — 最初から作らず、それを再利用してください。

• プロジェクト: video/ · プライマリコンポジション: EvaHero（video/src/EvaHero.tsx）
• レンダリング出力: video/out/eva-demo.mp4
• video/src/components/ の再利用可能なコンポーネント: Backdrop、AppWindow、EvaMark、HeroCaption（+ Accent）、Cursor、Spotlight、StatCounter、SnapIn、tokens
• video/scripts/ のヘルパースクリプト: stills.mjs、gen-music.mjs、check-audio.mjs

新しい動画を作成するには: 新しいストーリーに合わせてスクリーンを再キャプチャし、EvaHero.tsx でシーンリスト / キャプション / 時間を編集し、カット時間に合わせて音楽を再生成し、レンダリング、QAを実行します。

非交渉のデフォルト設定（苦労して学びました — 理由があってのみ変更してください）

これらはすべて最初は間違いでした。ユーザーが上書きしない限り、これらを維持してください。

1. 1280×720、30fps。 1080pではありません。eva UIは高密度なデスクトップアプリです。1080pではスマートフォンで「ズームしすぎ / 大きすぎ」と読み取られます。720pはTwitter/X向けのモバイルフレンドリーなスイートスポットです。

2. フレームのネイティブレイアウトでキャプチャし、全画面表示する。 キャプチャ時はブラウザのビューポートを 1280×720 に設定し、スクリーンショットを 1:1 で全画面表示（フレーム全体を埋める）します。品質を左右する最大のレバー:

   • 2560×1440でキャプチャし720pにダウンスケールすると、UIテキストサイズが半分になり、モバイルで「ズームアウト」して読めなくなります。
   • カメラを領域に 内側 にクロップ/ズームすると、UIの不格好な断片が表示されます。
   • 1280幅のレイアウトを1:1で表示 = ネイティブな要素サイズ = 読みやすく、「ズームイン」して、くっきり。

   ズームはゼロ、つまりゼロです。 PanScene の from / to は、すべてのスクリーンショットシーンで { scale: 1.0, fx: 0.5, fy: 0.5 } のままにします。1.02–1.06の「微妙なプッシュイン」でも、サイドバーのラベル、右上隅のプライマリボタン、統計フッターなど、視聴者が必要とするクロームがクリップされます。また、スクリーンショットの周りに <SnapIn from={0.97}> を渡します。デフォルトの1.06は 内側 にポップし、すべてのカットの開始フレームをクロップします。動きはカメラの動きではなく、ハードカットとキャプションのスナップから生まれます。

3. 実際の映像、完了状態。 agent-browser で実際のアプリを操作します。既に完了した 作業（マージされたタスク、差分、PR）を録画します — ライブのエージェント実行を待たないでください（サンドボックスは停止しています。ライブ実行は遅くて不安定です）。きれいな入力を用意します（例: New Taskモーダル内の整頓されたタスクタイトル）。references/capture-workflow.md を参照してください。

   絶対に送信しない — 入力のみ。 入力を埋め、ピッカーを開き、キャプチャします。コンポーザー内でEnterを押さない。送信矢印、Create、Save、Run、Startを押さない。たとえデモ映像であっても、実際のセッションやエージェント実行を開始しない。送信するとユーザーの実際のワークスペースを変更し、実際のコンピュートを消費します。ステージングされた状態はショットに必要なものです。Enterは、フィールド自身にのみコミットし、他に影響がない場合（開いたピッカーから @ メンションを受け入れる場合）にのみ許可されます — それ以外の場合はピッカー行をクリックします。

4. スナッピー、ハードカット、ビート同期。 合計約20秒。ビートに合わせてカットし（長いクロスフェードではなく <Series> を使用）、キャプションを素早くスナップインします。シーンを SnapIn でポップイン — タイトル/アウトロカードは裸で、スクリーンショットは from={0.97} を使用（デフォルト2を参照）。退屈 = 長すぎ + 遅いクロスフェードが多すぎ。

5. すべてのカットに同期した音楽。 ユーザーの定期的な好みは ローファイ、「クラシック」バリアント、クラップなし — gen-lofi-variants.mjs で生成します。これにより、各カットがウォームコードスウェルでマークされます。このスクリプトは --duration、--cuts、--only、--prefix を受け取るため、新しい動画でスクリプトを編集する必要はありません:

   node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \
     --only=classic --prefix=platform      # → public/audio/platform-music-lofi-classic.wav
   

   --cuts はコンポジション内のシーン境界と 一致しなければなりません。gen-music.mjs は古いクラップベッドです — ユーザーがクラップを要求した場合のみ使用してください。references/remotion-build.md → Music を参照してください。

6. evaのテーマに合わせる。 ニアブラック #050606、インディゴアクセント #818cf8、ブランドマークグラデーション パープル #8B3FB8 → ブルー #3B7DD8、フォント Inter + JetBrains Mono。これらはすべて video/src/components/tokens.ts にあります。ブランドカラーを勝手に作らないでください。

7. 誠実に + 機密性を保護する。 ユーザー自身のリポジトリ（vvedantb/eva）を使用し、クライアントのリポジトリ（Evalucom/CarePulse）は使用しないでください。「Codebases」ホーム（クライアントリポジトリのリスト）を表示せず、キャプチャ前にドキュメント/タスクリストにクライアント名の項目がないか確認してください — リストが汚れている場合は、きれいなデモドキュメントをステージングしてください。画面上の名前やメールに関する個人データの懸念を決して提起しないでください — Settings → Experimental には、すべての [data-pii] 要素をぼかす blur-PID トグルがあり、これは製品で処理されています。エラーパネルが環境変数名やプロジェクトIDを漏洩している場合はフラグを立ててください。キャプションは正直に説明します — 画面が表示していない機能を決して暗示しないでください。利用可能なキャプチャが停止したサンドボックスや空の状態だけの場合、キャプションを画面に合わせて言い換え、飾らないでください。

ワークフロー

この順序で作業し、各ステップを行う前に関連するリファレンスファイルを読んでください。

1. ストーリーを計画する。 デフォルトのヒーローフロー（8シーン、約20秒）: タイトル → タスクを説明 → Evaがコードを記述 → PRをレビューしてマージ → ボード → プロジェクト → 証明（カウントアップ統計） → アウトロ。最初にシーンと一行キャプションを選んでください。

2. 映像をキャプチャする → references/capture-workflow.md を読んでください。アプリを起動し（pnpm dev）、エージェントユーザーとしてサインインし、ビューポートを 1280×720 に設定し、各画面を video/public/captures/ にスクリーンショットします。

3. 構成/編集する → references/remotion-build.md を読んでください。EvaHero.tsx を編集します: シーンリスト、時間（ビートの倍数）、キャプション、入力シーン用のカーソルパス。既存のコンポーネントを再利用してください。

4. スコアリングする → references/remotion-build.md → Music を読んでください。--cuts をシーン境界に合わせて gen-lofi-variants.mjs を実行し（上記デフォルト5を参照）、コンポジションの <Audio> を生成されたファイルに向け、MUSIC = true を確認してください。

5. レンダリング + QA。 mp4を直接プレビューすることはできません（システムffmpegがなく、動画を見ることもできないため） — したがって、スチルフレーム を使用してQAします。シーンごとに1枚、シーンの中間点で取得します:

   cd video
   node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform   # 第2引数 = コンポジションID
   

   コンポジションIDはデフォルトで EvaHero になります — 明示的に渡さないと、間違った動画をQAすることになります。video/out/ のPNGを読み、フレームのすべての端を確認してください: 右上のプライマリボタンは完全ですか、サイドバーのラベルは完全ですか、キャプションはライブUIテキストと重なっていませんか？ その後、レンダリングして確認:

   npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png
   node scripts/check-audio.mjs out/eva-platform.mp4   # 時間、1280×720、オーディオトラック存在
   

   --image-format=png はUIテキストをくっきり保ちます。スチルフレームで問題がなくなるまで反復し、その後レンダリングします。

クイックリファレンス

必要なもの	コマンド（video/ から実行）
ライブプレビュー / スクラブ	npm run dev（Remotion Studio）
1画面キャプチャ	bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000
コンポジションをレンダリング	npx remotion render <Id> out/<name>.mp4 --codec=h264 --image-format=png
特定フレームをQA	node scripts/stills.mjs "40,110,200" <CompositionId>
音楽を再生成	node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<name>
出力ファイルを確認	node scripts/check-audio.mjs out/<name>.mp4

既存のコンポジション

EvaHero（ヒーローフロー） · SessionsDemo（クラウドセッション） · EvaPlatform（5つのサーフェスを1箇所に: セッション → ドキュメント → テストアリーナ → カンバンタスク → PRレビュー） · QuickTasksDemo（レガシー）。新しいものは video/src/Root.tsx に1280×720 / 30fpsで登録してください。

以前に時間を費やした落とし穴

• サインインURLは /?agent=true（ブール値）、/?agent ではありません — ルートは agent をzodブール値として検証するため、/?agent は「Expected boolean, received string」をスローします。コールバックが「Signing in…」でハングし、「You're already signed in」と表示された場合は、ターゲットページに直接移動してください。
• 開発オーバーレイがスクリーンショットに入り込む。 react-scanは #react-scan-root のシャドウルートにFPSツールバーをレンダリングし、agentationは [data-agentation-root] にレンダリングします。スタイルシートだけではreact-scanを殺せません。そのホストはインラインスタイルを持っているため、ホストに display:none !important をインラインで設定する必要もあります。scripts/shot.sh は両方を行います。手動でキャプチャチェーンを作る代わりにそれを使用してください。
• agent-browser の呼び出しを timeout 付きの1つのBashコマンドにチェーンし、長いものはバックグラウンドで実行します。単純な open → wait → screenshot のチェーンはツールのタイムアウトを引き起こします。snapshot -i の参照は、開発ツールバーが展開されるとすぐに古くなります — オーバーレイを非表示にした後、クリックする前に再スナップショットを取ってください。
• すべての @remotion/* パッケージをまったく同じバージョンに固定してください。そうしないとバンドラがエラーを出します。
• 音楽はClaudeで試聴できません。 ベッドは要求されたことを正確に行います（各カットでスウェル）が、ユーザーには聴いてもらい、必要に応じてライセンスされたトラックと交換するよう伝えてください — 無音にするには MUSIC=false を設定します。
• 古いセッションキャプチャのサンドボックスは停止しています。そのため、すべてのセッション画面には「サンドボックスを起動して…」と表示されます。それをライブとしてキャプションしないでください。captures/sessions/ の中に実行中のサンドボックスを示すものはありません。
• キャプションがメッセージを伝えます — ほとんどのTwitter再生はミュートされているため、すべてのシーンにキャプションが必要です。

詳細なハウツー: references/capture-workflow.md（映像）および references/remotion-build.md（構成、テーマ、音楽、レンダリング、QA）。