Communitygithub.com

mromidev/cartoon-3d-short

Erstelle einen ~55–70 s vertikalen Cartoon-Geschichten-Kurzfilm im Stil „2D-Charaktere in einer bunten 3D-Welt“ (flache Bohnenkopfüberkarten mit Tintenumrissen, bemalte 3D-Stadt/Welt mit schwarzen Tuschelinien, gesättigter Himmel, Tiefenschärfe-Hintergründe, gleitende Kameras, Sprach-Erzählung, synthetisierte SFX + Marschmusik), gerendert mit three.js in Remotion. Bewährt auf „The Bridge That Fell for a Song“ (2026-10-31). Verwende diesen Skill, wenn der Nutzer nach einem weiteren Video „wie das Brückenvideo“, „wie der Soldaten-/Brücken-Kurzfilm“, „in diesem Cartoon-3D-Stil“, einem Geschichts-/Wissenschafts-Kurzfilm mit Cartoon-Figuren in 3D fragt oder sagt: „Nutze den Cartoon-Kurzfilm-Skill“.

Was ist cartoon-3d-short?

Dieser Skill ermöglicht die Erstellung von vertikalen Kurzfilmen (ca. 55–70 Sekunden) im einzigartigen Stil „2D-Cartoon-Figuren in einer bunten 3D-Welt“. Er ist speziell für Remotion mit three.js konzipiert und wurde erfolgreich mit dem Kurzfilm „The Bridge That Fell for a Song“ getestet. Der Skill umfasst eine vollständige Pipeline von der Themenauswahl und Skripterstellung (mit einer bewährten Beat-Formel) über die Sprachaufnahme, Kameraführung, Welterstellung (mit bemalten Texturen und einer Stadt aus Kenney-CC0-Kits) bis hin zu Charakteren (Bohnenkopf-Cartoons mit Tintenumrissen) und Sounddesign (synthetisierte SFX und Musik). Der Workflow beinhaltet strenge Qualitätssicherung mit visuellen Referenzvergleichen und einer finalen Überprüfung. Der Skill ist für Claude Code, Cursor oder andere KI-Agenten optimiert, die Remotion-Projekte verwalten. Der Stil wird durch präzise Parameter gesteuert (z. B. Tintendicke, Farbpaletten, Kamerabewegungen) und eine Look-Match-Schleife ermöglicht die Anpassung an andere visuelle Referenzen. Wichtige Fallstricke (wie Festplattenplatz für Webpack-Bundles oder Probleme mit der Tinten-Reihenfolge) werden dokumentiert.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add mromidev/claude-animated-shorts

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

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

Bewährtes Beispiel: The Bridge That Fell for a Song. Es ist ein origineller 67 s langer Kurzfilm über die Broughton-Brücke von 1831 und 74 Soldaten, die im Gleichschritt marschieren.

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

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

  • Diese Videos sind privates Studienmaterial. Laden Sie sie niemals hoch, veröffentlichen oder versenden Sie sie.
  • Kopieren Sie niemals deren Skripte, Charaktere oder Einstellungen. Geschichte, Charaktere und Stimme sind IMMER UNSERE EIGENEN.
  • Nennen Sie niemals den Namen des Kanals in einer Voice-Over oder Beschreibung.

Geltende Benutzerregeln:

  • Keine Untertitel oder Beschriftungen im Video.
  • Nur Englisch.
  • Stimme: gleichbleibender Tonfall.
  • Witze sind recherchierte wahre 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.
  • „Einfach machen“, sobald das Skript genehmigt ist.

Pipeline

  1. Thema und Fakten. Wählen Sie eine überraschende wahre Geschichte mit einer physikalischen Ursache und Wirkung (sie sollte visuell sein) sowie eine einfache alltägliche Analogie, die sie erklärt.
    • Schreiben Sie die Fakten mit ihrer Quelle am Anfang von SCRIPT.md.
  2. Skript (~3,7 Wörter/s, 55-70 s). Beat-Formel aus dem Brücken-Kurzfilm:
    • Hook: die absurde Tatsache in einem Satz („Vierundsiebzig Soldaten haben eine eiserne Brücke nur durchs Darüberlaufen zum Einsturz gebracht.“).
    • Setting: Jahr, Ort, Stolz.
    • Action: Eskalation über drei oder vier Beats, jeder etwas größer.
    • Snap: der Moment, in dem es bricht.
    • Trockene Doppelzeile: „Zum Glück ... / Zum Pech ...“.
    • Erklärung: eine physikalische Idee durch eine alltägliche Analogie (das Kind auf einer Schaukel).
    • Konsequenz: die Regel, die es geschaffen hat.
    • Callback-Twist: das Ende.
    • Beschreiben Sie niemals auf dem Bildschirm, was der Zuschauer bereits sieht.
  3. Stimme. Nehmen Sie voice.wav auf oder generieren Sie es, erstellen Sie dann die Wortzeiten words.json (jede Speech-to-Text mit Wortzeiten).
    • Legen Sie sie im Projektordner ab, z. B. ~/bridge-short/voice/.
    • Korrigieren Sie die Wortzeiten von Hand. Alles ist auf words.json getaktet.
  4. Einstellungsplan in story.ts: Kopieren Sie templates/bridge/ (den finalen Brücken-Quellcode, derselbe wie src/videos/bridge/ Ihres Remotion-Projekts) nach src/videos/<name>/, registrieren Sie eine neue Komposition neben BridgeShort in src/Root.tsx und benennen Sie sie um.
    • SHOTS: id, a/b-Frames, Licht Tag/Golden, Crowd-Modus, tau Geschichtszeit.
    • XFADE: Überblendungen bei Orts-/Zeitwechseln.
    • FLASH_AT: ein weißer Blitz nach dem Hook.
    • CAMS: pro-Einstellung Keys {f, dur?, cut?, s: f => {pos, look, fov, roll}}.
    • KICKS: Impact-Flip-Erschütterungen.
    • DOF/dofAt: Linsenunschärfe pro Beat.
    • FOREGROUND: nahe Rahmungs-Props.
    • Jede visuelle Reaktion erfolgt 0–3 Frames vor ihrem Wort.
  5. Welt.
    • lights.ts: LIGHTS plus das LOOK-Sky/River/Cloud-Palette pro Licht.
    • shade.ts: Zweiton-Schattierung und untone().
    • build.ts: Stadt, Häuser und Kenney-CC0-Kit-Props, neu eingefärbt, mit Sichtlinien-Ausblendung von allem, was eine Kamera blockiert.
    • paint.ts: HD-Canvas2D-bemalte Texturen mit als dunkle Tönungen eingezeichneten Nähten.
    • world.ts: Sky-Shader, Nebel = Horizontfarbe, Fluss, Pose pro Frame, Sonne pro Einstellung eingefroren und kamerarelativ.
  6. Figuren.
    • toon.ts: die Canvas2D-Pen-Zeichen-API, 600x1000 Design-Canvas, Sohlen bei y = 975, Bohnenköpfe, Strichglieder, Pflaumen-Variable-Breiten-Umriss, Gesichtsbibliothek.
    • cast.ts: kamerazugewandte Billboards, Menschenmengen, Effektkarten, Blinzeln, Gehzyklen. Alle Billboards gehen auf die NOINK-Ebene.
    • cardshade.ts: Karten beleuchtet durch das Szenenlicht, keine Emission.
  7. Post (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
    • Compositor-Reihenfolge: Ink → Lens Pre → Lens Main → Bloom → NEUTRAL Tone Map → Grade (MSAA 4).
    • Jeder Pixel-Parameter skaliert mit der Ausgabe-Höhe / 1920.
  8. Ton (~/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 ist.
    • Ausgabe: mix.wav (48 kHz, exakte Länge), Stems und cues.md.
    • Fixieren Sie die Zeitkonstanten des Bildes, bevor der Ton erstellt wird. Jede spätere Timing-Änderung bedeutet, den Ton neu zu generieren.
  9. Look-Checks. Führen Sie node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5 aus.
    • Setzen Sie BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx, um eine Sandbox-Kopie zu rendern.
    • Erstellen Sie Side-by-Side-Vergleiche mit Referenz-Frames mit python scripts/sbs_sheet.py out.jpg --ours ... --ref ....
    • Senden Sie sie an einen Opus-Max-Verifizierer: 1–3 Bilder, ein ≤200-Wörter-Urteil.
  10. Finaler Render.
    • npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333
    • Muxen 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, plus Lautstärke und Sheets.
    • Beheben Sie alles, was es findet, führen Sie dann ein tiefgehendes Opus-Audit durch.
  11. Liefern. Senden Sie die finale mp4 als Datei, aktualisieren Sie den Speicher, schreiben Sie Notizen.

Finale Look-Werte (Brücke nach 4 Verifizierer-Durchgängen; alle in templates/bridge/)

Starten Sie jeden neuen Kurzfilm von templates/bridge/ (kopieren nach src/videos/<name>/): Der Look lebt in diesen Werten, die Geschichte lebt in story.ts / build.ts-Layout / cast.ts-Rollen. Opus-Max-Bewertungen am Ende: Farbe Tag 7, Golden 5-6, Beleuchtung 5-6, Tinte 6, Texturen 5-6, Figuren 7, Tiefe 6-7, Komposition 6-7 (von 5/3/4/5/4/7/4/6 zu Beginn).

  • Licht-Voreinstellungen (lights.ts, Sonne kamerarelativ und pro Einstellung eingefroren):
    • Tag: az 75 / el 48, lit [1.58,1.5,1.33], shade [.30,.29,.36], lift [.05,.06,.11] (kühler Farbton NUR im Schatten), Himmel oben #3e7fd2 → Horizont #b8d0ec, Nebel = Horizont, 25→300 m, uSat 1.08, ~15 % blauer Dunst ab 60 m.
    • Golden: az 6 / el 7 (Gegenlicht tiefe Sonne), Key zu #FFB36B ×1,5, violett-blauer Schatten (Fassade ≈ #444380), Himmel #ffc47c → #8a6f8a, Pfirsichnebel nur ab 50 m, Sonnenscheibe #ffcf9e + Bloom, Kontaktklumpen + echte Kartenschatten.
  • Albedos (paint.ts/build.ts): gedämpftes Ziegel / Creme / Ocker / Terrakotta-Häuser mit Sockel, Gesims, Fensterbänken, Hauben, Türstufe, Schornstein + Topf, Höhen 7 / 8,4 / 9,8 m; warmgrau/beiger Stein (Sättigung −35 % von „Märchenbuch“); Ockerholzdeck C* ~51-58 mit fast schwarzen Nähten; Eisen dunkel und entsättigt. Niemals Zitrone, niemals Lavendel beleuchtete Flächen.
  • Tinte (ink.ts): #030303, 5,1 px nah (6 m) → 3,3 px fern (90 m) bei 1080x1920, Falten ×0,8 ab 35°, Tiefensprünge ab 1 %, Nebeltönung 0,3 nur fern; Figurenkarten auf Ebene NOINK (sie tragen ihre eigene Pflaumentinte).
  • Linse (lensblur.ts + dofAt in story.ts): cInf px bei 1080: Hook/Fluss-CU 15-16, Nahaufnahmen 12-14, MS 10-12, Park 7, Golden Sway 5, Weit-/Luftaufnahmen 0. Fokus auf die Augen der ersten Reihe.
  • Post (Bridge.tsx): Ink → Lens Pre → Lens Main → Bloom (thr 1,0, int .5, 6 Ebenen, radius .6) → NEUTRAL Tone Map → Grade; MSAA 4. Filmkorn existiert, ist aber AUS (Referenz misst kein Korn; es vervierfacht die Dateigröße).
  • Figuren (toon.ts/cast.ts/cardshade.ts): Bohnenköpfe h/w .94, Pflaumentinte #241726, Augen .26 W auseinander, kein Rouge, 14 Ausdrücke; Erwachsene 3,5 Kopfhöhen; Gehwippen 5 %, Neigung 1-7°, Standfuß 0,8 m Schritt; Blinzeln 0,5-2,3 s; enger Kontaktschatten ~.5 unter den Füßen + Sonnenrichtungsschweif bei Tag; Goldener Rand nur innen (niemals eine versetzte äußere Kopie).
  • Kamera (story.ts): Schnitte bei großen Sprüngen, smootherstep-Gleiter 18-40 f, jede Halteposition kriecht (keine statische Halteposition ≥4 f), Flip-Kicks abklingend über 7 f bei Einschlägen, 4-4,6° Rollen, Vordergrund-Props (FOREGROUND) in etwa 1/3 der Einstellungen.

Look-Ziele (gemessen an der Referenz; siehe references/reports/)

  • Tinte:
    • Weltlinien: etwa 3 px bei 1080 Breite, fast schwarz #0b0a0c, nahezu konstant mit der Entfernung. Nur Silhouetten, Tiefensprünge und Normalfalten. Keine Linie an Wand-/Bodenverbindungen oder am Horizont. Figurenkarten werden niemals von der Welttinte umrandet.
    • Figurentinte: dunkles Pflaume #201628-#2f1d28, dicker auf der Unterseite/Schattseite.
  • Farbe:
    • Tages-Median-Luma ~.57. Nicht-Tinte p5 ~.23 (keine zerdrückten Schwarztöne). Beleuchtetes Chroma C* p90 ~55. Tageshimmel oben ~#5e93d9, Horizont 1,28x heller.
    • Golden: Pfirsichhorizont #ffd08a, violett-blaue Schatten (niemals braun), Gegenlicht-Sonne.
  • Tiefe:
    • DOF auf etwa 1/3 der Bildschirmzeit (CU, MS, Insert), cInf 10-16 px bei 1080, Fokus auf die Augen. Einrichtungs- und Weitwinkelaufnahmen bleiben scharf.
    • Nebel = Horizontfarbe, 25→420 m Tag, 20→360 m Golden.
    • Bloom nur auf HDR-Emissiven: Schwelle 1.0.
  • Kamera:
    • Harte Schnitte bei großen Sprüngen. Alles andere ist ein smootherstep-Gleiter von 18-40 f, Spitze ≤ 25 px/f bei 720p.
    • Jede Halteposition drückt um 0,15–0,35 %/f herein, mit 0,6 %/f bei Punch-Wörtern.
    • Rollen von 4–5°.
    • Kein Handheld-Geschwebe. Impact-Shakes wechseln das Vorzeichen jedes Frames und klingen über 7 f ab.
  • Figuren:
    • Etwa 3,5 Kopfhöhen groß, Beine 1,4 KH.
    • Strichglieder etwa 0,055 der Kopfbreite, Tintenpunkt-Hände.
    • Bohnenkopf (h/w ~0,93, schmaleres Kinn, spitzere Krone).
    • Kein Rouge oder Augen-Highlights. Gesichter bei Helligkeit ~.93.
    • Gehwippen 3–7 %, Neigung 1–7°, Standfüße.
    • Blinzeln alle 0,5–2,3 s, Dauer 4 f.

Look-Match-Schleife (wie der Brücken-Look erreicht wurde; wiederverwenden für jeden „Mach es aussehen wie X“-Durchlauf)

  1. Zuerst die Referenz messen. Ein Analyse-Agent pro Thema (Bewegung, Tiefe, Texturen, Figuren, Beleuchtung, Umrisse, Grading), jeder schreibt Zahlen, keine Adjektive, in references/reports/<topic>.md. Gemeinsames Briefing: compare/CONTEXT.md. Die Reports sind die Quelle der Wahrheit für jeden folgenden Agenten.
  2. Sandboxes, ein Besitzer pro Datei. Kopieren Sie den Projektordner nach src/videos/<name>_{cam,world,mat,char,post} mit Einträgen src/sandboxes/<n>/index.tsx (gleiches index.tsx wie main, nur der Import-Pfad geändert). Besitzverhältnisse für die Brücke:
    • cam: story.ts (Kamera-Keys, Schnitte, Kicks, DOF-Tabelle, Vordergrund-Props)
    • world: world.ts, lights.ts, shade.ts, grade.ts (Sonne, Himmel, Nebel, Fluss, Farbe, Grading)
    • mat: paint.ts, build.ts (bemalte Texturen, Gebäude, Props)
    • char: toon.ts, cast.ts, cardshade.ts (Figurenzeichnung, Posen, Kartenbeleuchtung, FX-Karten)
    • post: ink.ts, Bridge.tsx, lensblur.ts (Umriss-Durchlauf, Komponist, Linsenunschärfe, Bloom) Agenten bearbeiten nur ihre eigenen Dateien in ihrer eigenen Sandbox und rendern Standbilder mit BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<name>/<n>/x_ <frames> 0.5.
  3. Merge mit python scripts/bridge_merge.py [cam,world,mat,char,post] (sichert main in backup/bridge_<time>/, kopiert nur besessene Dateien). Dann npx tsc --noEmit (filtern auf den Projektordner), dann jede Sandbox von main neu abgleichen (cp -f src/videos/<name>/* src/videos/<name>_<n>/) vor der nächsten Runde.
  4. Verifizieren mit einem frischen Opus-Max-Agenten: Side-by-Side-Sheets (python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2), jede Kategorie aus 10 bewerten (Farbe Tag / Golden, Beleuchtung, Tinte, Texturen, Figuren, Tiefe, Komposition) plus eine nummerierte Fehlerliste mit Frame-Nummern. Ordnen Sie jede Korrektur dem Dateibesitzer zu und setzen Sie den Agenten dieses Besitzers mit SendMessage fort (behält seinen Kontext). Brücken-Bewertungen: Runde 1 5/3/4/5/4/7/4/6 → Runde 2 5/4/5/6/4/7/6/6 → Runde 3 siehe Notizen.
  5. Verträge zwischen Besitzern leben in exportierten Konstanten (z. B. NOINK-Ebene aus ink.ts, dofAt/FOREGROUND aus story.ts, LIGHTS/LOOK aus lights.ts). Das Ändern eines Vertrags bedeutet, jeden Besitzer, der ihn liest, zu informieren.

Fallstricke

  • Kenney-Naturkit-Materialien sind türkis: Färben Sie sie nach Materialname in build.ts neu ein.
  • Kameras landen in Häusern: Der Sichtlinien-Culler in build.ts/world.ts entfernt alles, was einen Kamera-Strahl blockiert.
  • Tinte im selben gemergten Effekt-Durchlauf wie DOF wird überschrieben. Tinte muss ihr eigener Durchlauf vor der Unschärfe sein.
  • Pixelgroße Post-Parameter müssen mit der Auflösung skalieren: Standbilder sind bei 0,5, das Finale bei 1,333. R3F klemmt dpr auf ≥ 1, also rendern --scale 0.5 Standbilder immer noch einen 1080x1920 Puffer.
  • Festplatte: Jedes Remotion-Bundle kopiert public/ (~1,3 GB) in den tmp-Ordner\remotion-webpack-bundle-* und löscht es nie. 60+ GB haben bei den Brücken-Durchläufen das Systemlaufwerk gefüllt und ein Render starb mit ENOSPC. Rendern Sie immer mit export TEMP='<großes Laufwerk>/remotion-tmp' TMP='<großes Laufwerk>/remotion-tmp' (bridge-stills.mjs setzt es selbst) und fragen Sie den Benutzer, bevor Sie alte Bundle-Ordner im gemeinsamen tmp-Ordner löschen (Auto-Modus blockiert die Bereinigung). <großes Laufwerk>/remotion-tmp füllt sich ebenfalls (~500 Ordner / 110 GB nach den 4 Brücken-Durchläufen): Wenn ein Projekt abgeschlossen ist und nichts rendert, löschen Sie dort seine remotion-webpack-bundle-* und puppeteer_dev_chrome_profile-* Ordner.
  • In JS-Strings schreiben Sie "<großes Laufwerk>/remotion-tmp", niemals "<großes Laufwerk>\remotion-tmp" (\r wird zu einem Wagenrücklauf).
  • Remotion schreibt eine stille Tonspur: Muxen mit -map 0:v:0 -map 1:a:0.
  • Sub-Agenten können in diesem Harness keine Report-Dateien schreiben: Bitten Sie sie um eine ≤150-Wörter-Endnachricht und speichern Sie sie selbst in out/<name>/<n>/REPORT.md.
  • Scratch .ts-Dateien in out/ brechen tsc: Benennen Sie sie .txt.
  • 2K-Render laufen mit ~4 fps (≈10 min für 67 s). Standbilder bei 0,5 brauchen 3-8 s pro Stück nach einem ~40 s Bundle.
  • Filmkorn bei 2,5 % machte die 2K-Datei 910 MB statt ~250 MB und wird auf YouTube zu Matsch; die Referenz hat keins. Lassen Sie es aus.

Lesbarkeitsfallen, die der Verifizierer erwischt hat (bei jedem neuen Prop/Shot auf diese achten)

  • Eine Schaukel, die als ein Seil gezeichnet wird, das hinter dem Kind verschwindet, sieht aus wie ein ERHÄNGEN. Immer zwei Seile zu einem breiten Brett mit dem Kind dazwischen (swingKid in toon.ts), und ein Rahmen, dessen Beine den Bogen freimachen (A-Rahmen an jedem Ende).
  • Props oder Treibgut näher als ~2 m an einer Linse werden zu riesigen abgeschnittenen Klecksen am Bildrand. Wenn sich eine Kamera bewegt, überprüfen Sie jedes Prop in der Nähe ihrer neuen Position (die Flusskameras sind in die schwimmenden Hüte gerückt).
  • Ein vom Bildrand abgeschnittener Vordergrundbusch sieht aus wie ein „grüner Ball“; ein Vordergrund-Prop muss erkennbar sein oder weg.
  • Flaggen: Rot + gelber Stern/Raute steht für Vietnam. Verwenden Sie eine zeitkorrekte Flagge (St.-Georgs-Kreuz für England 1831).

Verwandte Skills