walter-io/vibecoding-remotion

Remotion Geschichtsvideo – Erzählung als Video

Verwandle eine Geschichte in ein 1080p-Video: Geschichte lesen → Themenästhetik extrahieren → eine eigene visuelle Sprache für dieses Thema entwerfen → in „Abschnitte (Kapitel) → Einstellungen (szenische Takte)“ zerlegen → jede Einstellung mit zur Handlung passender Szenenanimation designen → Text-Beat-Erzählung → Rendern → Stichprobenprüfung.

Erstes Prinzip: Stil dient dem Thema, keine festen Vorlagen

Die Pipeline und Methodik sind allgemein, die visuelle Sprache muss für jedes Thema neu entworfen werden.

• Jede neue Geschichte beginnt mit einer „Themen-Charakteranalyse“: Was sind die Schlüsselwörter dieser Geschichte (nostalgisch? actiongeladen? mysteriös? märchenhaft? technisch?) → Ableitung von Farbpalette, Schriftcharakter, Bewegungstempo, Szenenästhetik
• Beispiele (nur als Denkanstöße, nicht als Vorgabe): Warme Erinnerungen → Serifen-Schrift, Creme/Gold, langsame sanfte Bewegungen; Action/Competition → serifenlose Fettschrift, gesättigtes Rot/Schwarz, schnelle harte Schnitte; Science-Fiction → kalte Farben, Monospace, Glitch/Scanline-Effekte; Märchen → runde Schrift, Pastellfarben, elastische Animationen
• Der Stil des vorherigen Projekts darf nicht ins nächste übernommen werden; wenn der Benutzer nichts vorgibt, mindestens 1–2 Stilkonzepte zur Auswahl anbieten

Kernphilosophie

• Bilder erzählen die Geschichte: Das Bild jeder Einstellung muss mit Emotion und Handlung des dazugehörigen Satzes übereinstimmen (Erdbebensatz → wackelndes Klassenzimmer, Jubelsatz → winkende Menge, Schlangensatz → Absperrungen mit langer Schlange) – Fehlpaarung (Trauer mit Fröhlichkeit) ist das größte Tabu
• Szenen verwenden programmatische Animationen (Personensilhouetten/geometrische Formen + Sinus-versetzte Bewegung, framegetrieben), keine statischen Grafiken; Animatedichte richtet sich nach dem Thema (sanfte Themen: weniger, langsamer; actionreiche: mehr, schneller)
• Typografie ist Teil der Performance: Schriftcharakter, Schriftgrößenhierarchie, Hervorhebungsfarbe für Schlüsselwörter – alles aus dem Thema abgeleitet

Pipeline (fünf Schritte, feste Reihenfolge)

1. Stilableitung: Themenschlüsselwörter → Farbpalette / Schriftcharakter / Bewegungstempo / Szenenästhetik → (bei fehlender Vorgabe dem Benutzer zur Auswahl vorlegen)
2. Geschichtszerlegung: Nach Handlungsbögen in Abschnitte (Kapitel) → Einstellungen (1–2 Zeilen pro Einstellung) zerlegen; am Ende jedes Abschnitts einen kurzen prägnanten Satz als Zusammenfassungskarte extrahieren; Zeilenenden von Satzzeichen bereinigen (clean_tail() universelle Bereinigung)
3. Zeitachse: gen_assets.py → timeline.json (Einstellungsstart/-ende, Layout, Takte; MIN_SHOT 3,5s als Basis für langsame Schnitte, nach Thema anpassbar)
4. Prüfungsaudit + Synchronisation: check_views.py (Mapping-Abdeckung/Überschreitung) + verify_timeline.py (Zeilenende-Satzzeichen = 0 / kürzeste Einstellung ≥ 3,0s / Dauer der Zusammenfassungskarte / Alterslabel, Schwellenwerte nach Thema anpassbar) – jeder Fehler verhindert das Rendern → sync-timeline.mjs
5. Rendern + Stichprobe: npx remotion render → ffmpeg Schlüsselbilder extrahieren und überprüfen (Szenenstimmung, Texthierarchie, Animationszeit)

Harte Regeln (themenunabhängig, immer gültig)

• Zeilenenden haben keinerlei Satzzeichen (inklusive Gedankenstriche): universelle Bereinigungsfunktion + Prüfung = 0
• Bild und Dialog passen exakt zur Stimmung; Änderungen der SHOT_VIEW-Zuordnungstabelle erfordern erneutes Audit
• In verschachtelten Sequence-Komponenten ist der Animationsursprung der erste Frame der Einstellung (startFrame übergeben), sonst wird die Eingangsanimation stumm übersprungen
• Politische Symbole korrekt zeichnen (Nationalflagge = roter Hintergrund + ein großer und vier kleine goldene Sterne), keine annähernden Kritzeleien erlaubt
• Für echte Sprachaufnahme: WAV-Datei einlegen, gen_assets.py erneut ausführen – die Zeitachse wird automatisch neu angeordnet

Vorhandene Bestandteile (Referenzimplementierung, wiederverwendbar und anpassbar)

templates/ stammt aus dem abgeschlossenen Projekt „Chronik der 90er“ (warmes Erinnerungsthema: Serifen-Schrift, Creme/Gold, langsames Tempo, Menschenmengen-Silhouetten) – es ist ein Beispiel für die Themenableitung, kein Standardstil:

• Direkt wiederverwendbares Skelett: gen_assets.py (Text → Zeitachsenstruktur) / check_views.py (Mapping-Audit) / verify_timeline.py (umfassende Prüfung) / sync-timeline.mjs / fit.ts (Zeilenumbruch) / beat.ts (Taktpunkt)
• Nach Thema neu zu schreibende visuelle Schicht: theme.ts (Farben/Schriftgrößen) / serif.ts (Schriftart) / scenes.tsx (Szenenanimationen) / TitleCard.tsx / Era.tsx / Intro.tsx (Layout)
• 8 Gruppenanimationstechniken übertragbar: winkende Menge, Menschentraube vor Fernseher, Erdbebenklassenzimmer, Schlange, maskierte Fußgänger, Kind jagen und füttern, Feuerwerk, Laternen (mit geänderten Farben und Stil ergeben sich neue Szenen)

Detaillierte Parameter

references/spec.md: Vollständige Parameter der obigen Referenzimplementierung (fünf Schriftgrößenstufen, vier Eingangsrichtungen, Tiefenschärfe, langsame Einblenddauer, Farbskala der Silhouetten). Das neue Thema kann anhand dieser Werte die Skalierung anpassen, muss die Zahlen nicht exakt übernehmen.