Cartoon 3D story short (three.js + Remotion)

Cartoon 3D-Geschichten Kurzfilm (three.js + Remotion)

Bewährtes Beispiel: Die Brücke, die für ein Lied fiel. Es ist ein origineller 67-Sekunden-Kurzfilm über die Broughton-Brücke von 1831 und 74 Soldaten, die im Gleichschritt marschieren.

• Code: src/videos/bridge/ deines Remotion-Projekts (Komposition BridgeShort, 1080x1920, 30 fps).
• Skript, Stimme und Sound: ~/bridge-short/.
• Stil-Referenz: references/.

Die Stil-Referenz ist ein privat studierter Kanal (references/: STYLE_BIBLE.md, reports/*.md, frames/).

• Diese Videos sind privates Studienmaterial. Lade sie niemals hoch, veröffentliche oder sende sie.
• Kopiere niemals ihre Skripte, Charaktere oder Einstellungen. Geschichte, Charaktere und Stimme sind IMMER EIGENE.
• Nenne niemals den Namen des Kanals in einem Voice-Over oder einer Beschreibung.

Benutzerregeln, die gelten:

• Untertitel: STANDARDMÄßIG aktiviert für Kurzfilme. Ein Wort nach dem anderen, zentriert, fett, mit dunklem Rand, innerhalb des sicheren Bereichs, zeitlich abgestimmt auf words.json (siehe 'Untertitel'). Nur deaktivieren, wenn der Benutzer dies sagt. Keine anderen Bildschirmlabel.
• Nur Englisch.
• Stimme: ein gleichmäßiger Tonfall (totenisch: der Erzähler reagiert nie, die Charaktere tun es).
• Witze sind recherchierte Fakten.
• Standard-Mix: Musik +3 dB, SFX -6 dB, Stimme unverändert.
• Finaler Export 2K vertikal: 1440x2560, --scale 1.3333.
• Opus Max überprüft jeden Schritt.
• Nach jedem Schritt speichern.
• „Mach es einfach“, sobald das Skript genehmigt ist.

Pipeline

1. Thema und Fakten. Wähle eine überraschende wahre Geschichte mit einer physischen Ursache und Wirkung (sie sollte visuell sein) sowie eine einfache Alltagsanalogie, die sie erklärt.
   • Schreibe die Fakten mit ihrer Quelle am Anfang von SCRIPT.md.
2. Skript (~3,7 Wörter/s, 35-70 s). Verwende für Fakten-Kurzfilme das „Viral-Story-Format“ und „Mach es lustig“ unten; die Brücken-Beats-Formel ist die Alternative für Katastrophengeschichten:
   • Hook: Die absurde Tatsache in einem Satz („Vierundsiebzig Soldaten warfen eine eiserne Brücke um, indem sie einfach darüber marschierten.“).
   • Setting: Jahr, Ort, Stolz.
   • Action: Eskalation über drei oder vier Beats, jeder ein bisschen größer.
   • Snap: Der Moment, in dem es bricht.
   • Totenische Doppelzeile: „Zum Glück ... / Leider ...“.
   • Erklärung: Eine physikalische Idee durch eine Alltagsanalogie (das Kind auf einer Schaukel).
   • Konsequenz: Die Regel, die dadurch entstand.
   • Callback-Twist: Das Ende.
   • Beschreibe niemals auf dem Bildschirm, was der Zuschauer bereits sieht.
3. Stimme. Nimm auf oder generiere voice.wav, erstelle dann seine Wort-Zeitsteuerung words.json (jede Sprach-zu-Text mit Wortzeiten).
   • Lege sie im Projektordner ab, z.B. ~/bridge-short/voice/.
   • Korrigiere die Wort-Zeitsteuerung von Hand. Alles ist auf words.json abgestimmt, und die Untertitel werden ebenfalls daraus bezogen.
4. Einstellungsplan in story.ts: Kopiere templates/bridge/ (den finalen Bridge-Quellcode, identisch mit src/videos/bridge/ deines Remotion-Projekts) nach src/videos/<name>/, registriere eine neue Komposition neben BridgeShort in src/Root.tsx und benenne sie um.
   • SHOTS: id, a/b-Frames, Licht Tag/Golden, Crowd-Modus, tau Geschichtenzeit.
   • XFADE: Überblendungen bei Orts-/Zeitwechseln.
   • FLASH_AT: Ein weißer Blitz nach dem Hook.
   • CAMS: Pro-Einstellungs-Keys {f, dur?, cut?, s: f => {pos, look, fov, roll}}.
   • KICKS: Impact-Flip-Shakes.
   • DOF/dofAt: Linsen-Unschärfe pro Beat.
   • FOREGROUND: Nahe Rahmenrequisiten.
   • Jede visuelle Reaktion erfolgt 0-3 Frames vor ihrem Wort.
   • Verkette die Subjekte jedes Satzes zu einem kontinuierlichen Fluss (flow.ts, siehe 'Kontinuierlicher Fluss'), gib jeder Bewegung einen Namen und jedem Stopp eine Rahmengröße (siehe 'Kamera-Vielfalt' und 'Rahmung').
   • Gib jedem Ort sein eigenes Licht-Voreinstellung (siehe 'Beleuchtung für jeden Ort').
5. Welt.
   • lights.ts: LICHTER plus die LOOK Himmel/Fluss/Wolken-Palette pro Licht.
   • shade.ts: Zwei-Ton-Schattierung und untone().
   • build.ts: Stadt, Häuser und Kenney CC0 Kit-Props, neu eingefärbt, mit Sichtlinien-Culling von allem, was eine Kamera blockiert.
   • paint.ts: HD Canvas2D bemalte Texturen mit als dunkle Töne bemalten Nähten.
   • world.ts: Himmel-Shader, Nebel = Horizontfarbe, Fluss, Pose pro Frame, Sonne eingefroren pro Einstellung und kamerarelativ.
6. Charaktere.
   • toon.ts: Die Canvas2D Pen Zeichen-API, 600x1000 Design-Canvas, Fußsohlen bei y = 975, Bohnenköpfe, Stock-Glieder, Pflaumen-variable Umrisslinie, Gesichter-Bibliothek.
   • cast.ts: Kamera-zugewandte Plakate, Menschenmengen, Effektkarten, Blinzeln, Gehzyklen. Alle Plakate gehen auf die NOINK-Ebene.
   • cardshade.ts: Karten beleuchtet durch das Szenenlicht, kein Eigenleuchten.
7. Post (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
   • Komponisten-Reihenfolge: Ink → Lens pre → Lens main → Bloom → NEUTRAL Tone map → Grade (MSAA 4).
   • Jeder Pixel-Parameter skaliert mit Ausgabehöhe / 1920.
8. Sound (~/bridge-short/audio/: timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).
   • Ereignistabelle → synthetisierte SFX plus eine originale Partitur, die unter der Stimme geduckt wird.
   • Ausgabe: mix.wav (48 kHz, exakte Länge), Stems und cues.md.
   • Stelle die Zeitkonstanten des Bildes fest, bevor der Sound erstellt wird. Jede spätere Timing-Änderung erfordert eine Neuausführung des Sounds.
9. Look-Checks. Führe node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5 aus.
   • Setze BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx, um eine Sandbox-Kopie zu rendern.
   • Erstelle Gegenüberstellungen mit Referenzframes mit python scripts/sbs_sheet.py out.jpg --ours ... --ref ....
   • Sende sie an einen Opus-Max-Prüfer: 1-3 Bilder, ein ≤200-Wörter-Urteil.
   • Führe die Rahmungsprüfung (templates/bridge/framing.ts) für jede Einstellung durch und erstelle ein Kontaktblatt mit einem Standbild pro Einstellung (erster, mittlerer, letzter Frame). Siehe 'Qualitätskontrolle'.
10. Finaler Render.
    • npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333
    • Muxe mit -map 0:v:0 -map 1:a:0 (Remotion schreibt eine stille Tonspur).
    • QA: python scripts/short_qa.py final.mp4 out/<name>/qa shots.json prüft jeden Frame auf Schwarz, Weiß, eingefrorene und Pop-Frames sowie Lautstärke und Blätter.
    • Behebe alles, was es findet, führe dann ein tiefgehendes Opus-Audit durch.
11. Liefern. Sende die endgültige MP4-Datei, aktualisiere den Speicher, schreibe Notizen.

Vorflug-Check (zuerst erledigen)

• Überprüfe, dass templates/bridge/, references/ und scripts/ existieren (klone github.com/mromidev/claude-animated-shorts, oder deinen Fork, neben dem Remotion-Projekt, wenn sie fehlen). Wenn sie fehlen, STOP und hole sie. Improvisiere niemals einen generischen three.js-Look ohne die Vorlagen.
• Erstelle zuerst einen 15-Sekunden-Testclip (Hook + 2-3 Einstellungen, mit Untertiteln und Sound). Rendere Standbilder, führe die Qualitätskontrolle durch, korrigiere, erweitere dann auf die ganze Geschichte. Gehe niemals direkt zu einem vollständigen Render.

Virales Story-Format: „Lachen über ein Genie“ (für Fakten-Kurzfilme verwenden)

Sechs Beats, jedes Mal:

1. Seltsame Handlung ohne Kontext, gezeigt in einem Bild (Hook, erste 3 s).
2. Das Lachen: Die anderen Charaktere verspotten den Helden.
3. Sie schauen alle nach rechts: Die Zeit vergeht und der Held scheint falsch oder harmlos.
4. Der Hinweis: Ein Detail, das die Auszahlung vorwegnimmt.
5. Die Auszahlung: Das Ereignis, das den Helden rechtfertigt (der visuelle Höhepunkt).
6. Die Wissenschaft: Zeige den Mechanismus (Innenansicht / Schnitt / Makroansicht) und erkläre ihn in einem einfachen Satz.

• Erzähle es als eine Geschichte mit einem Helden, nicht als eine Liste von Fakten. Wähle eine seltsame Praxis, die in einem Bild sichtbar ist und über die die Leute lachen würden.
• Die letzte Zeile beginnt eine Argumentation oder einen Kommentar (etwas Diskutables), keine nette Zusammenfassung.
• Titel-Muster: „Warum X ...“, „Wie X ...“, „Was X wirklich bedeutete“. Keine Spoiler der Auszahlung im Titel.
• Tempo: Ein neues Subjekt alle 2-3 s, erreicht durch Kamerafahrt (siehe 'Kontinuierlicher Fluss') eher als durch einen Schnitt, mit einem Soundeffekt bei fast jeder Bewegung oder Überblendung (Whoosh, Klirren, Menschenmenge lacht) und Musik unter der Stimme.
• Reiche Orte, einfache Charaktere (runde Köpfe, Stockarme): Plane 12-16 verschiedene Orte und 20+ Requisiten für einen 60-Sekunden-Kurzfilm, und gib jedem Ort seine eigene Lichtstimmung.
• Schreibe die Fakten zuerst mit Quellen. Jahre und Zahlen werden natürlich gesprochen („achtzehn-siebenundvierzig“) und als Ziffern untertitelt.
• Beispiel: templates/SCRIPT_viral_example.md.

Mach es lustig (Comedy-Engine)

Die Menge lacht über den Helden; der Zuschauer sollte auch lachen.

• Totenische Stimme, absurde Bilder. Der Erzähler reagiert nie; die Charaktere tun es. Die Lücke zwischen beiden ist der Witz.
• Ein Gag alle 4-6 s, unter Verwendung von mindestens drei Arten pro Kurzfilm: ein Zeilen-Gag (Untertreibung, „Zum Glück ... / Leider ...“), ein visueller Gag (Reaktionsgesicht, ein winziges Detail im Hintergrund, eine falsch skalierte Requisite) und ein Sound-Gag (ein alberner SFX, der auf die Reaktion trifft).
• Regel von drei: zwei normale Beats, dann bricht der dritte das Muster.
• Laufender Gag: Ein Hintergrundcharakter oder -objekt (eine Taube, ein Mann mit einem Sandwich) taucht 3-4 Mal auf und bekommt eine Auszahlung gegen Ende.
• Reaktionsaufnahmen: Die Kamera verweilt auf dem Gesicht (ein Flow-Stopp oder eine Ziehumstellung, kein Schnitt) 3-6 Frames nach dem Punch-Wort und hält 8-12 Frames. Verwende die Gesichter-Bibliothek; füge mindestens ein „unbeeindrucktes“ und ein „Schock“-Gesicht hinzu. Siehe 'Reaktionen und Dialog-Beats'.
• Selbstbewusster Held, arrogante Menge, übertrieben ernste Amtspersonen: Charaktere nehmen triviale Dinge todernst.
• Übertreibe die Physik nur für einen Beat (die Auszahlung): Quetschen und Dehnen, eine Staubwolke, ein Impact-Kick.
• Callback-Ende: Die letzte Zeile verdreht die erste Zeile (den Hook) unter Verwendung des Geschehenen.
• Witze bleiben innerhalb der Fakten: Der lustige Teil ist das wahre Detail. Greife niemals echte Opfer oder Gruppen an; das Ziel ist Überheblichkeit und Selbstgefälligkeit.

Untertitel (wortweise Bildunterschriften)

• Quelle: words.json (Wort-Zeitsteuerung der Stimme, handkorrigiert). Jede Sprach-zu-Text funktioniert; normalizeWords() in templates/bridge/Captions.tsx akzeptiert {word|text, start|start_time, end|end_time} in Sekunden oder Millisekunden und überspringt ElevenLabs „spacing“-Einträge.
• Wenn der Sprach-zu-Text-Text vom Skript abweicht (Zahlen, Namen, Rechtschreibung), ersetze den Text mit den SKRIPT-Wörtern und behalte die STT-Zeiten. Untertitel zeigen die Skript-Rechtschreibung („1847“), auch wenn die Stimme „eighteen forty-seven“ sagt.
• Komponente: Kopiere templates/bridge/Captions.tsx nach src/videos/<name>/ und rendere <Captions words={WORDS} /> als letztes Kind der Komposition, als DOM-Overlay über der three.js-Canvas, außerhalb des Post-Processing-Komponisten (keine Tinte, Unschärfe, Bloom oder Grade auf Text).
• Stil: Ein Wort nach dem anderen, horizontal zentriert bei etwa 68 % der Bildhöhe (unter Gesichtern, innerhalb des sicheren Bereichs), kräftige Sans, weiße Füllung, 9 px dunkler Rand bei 1080 Breite, Pop-In-Skalierung 0.8 → 1.08 → 1 über 6 Frames, kein Hintergrundfeld, maximale Breite 86 %. Zahlen, Namen und Punch-Wörter verwenden die Akzentfarbe (highlight). Pixelgrößen skalieren mit Ausgabehöhe / 1920.
• Decke niemals ein Gesicht ab: Wenn eine Nahaufnahme das Gesicht an der Untertitelposition hat, übergib yPercent={(frame) => ...}, um es für diese Einstellung zu verschieben.
• Der Untertitel erscheint 1 Frame vor dem Wort, das gehört wird (lead).
• QA: Rendere ein Standbild auf einem Punch-Wort in jeder Einstellung und bestätige, dass der Untertitel innerhalb des sicheren Bereichs ist und kein Gesicht abdeckt.

Rahmung, sicherer Bereich und Zoom-Grenzen (durchgesetzt)

• 9:16 Rahmen. Sicherer Bereich: 6 % Rand links/rechts, 8 % oben, 15 % unten (Plattform-UI und Untertitel). Alles, was wichtig ist (Charaktere, Requisiten, Sprechblasen, Schilder), ist vollständig darin, außer absichtlichen Vordergrund-Rahmenrequisiten.
• Der Kopf eines Charakters nimmt höchstens 30 % der Bildhöhe ein (ein Ein-Shot-Reaktions-Gag darf 40 % verwenden). Bevorzuge Halbtotale (von der Hüfte aufwärts) und Ganzkörper-Totale.
• Schneide einen Charakter niemals an den Füßen ab und beschneide niemals eine Sprechblase oder ein Schild. Eine Vordergrundrequisite ist entweder erkennbar oder weg; eine abgeschnittene Requisite darf nicht mehr als 35 % des Rahmens abdecken.
• Nicht mehr als zwei Einstellungen derselben Größe hintereinander (Total / Halbnah / Nah / Detail).
• Push-Ins auf Halten bleiben langsam: 0.15-0.35 % pro Frame, 0.6 % auf Punch-Wörter. Keine plötzlichen großen Zooms.
• Automatische Prüfung: checkShot(camera, items) in templates/bridge/framing.ts projiziert Begrenzungsrahmen auf den Bildschirmbereich und listet jedes Problem auf. Führe es auf dem ersten, mittleren und letzten Frame jeder Einstellung in bridge-stills aus und behebe fehlschlagende Einstellungen vor dem Rendern. Selbsttest: npx tsx templates/scripts/framing_selftest.ts.

Beleuchtung für jeden Ort (die Brücke definiert nur Tag und Goldstunde)

Jeder Ort benötigt seine eigene Licht-Voreinstellung in lights.ts: eine klare Key-Richtung, Zwei-Ton-Schattierung (warm beleuchtet, kühl schattiert), Schlagschatten und Kontaktschatten sowie einen passenden Himmel oder Decke. Niemals einen flachen, unbeleuchteten Raum und niemals Himmel oder Wolken in einem Raum sichtbar.

• Innenraum (Halle, Hotel, Büro): Eine Decke oder dunkle Wandoberseite, ein Key-Licht von einem Fenster oder einer Lampe, warme Gebrauchslichter (Kerzen, Lampen) mit Bloom, eine kühle Schattenseite, eine sanfte Vignette, Boden- und Wandschatten von jeder Requisite, Lichtstrahlen oder Staub von Fenstern.
• Nacht: Mondlicht-blaues Key (etwa #5b7fd6), tiefes blau-violettes Schatten, warm beleuchtete Fenster und Lampen als Kontrast, Mondscheibe oder Sterne.
• Sonnenaufgang / Sonnenuntergang: Tiefstehende Sonne mit God Rays, pfirsich- bis rosafarbener Himmel, violettes Schatten, lange Schatten.
• Dies sind Startwerte: Stimme sie gegen references/frames/ mit Gegenüberstellungsblättern (sbs_sheet.py) ab.
• Kontaktschatten unter jedem Charakter und jeder Requisite, plus einen gerichteten Schattenstrang vom Key-Licht; Möbel und Requisiten werfen Schatten auf Böden und Wände (Kartenschatten sind real, keine Kleckse, in Innenräumen).
• Tiefenschärfe (Tabelle unten) wird konsistent angewendet: Nahaufnahmen und Halbtotale sind nie vollständig scharf, Totalen bleiben scharf.

Kamera-Vielfalt (immer in Bewegung, niemals zweimal dieselbe Bewegung hintereinander)

• Innerhalb eines Flusses oder einer Einstellung verwende benannte Bewegungen: langsames Heranzoomen, Zurückziehen-Enthüllung, Orbit um das Subjekt, lateraler Track mit Parallaxe, Kran auf/ab, Neigung, Ziehumstellung von einer Vordergrundrequisite zum Subjekt, kleiner Dutch Roll (4-5°).
• Keine aufeinanderfolgenden Bewegungen sind gleich.
• Platziere Vordergrundrequisiten (Säulen, Geländer, Möbel) zwischen das Objektiv und das Subjekt in etwa einem Drittel der Einstellungen, sodass die Kamerabewegung als Tiefe lesbar ist.
• Mindestens zwei Detailaufnahmen pro Geschichte: eine Makro- oder Schnittansicht des Mechanismus für Beats 4-6, plus einen dramatischen Winkel (niedriger Heldenwinkel oder Vogelperspektive).
• Behalte die bestehenden smoothen Gleiter-Glides (18-40 f), kriechende Halte und Impact-Kicks.

Kontinuierlicher Fluss: Reise zwischen Subjekten, nicht schneiden (die Referen…

[gekürzt für Übersetzung]