continuum-walkthrough

Continuum Walkthrough

Der Benchmark ist examples/po-desk/walkthrough.html (PO Desk Walkthrough v4.1, 10/10). Jason: „Ich liebe die Animationen, die Soundeffekte usw. und die durchgehende Mechanik.“ Jedes neue Stück muss es übertreffen. Öffne den Benchmark und kopiere die Bewegungsabläufe, bevor du etwas Neues schreibst.

Die Pipeline (≈ 3–4 h Agentenzeit; Rendern ≈ 1 h abgekoppelt)

#	Schritt	Werkzeug	Tor
1	Intake Q&A: Jede Frage in references/intake-qa.md mit dem Fragewerkzeug stellen (4 pro Aufruf, empfohlene Option zuerst)	AskUserQuestion	Kein Bauen, bevor die Antworten da sind
2	Beat-Sheet + Skript: references/beat-sheet.md für dieses Angebot ausfüllen; eine VO-Zeile pro Beat, gesprächig	script.json schreiben	Der Nutzer genehmigt das Beat-Sheet
3	Sprache: 2 Takes pro Zeile	scripts/vo_gen.mjs	Free-Plan-Guthaben reicht (siehe Sprache)
4	Verifizieren + Wortzeiten	scripts/vo_verify.sh (whisper.cpp)	Jeder gewählte Take stimmt Wort für Wort mit seiner Zeile überein
5	Bild: engine/starter.html kopieren, dann Szene für Szene aufbauen; jeden T.*-Key an den Einsatz des Wortes setzen, das ihn benennt	engine/engine.js	Standbilder pro Beat sehen in beiden Formaten richtig aus
6	Sound: Ein Cue-Sheet mit einem Sound pro sichtbarem Ereignis schreiben (siehe references/sound-map.md)	scripts/mix.py cues.json	−14 LUFS, −1 dBFS, Sprachzeilen überlappen nicht
7	Tore	scripts/ghost_audit.mjs für v und h	BESTANDEN. EIN FEHLER blockiert den Render
8	Rendern, abgekoppelt	nohup zsh scripts/render.sh … & disown	Bildanzahl = LEN × 60 für beide Formate
9	Liefern	4 MP4s: 9×16 und 16×9, jeweils mit Voice+Music und Voice+SFX	Kontaktbogen (ein Standbild alle 2 s) visuell geprüft
10	Bewertung: /10 erfragen, protokollieren und jede Anmerkung in einen Ledger-Eintrag und ein Tor umwandeln	references/lessons.md	—

Setup: node 20+, ffmpeg, python3 mit numpy, npm i playwright-core (oder PW_DIR), Chrome (CHROME=… optional), whisper-cli + ggml-small.en-q5_1.bin.

Die Story-Form (nicht umsortieren)

1. Hook (0–5 s): Ein persönlicher, lockerer Einstieg über eine realistisch aussehende iMessage vom Absender, mit echtem Porträt und Namen: „Hey, das ist zufällig … aber ich habe etwas in Ihrem Unternehmen gesehen, das interessant sein könnte.“ Noch kein Logo und kein Pitch.
2. Das Objekt kommt an (5–10 s): Ein Stapel realistischer Benachrichtigungen. Eine davon (das echte Dokument) wird zu einer vollständigen, glaubwürdigen Seite: Briefkopf, Bestellnummer, Tabelle, Summen, Unterschrift.
3. Schmerz, gezeigt (10–18 s): Eine benannte Person („Maria“) tippt es in jedes Zielsystem: ERP (echtes Logo), CRM (echtes Logo), Ordner, E-Mail. Ihre Uhr läuft und die Tasten klicken. Jeder Zielname wird im Voiceover GESPROCHEN.
4. Schmerz, bepreist (18–26 s): Satz × Stunden × Arbeitstage, mit einem Zähler, der auf die jährlichen Kosten in Rot hochläuft. Die Rechnung bleibt in kleiner Schrift auf dem Bildschirm. Sag das Geld.
5. Wende (26 s): „So sieht es aus, wenn das für Sie erledigt ist.“ Das gleiche Objekt kommt zurück in die Mitte. Kontinuität ist der Trick.
6. Die Lösung (28–42 s): Ein Scanner liest es, Felder fliegen in eine Karte, Häkchen setzen, eine Ausnahme wird markiert und erklärt („10× ihr Übliches“), dann ein Tippen zum Korrigieren und ein Tippen zum Bestätigen.
7. Beweis (42–51 s): Es wird in allen 4 Zielen mit echten Logos und Häkchen abgelegt, dann eine Quittung mit Zeitstempeln („1 min 44 s, von E-Mail bis abgelegt“).
8. CTA (51–53 s): Sanft und drucklos: „Einen Blick wert? Einfach antworten.“
9. Logo allein (53,8–58 s): Das Wortmarke allein auf einer leeren Bühne, ausgeblendet. Sonst nichts auf dem Bildschirm.

Kontinuitätsregeln (das ist der Look)

• Ein durchgängiges Objekt (das Dokument) bewegt sich mit track()-Federn zwischen den Layouts. Es wird nie weggeschnitten und neu erstellt.
• Jede Szene entsteht aus der vorherigen: Eine Benachrichtigung wird zur Seite, die Seite schrumpft zur Seite, die Fenster stapeln sich, und die Seite kommt zurück.
• Ausgänge gehen auf Opazität 0 und visibility:hidden. Parke niemals ein fertiges Element bei 20–50 % „als Hintergrund“. Dieses Gespenst hat v4 die Silhouette gekostet („da ist die ganze Zeit nach 0:18 eine Silhouette zu sehen“). ghost_audit.mjs lässt jetzt jedes Element durchfallen, das länger als 3 s halbsichtig gehalten wird.
• Nur Federn: step() mit z 0,88–1,0 und ohne Überschwinger. Verwende Weichzeichner-Ein/Aus beim Ein-/Austritt, 60 fps mit einem 8-Unterbild, 180°-Verschluss.
• Auf dem Bildschirm: eine Idee auf einmal, große Schrift, randlose iOS-Karten, warmes Off-White #F4F2EE, Tinte #0E0E0E, eine Akzentfarbe pro Bedeutung (Rot = Kosten/Problem, Grün = erledigt).
• Layouts sind getrennt für v (1080×1920) und h (1920×1080). Gestalte zuerst 9:16; das Telefon ist der Hauptbildschirm.

Realismus-Checkliste

• iMessage: echte Sperrbildschirm-Grammatik (Zeit, Datum, gestapelte Benachrichtigungen, „jetzt“/„vor 2 Min.“), Absender-Porträt + Name, Triton-Sound.
• Dokument: Briefgröße, echte Feldnamen, plausible Zahlen, die aufgehen, eine Unterschrift, Seitenfuß.
• Logos: echte SVGs (simple-icons, exakte Marken-Hex). Zeige nur Werkzeuge, die der Interessent tatsächlich verwendet oder in die du wirklich integrierst. Ein Logo impliziert eine Integration.
• Daten sind erfunden und mit „Beispieldaten · erfundenes Unternehmen“ gekennzeichnet. Geldrechnungen zeigen ihre Formel.

Sprache: Erst fragen, dann bauen

Frag immer, welche Stimme sie wollen (Intake-Frage 7), mit den folgenden Optionen. Empfehle ElevenLabs und sag ihnen, dass es kostenlos ist: 10.000 kostenlose Credits pro Monat.

Option	Kosten	Klingt	Wie
ElevenLabs (empfohlen)	Kostenlos: 10.000 Credits pro Monat ≈ 5 Videos	Am menschlichsten	scripts/vo_gen.mjs mit ihrem API-Key (elevenlabs.io → Profil → API-Keys)
Eigene Stimme, aufgenommen	Kostenlos	Am persönlichsten	Sie nehmen jede Zeile auf dem Handy auf; speichere es als vo/raw/<id>-t1.wav und führe vo_verify.sh wie gewohnt aus
Eigene Stimme, geklont	ElevenLabs Bezahlplan	Wie sie, ohne Aufnahme	Instant Voice Clone in ElevenLabs, dann diese Voice-ID in script.json eintragen
Eingebaute Computerstimme	Kostenlos, kein Konto	Robotisch	say -v Samantha -o a01.aiff „…“; nur für Timing-Entwürfe verwenden

ElevenLabs Details:

• Schlüssel: ELEVENLABS_API_KEY oder ELEVENLABS_KEY_FILE. Niemals ausdrucken, in den Chat einfügen oder committen. In T3 request_secret mit Dateiübermittlung verwenden und die Datei nach Abschluss löschen.
• Standard: Stimme Brian nPczCjzI2devNBz1zQrb, Modell eleven_v4, Stabilität 0,45. Audio-Tags wie [casual], [measured], [serious] und [confident] steuern die Lesart.
• Kostenloser Plan: 10.000 Credits pro Monat (≈ 10.000 Zeichen). Ein 60-Sekunden-Skript hat ≈ 900 Zeichen, also 2 Takes von allem ≈ 1.800, etwa 5 Videos pro Monat.
• Der kostenlose Plan hat keine kommerzielle Lizenz (ElevenLabs AGB). Verwende ihn für Entwürfe und interne Überprüfungen. Bevor etwas veröffentlicht oder als Marketing versendet wird, generiere die finalen Takes mit einem bezahlten Plan (Starter ist der günstigste).
• Platziere Zeilen mit einem ≥0,3 s Atemzug dazwischen. Bildereignisse rasten an den Wortanfängen von Whisper ein, niemals an geschätzten Zeiten.

Sound

Jedes sichtbare Ereignis bekommt einen Sound, der auf einem Telefonlautsprecher hörbar ist: Triton auf der iMessage, Klingeln bei Benachrichtigungen, Tastenanschläge beim Tippen, ein Pop bei jedem Fenster, ein Cash-Hit bei der Jahreszahl, ein tiefer Bass bei „nur Abtippen“, eine Scan-Unterlage, Häkchen bei den Prüfungen, ein Tastenton bei jedem Tipp, ein Erfolgssound bei der letzten Ablage und ein Glanz auf dem Logo. Die vollständige Karte mit Verstärkungen ist in references/sound-map.md. Musik ist ein optionales Bett bei −23 LUFS, unter die Stimme geduckt. Liefere immer auch eine Version mit Voice+SFX, weil trendige Audio in der App hinzugefügt wird.

Rendering-Fallen

• Render-Vorgänge sterben, wenn die Host-App neu startet. Führe sie immer mit nohup … < /dev/null & disown aus und überprüfe danach die Bildanzahl. Am 09.11.2026 starb selbst das bei einem Host-Neustart; bevorzuge screen -dmS <name> zsh -c „…“.
• Disk: Die Einzelbilder werden direkt in ffmpeg gestreamt und nie auf die Festplatte geschrieben. render.sh löscht das stille Zwischenprodukt nach dem Muxen.
• Für ein SVG oder Bild, dessen offsetWidth falsch ist (z. B. ein Wortmarke), setze el._w / el._h selbst, sonst wird es außermittig gerendert.
• Alles, das unter Bewegungsunschärfe scharf bleiben muss (schnelle „Fly“-Chips), verwendet tf (die Rahmenzeit) anstelle von t.