Demo zum Promo-Reel: Web-App-Demo im Screen-Studio-Stil

webapp-screencast

Du schreibst das Drehbuch, webapp-screencast zeichnet es auf und schneidet es. Ausgabe: OUT/<name>.mp4 (1920×1080, 60 fps) plus ein Poster .jpg. Alles ist eine Datei, die du schreibst (scenario.py, plan.py) und ein CLI. Rufe das CLI immer mit --json (vor dem Unterbefehl) auf: stdout ist ein JSON-Objekt (ok, error, Pfade, Dauern, Warnungen); Fortschritt geht nach stderr. Exit 0 ok, 1 Schritt fehlgeschlagen, 2 falsche Eingabe.

API- und Plan-Schlüssel: reference.md. Lies es, bevor du scenario.py / plan.py schreibst.

0. Einrichtung (einmal pro Rechner)

webapp-screencast --json doctor

Wenn webapp-screencast fehlt: pip install git+https://github.com/dr-osmanovich/webapp-screencast.git (verwende das venv des Projekts, falls vorhanden), dann python -m playwright install chromium. doctor listet jede fehlgeschlagene Prüfung mit ihrer fix auf. Node 22+ und ffmpeg werden für das Rendern benötigt.

1. Die App verstehen (vor jeder Aufnahme)

• Finde heraus, wie sie lokal läuft (README, package.json-Skripte, Makefile, docker-compose) und ihre URL. Ein einfacher statischer Ordner kann von webapp-screencast selbst bereitgestellt werden (make --serve DIR).
• Finde Demo-/Seed-Daten und Testkonten im Repo (Fixtures, Seed-Skripte, .env.example). Zeichne niemals Produktions-, echte Kunden- oder Patientendaten oder echte Anmeldeinformationen auf. Wenn keine sicheren Demo-Daten existieren, stoppe und frage den Benutzer.
• Finde heraus, wie man den Zustand zurücksetzt (Seed/Reset-Skript, Löschen von localStorage). Jeder Take beginnt sauber.
• Wähle 3–5 Szenen aus, die den Wert zeigen: Aufhänger → Aktion → Ergebnis → ein Detail → Ende. 15–30 s Filmmaterial.
• Lies die tatsächlichen Komponenten, um stabile Selektoren zu erhalten (IDs, data-testid, Rollen). Rate nicht.

2. Gerüst bauen und Skript schreiben

webapp-screencast --json init video/ --base-url http://127.0.0.1:3000 --title "Produktname"

Schreibe video/scenario.py: CONFIG, optional login(page, cfg) und prepare(page, cfg), und run(take, page). Regeln, die Wiederholungen sparen:

• take.mark("name") bei jeder Szene; take.box("name", selector) (oder click(..., name=)) für alles, was die Kamera oder ein Callout einrahmen soll. Markiere immer zuerst hook und zuletzt end.
• Warte auf die App mit page.wait_for_selector(...) nach Aktionen, dann take.hold(0.3–0.8).
• Bewege den Zeiger weg von Text, bevor du take.type(...) verwendest; tippe mit cps 25–35.
• Verstecke in prepare() Toasts, Cookie-Banner, Entwickler-Overlays; schließe Seitenleisten.
• Native title=-Tooltips werden nie im Headless-Modus gerendert – verwende stattdessen einen Plan-callout.

3. Aufnehmen und überprüfen

webapp-screencast --json record video/scenario.py --out video/out/footage [--base-url URL]
webapp-screencast --json inspect video/out/footage

Überprüfe peak_fps ≥ 50 bei belebten Szenen (niedriger bei macOS → GPU-Flags-Problem, siehe Referenz) und dass jede von dir geplante Markierung vorhanden ist. Ein fehlgeschlagener Selektor erzeugt einen Playwright-Fehler auf stderr: korrigiere das Szenario und zeichne erneut auf – Filmmaterial ist günstig (≈ Takedauer + 10 s).

4. Planen, komponieren, ansehen

Schreibe video/plan.py unter Verwendung der Markierungen und Boxen, die inspect ausgegeben hat (niemals Sekunden hartcodieren): Kamerasegmente, die der Aktion folgen (Zoom 1.4–1.7 auf die Szene, zurück auf 1.0 zwischen den Szenen), ein kurzer Untertitel pro Szene (≥ 0,3 s pro Wort, keine Überlappungen), Intro/Outro-Karten.

webapp-screencast --json compose video/plan.py --footage video/out/footage --out video/out/composition
webapp-screencast --json snapshot video/out/composition --at 1,5,9,14 --out video/out/stills

Behebe jeden warnings-Eintrag. Sieh dir die Standbilder an (lies die PNGs / das Kontaktblatt): Text lesbar, Kamera auf der Aktion, nichts abgeschnitten, kein Untertitel, der das Beschriebene verdeckt. Iteriere über plan.py nur mit compose + snapshot – kein erneutes Aufnehmen nötig.

5. Rendern und ausliefern

Das Rendern dauert ~4–5 min pro 20 s auf einem M1 – führe es im Hintergrund mit einer Logdatei aus.

webapp-screencast --json render video/out/composition --out video/out/video.mp4
webapp-screencast --json poster video/out/video.mp4 --at 9.0

Bestätige, dass das JSON fps: 60 und die erwartete Dauer anzeigt. Gib die mp4- + Poster-Pfade weiter. Füge das out/-Verzeichnis zur .gitignore hinzu; committe scenario.py + plan.py, damit das Video nach UI-Änderungen neu erstellt werden kann.

Ein-Schritt-Befehl, wenn Szenario und Plan bereits gut sind: webapp-screencast --json make video/scenario.py video/plan.py --out video/out --base-url URL --poster-at 9 (--serve DIR für statische Seiten, --skip-render zum Stoppen nach der Prüfung).

Mit /brag (oder einer anderen Launch-Video-Fertigkeit)

Brag entscheidet über die Geschichte; webapp-screencast liefert das echte Filmmaterial.

1. Führe Braggs eigene Planung durch: Konzept, Ton, Szenen, Titel, Text. Stoppe, bevor es Screenshot-Szenen erstellt.
2. Verwandle Braggs Szenen in scenario.py-Markierungen (eine Markierung pro Szene) und nimm auf.
3. Füge Braggs Text in plan.py ein: Aufhänger → intro.title, Szenenuntertitel → subtitles, Schlusszeile / CTA → outro; ordne Braggs Ton dem look zu (polished → graphite/ocean, playful → sunset/violet, Akzent = die Markenfarbe der App aus ihrem CSS).
4. Komponiere, erstelle Schnappschüsse, rendere wie oben in Braggs Ausgabeordner; dann lass Brag den Teil-Text schreiben. Nur Querformat 16:9 für jetzt; wenn Brag Hochformat verlangt hat, sag es und rendere Querformat.