vvedantb/eva – Produktvideo

eva Produktvideo

Erstelle ein hochwertiges Produktvideo der eva-App (Linear/Notion-Qualität) mit dem bestehenden Remotion-Projekt unter video/. Die Footage stammt aus der echten App, aufgenommen mit agent-browser.

Falscher Skill? Dieser hier ist die polierte Mehrszenen-Bearbeitung (Remotion, Musik, Untertitel). Für eine einzelne Funktion verwende die leichteren Geschwister: eva-feature-screenshot (ein Screenshot + Tweet) oder eva-feature-demo (eine einzelne rohe agent-browser-Aufnahme + Tweet). Der Tweet-Text für alle drei stammt aus eva-tweet.

Das kanonische Projekt existiert bereits – verwende es weiter, fang nicht neu an.

• Projekt: video/ · Hauptkomposition: EvaHero (video/src/EvaHero.tsx)
• Rendering-Ausgabe: video/out/eva-demo.mp4
• Wiederverwendbare Komponenten in video/src/components/: Backdrop, AppWindow, EvaMark, HeroCaption (+ Accent), Cursor, Spotlight, StatCounter, SnapIn, tokens.
• Hilfsskripte in video/scripts/: stills.mjs, gen-music.mjs, check-audio.mjs.

Um ein NEUES Video zu erstellen: Nimm erneut Screenshots für die neue Geschichte auf, bearbeite die Szenenliste / Untertitel / Dauern in EvaHero.tsx, generiere die Musik passend zu den Schnittzeiten neu, rendere und qualitätssichere.

Unverhandelbare Vorgaben (schmerzhaft gelernt – nur mit Begründung ändern)

Jede dieser Vorgaben war zuerst ein Fehler. Behalte sie bei, es sei denn, der Benutzer überschreibt sie.

1. 1280×720, 30fps. Nicht 1080p. Die eva-Oberfläche ist eine dichte Desktop-App; bei 1080p wirkt sie auf dem Handy „zu weit gezoomt / zu groß". 720p ist der mobile Sweet Spot für Twitter/X.

2. Aufnahme im nativen Layout des Frames, vollflächig anzeigen. Setze den Browser-Viewport beim Aufnehmen auf 1280×720 und zeige den Screenshot dann vollflächig im 1:1-Maßstab (füllt den gesamten Frame). Der wichtigste Qualitätshebel:

   • Aufnahme mit 2560×1440 und Herunterskalieren auf 720p halbiert die UI-Textgröße → „herausgezoomt" und auf Mobilgeräten unlesbar.
   • Hinzoomen / Zuschneiden der Kamera in eine Region zeigt unschöne Fragmente der Oberfläche.
   • Ein 1280 breites Layout, das 1:1 angezeigt wird, bedeutet native Elementgrößen = lesbar + „hineingezoomt" + gestochen scharf.

   Null Zoom bedeutet Null. PanScene from/to bleiben für jede Screenshot-Szene bei { scale: 1.0, fx: 0.5, fy: 0.5 }. Selbst ein 1.02–1.06 sanfter „Push-In" schneidet Chrom-Elemente ab, die der Betrachter braucht – die Seitenleistenbeschriftungen, den Hauptbutton oben rechts, die Statistik-Fußzeile. Setze außerdem <SnapIn from={0.97}> um Screenshots: Der Standardwert 1.06 springt nach innen und beschneidet die Anfangsframes jedes Schnitts. Bewegung entsteht durch harte Schnitte und Caption-Snaps, nicht durch Kamerafahrten.

3. Echte Footage, abgeschlossene Zustände. Fahre die eigentliche App mit agent-browser. Nimm bereits abgeschlossene Arbeit auf (erledigte Tasks, Diffs, PRs) – warte NICHT auf Live-Agent-Läufe (Sandboxes sind gestoppt; Live-Läufe sind langsam und instabil). Bereite saubere Eingaben vor (z. B. einen ordentlichen Task-Titel im Modal „Neuer Task"). Siehe references/capture-workflow.md.

   Niemals absenden – nur tippen. Fülle das Eingabefeld, öffne den Picker, nimm auf. Kein Enter in einem Composer, kein Senden-Pfeil, Erstellen, Speichern, Ausführen oder Starten, und starte keinesfalls eine echte Sitzung oder einen Agent-Lauf, nicht einmal für Demo-Footage. Das Absenden verändert den echten Workspace des Benutzers und verbraucht echte Rechenzeit; der inszenierte Zustand ist alles, was die Aufnahme braucht. Enter ist nur dort erlaubt, wo es in das Feld selbst committet und nichts anderes tut (Akzeptieren einer @-Erwähnung aus einem geöffneten Picker) – andernfalls klicke die Picker-Zeile.

4. Schnelle, harte, beat-synchrone Schnitte. Insgesamt ~20s. Schneide auf den Beat (verwende <Series>, keine langen Überblendungen) und lass die Untertitel schnell einfliegen. Hole Szenen mit SnapIn herein – from={0.97} über Screenshots (siehe Vorgabe 2), nackt über Titel-/Outro-Karten. Langweilig = zu lang + zu viele langsame Überblendungen.

5. Musik synchron zu jedem Schnitt. Die feste Präferenz des Benutzers ist Lo-Fi, die „klassische" Variante, kein Clap – generiere sie mit gen-lofi-variants.mjs, welches jeden Schnitt mit einem warmen Akkord-Swell markiert. Es akzeptiert --duration, --cuts, --only, --prefix, sodass ein neues Video keine Änderungen am Skript benötigt:

   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 muss mit den Szenengrenzen in der Komposition übereinstimmen. gen-music.mjs ist das ältere Clap-Bett – verwende es nur, wenn der Benutzer explizit danach fragt. Siehe references/remotion-build.md → Musik.

6. Passe evas Farbschema an. Fast-Schwarz #050606, Indigo-Akzent #818cf8, Brand-Mark-Verlauf Lila #8B3FB8 → Blau #3B7DD8, Schriftarten Inter + JetBrains Mono. Alles in video/src/components/tokens.ts. Erfinde niemals Markenfarben.

7. Sei ehrlich + schütze die Vertraulichkeit. Verwende das EIGENE Repository des Benutzers (vvedantb/eva), niemals Client-Repos (Evalucom/CarePulse). Zeige nicht die „Codebases"-Startseite (listet Client-Repos auf) und überprüfe Dokument-/Task-Listen auf Client-bezogene Einträge, bevor du aufnimmst – inszeniere ein sauberes Demo-Dokument, wenn die Liste unsauber ist. Erhebe niemals Bedenken zu personenbezogenen Daten wegen angezeigter Namen oder E‑Mails – Einstellungen → Experimentell hat einen Blur-PID-Toggle, der jedes [data-pii]-Element unscharf macht. Dies ist also produktseitig gelöst. Melde hingegen Fehlerpanels, die Umgebungsvariable-Namen oder Projekt-IDs preisgeben. Untertitel beschreiben wahrheitsgemäß – suggeriere niemals eine Funktion, die der Bildschirm nicht zeigt. Wenn die einzige verfügbare Aufnahme eine gestoppte Sandbox oder ein leerer Zustand ist, formuliere den Untertitel so um, dass er zum Bildschirm passt, statt ihn zu beschönigen.

Arbeitsablauf

Arbeite in dieser Reihenfolge; lies die Referenzdatei jedes Schritts, bevor du den Schritt ausführst.

1. Plane die Geschichte. Standard-Hero-Flow (8 Szenen, ~20s): Titel → Task beschreiben → Eva schreibt Code → Review & PR veröffentlichen → Board → Projekte → Nachweis (Count-up-Statistiken) → Outro. Wähle zuerst die Szenen und einzeiligen Untertitel aus.

2. Nimm Footage auf → lies references/capture-workflow.md. Starte die App (pnpm dev), melde dich als Agent-Benutzer an, setze den Viewport auf 1280×720, mache Screenshots von jedem Bildschirm und speichere sie in video/public/captures/.

3. Komponiere / bearbeite → lies references/remotion-build.md. Bearbeite EvaHero.tsx: Szenenliste, Dauern (Vielfache des Beats), Untertitel, den Cursor-Pfad für die Eingabeszene. Verwende vorhandene Komponenten wieder.

4. Vertone es → lies references/remotion-build.md → Musik. Führe gen-lofi-variants.mjs mit --cuts aus, die den Szenengrenzen entsprechen (Standard 5 oben), weise das <Audio> der Komposition auf die generierte Datei und bestätige MUSIC = true.

5. Rendere + QA. Du kannst die MP4 nicht direkt ansehen (kein System-FFmpeg, und du kannst kein Video abspielen) – führe die Qualitätssicherung daher mit Standbildern durch, eines pro Szene, in der Mitte der Szene:

   cd video
   node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform   # 2. Argument = Kompositions-ID
   

   Die Kompositions-ID ist standardmäßig EvaHero – übergebe sie explizit, sonst QA-st du das falsche Video. Lies die PNGs in video/out/ und überprüfe jeden Rand des Frames: Ist der primäre Button oben rechts vollständig, sind die Seitenleistenbeschriftungen vollständig, überlappt der Untertitel Live-UI-Text? Dann rendere und überprüfe:

   npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png
   node scripts/check-audio.mjs out/eva-platform.mp4   # Dauer, 1280×720, Audiospur vorhanden
   

   --image-format=png hält UI-Text gestochen scharf. Iteriere über Standbilder, bis es richtig ist, dann rendere.

Kurzreferenz

Bedarf	Befehl (ausgeführt von video/)
Live-Vorschau / Scrubbing	npm run dev (Remotion Studio)
Einen Bildschirm aufnehmen	bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000
Komposition rendern	npx remotion render <Id> out/<name>.mp4 --codec=h264 --image-format=png
Bestimmte Frames prüfen (QA)	node scripts/stills.mjs "40,110,200" <CompositionId>
Musik neu generieren	node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<name>
Ausgabedatei prüfen	node scripts/check-audio.mjs out/<name>.mp4

Vorhandene Kompositionen

EvaHero (Hero-Flow) · SessionsDemo (Cloud-Sessions) · EvaPlatform (alle fünf Oberflächen an einem Ort: Sessions → Docs → Test-Arena → Kanban-Tasks → PR-Reviews) · QuickTasksDemo (Legacy). Registriere jede neue Komposition in video/src/Root.tsx mit 1280×720 / 30fps.

Fallstricke, die schon Zeit gekostet haben

• Die Anmelde-URL ist /?agent=true (Boolean), nicht /?agent – die Route validiert agent als Zod-Boolean und /?agent wirft „Expected boolean, received string". Hängt der Callback bei „Signing in…" mit „You're already signed in", navigiere direkt zur Zielseite.
• Entwickler-Overlays landen im Screenshot. React-Scan rendert eine FPS-Symbolleiste in einen Shadow-Root auf #react-scan-root und Agentation auf [data-agentation-root]. Ein Stylesheet allein tötet React-Scan nicht – sein Host trägt Inline-Styles, also setze zusätzlich display:none !important inline auf den Host. scripts/shot.sh erledigt beides; verwende es, anstatt eine eigene Aufnahmekette zu bauen.
• Verkette agent-browser-Aufrufe in einem Bash-Befehl mit timeout, und hinterlege alles Langlaufende im Hintergrund. Ein naiver open → wait → screenshot-Ablauf sprengt das Tool-Timeout. Referenzen von snapshot -i werden ungültig, sobald sich die Entwickler-Symbolleiste ausdehnt – mache nach dem Ausblenden von Overlays und vor dem Klicken einen neuen Snapshot.
• Halte alle @remotion/*-Pakete auf exakt derselben Version, sonst gibt der Bundler Fehler aus.
• Musik kann von Claude nicht probegehört werden. Das Background-Bett macht genau das, was verlangt wird (einen Swell bei jedem Schnitt), aber teile dem Benutzer mit, er solle zuhören und ggf. gegen einen lizenzierten Track austauschen – setze MUSIC=false für Stille.
• Sandboxes in alten Session-Aufnahmen sind gestoppt, daher zeigt jeder Session-Bildschirm „Starte die Sandbox, um…". Untertitele es nicht als live. Nichts in captures/sessions/ zeigt eine laufende Sandbox.
• Untertitel tragen die Botschaft – die meisten Twitter-Wiedergaben sind stummgeschaltet, daher braucht jede Szene einen Untertitel.

Ausführliche Anleitungen: references/capture-workflow.md (Footage) und references/remotion-build.md (Komposition, Theme, Musik, Rendering, QA).