Communitygithub.com

yahiafarid1/toon3d-story-shorts

Erstelle ein ~45-65 s langes vertikales animiertes Story-Kurzvideo im Cartoon-in-3D-Stil mit three.js und Remotion auf einem Mac.

Was ist toon3d-story-shorts?

Diese Fähigkeit ermöglicht die Erstellung von vertikalen animierten Kurzgeschichten (1080x1920, 30 fps, 45-65 s) im Stil von 2D-Cartoonfiguren mit weißen Köpfen in einer farbenfrohen, tuschekonturierten 3D-Welt. Die Kamera gleitet ohne harte Schnitte, es gibt wortweise Untertitel, einen schnellen Erzähler (~3,7 Wörter/s), eine Musikuntermalung und Soundeffekte für jede Aktion. Die Fähigkeit basiert auf mromidev/claude-animated-shorts (MIT) und behebt alle darin gefundenen Lücken. Sie ist für Mac optimiert, verwendet three.js innerhalb von Remotion und erfordert Node 24, Python 3.9 und weitere Tools. Der Workflow umfasst die Ideenfindung, Recherche, Drehbucherstellung, Sprachaufnahme mit edge-tts oder eigener Stimme, Kamerafahrten und Szenenplanung sowie die finale Videoproduktion. Die Fähigkeit eignet sich für virale Geschichten aus den Bereichen Geschichte, Wissenschaft oder kuriose Fakten, die in diesem speziellen visuellen Stil erzählt werden sollen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yahiafarid1/toon3d-story-shorts/tree/HEAD/skill/toon3d-story-shorts

In Ihrer bevorzugten KI fragen

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

Dokumentation

Animierte Story-Kurzfilme im Cartoon-in-3D-Stil (three.js + Remotion)

Was erstellt wird: ein 1080x1920, 30 fps, 45-65 s Kurzfilm. Eine originale wahre Geschichte, erzählt im Referenzstil: ein absurd anmutender Aufhänger im Präteritum, zweifelnde Lacher, "Siehst du," und ein abschließender Pointen-Ausspruch. Flache Cartoon-Karten stehen in einer gemalten 3D-Welt mit Tuschekonturen, motiviertem warmen Licht vor kühlem Schatten, Linsenschärfe und einer Kamera, die niemals schneidet. Ein schneller Erzähler (~3,7 Wörter/s), Ein-Wort-Untertitel, eine Originalkomposition und synthetisierte Soundeffekte, gemastert auf -14 LUFS.

Beispiel: Die falschen Kunden (1937, Sylvan Goldman bezahlt Schauspieler, um seine neuen Einkaufswagen zu schieben), befindet sich in project/src/videos/fake-shoppers/ und project/stories/fake-shoppers/.

Grundregeln (immer)

  • Geschichte, Charaktere, Stimme und Musik sind unsere eigenen. Verwende die Referenz für den Look und die Formel, niemals deren Drehbücher, Charaktere oder Einstellungen. Erwähne niemals den Namen des Kanals in einem Video, Titel oder einer Beschreibung. Die Referenzvideos sind privates Studienmaterial: niemals hochladen oder versenden.
  • Fakten werden recherchiert und belegt am Anfang der SCRIPT.md der Geschichte. Witze sind Übertreibungen oder echte Fakten, niemals erfundene Geschichte, die als Tatsache präsentiert wird.
  • Nur kostenlose, lokale Tools. Verwende edge-tts oder die eigene Stimme des Benutzers; keine kostenpflichtigen Generatoren. Frage vor der Verwendung von Credits für irgendeinen Konnektor.
  • Keine Pausen in der Stimme (Lücken auf 0,07 s schneiden, oder 0,2 s am Satzende). Untertitel sind aktiviert (Referenzstil). Das Video endet ≤0,5 s nach dem letzten Wort, ohne Outro oder Handlungsaufforderung.
  • Überprüfe references/TOPICS_DONE.md vor der Themenauswahl.
  • Zwei Genehmigungstore, dann "mach es einfach" (aus der ursprünglichen Fähigkeit übernommen):
    1. Drehbuch: zeige das Drehbuch (mit seinen Quellen) und warte auf das OK des Benutzers, bevor du die Stimme und den Einstellungsplan erstellst. Danach arbeite ohne Nachfragen bis Tor 2.
    2. Prüftafel: bevor der vollständige Render erfolgt, sieht der Benutzer einen Entwurf in halber Größe auf der Prüftafel, pinnt Notizen an Momente oder Szenen und sagt "Sieht gut aus" (Schritt 8). Runden wiederholen sich bis dahin; kein vollständiger Render davor.
  • Der Geschmack des Benutzers und gelernte Überprüfungen (aus vergangenen Prüftafeln). Lies beide PREFERENCES-Dateien vor dem Schreiben des Drehbuchs (Schritt 2), des Einstellungsplans (Schritt 4), der Sets (Schritt 5) und der Besetzung (Schritt 6). Gehe beide CHECKS-Dateien bei Schritt 8 durch, zusammen mit den Lesbarkeitsfallen:
    • geteilt von jeder Video-Fähigkeit: ~/video-editor/review-board/PREFERENCES.md, ~/video-editor/review-board/CHECKS.md;
    • nur für diesen Stil: references/PREFERENCES.md, references/CHECKS.md.
  • Fortsetzen einer bestehenden Geschichte: führe zuerst node ~/video-editor/review-board/cli.mjs show stories/<name>/review aus. Notizen, die der Benutzer gesendet hat, während keine Sitzung lief, werden vor allem anderen behandelt (Schritt 8.5).
  • Ein vollständiger Render. Starte ihn im Hintergrund, teile dem Benutzer die voraussichtliche Dauer mit (~4 fps bei 1080, ~10 min für 60 s bei 2K) und frage nicht nach: der Job meldet sich, wenn er beendet ist. Vorschauen bei --scale 0.5 können kostenlos wiederholt werden.

Dieser Mac (eingerichtet und getestet am 07.11.2026)

  • Arbeitsprojekt: ~/video-editor/toon3d-shorts/, erstellt durch setup.sh. Es enthält src/engine (generisch), src/videos/<name>/ (ein Ordner pro Video), stories/<name>/ (Drehbuch, Stimme, Cues, Partitur), audio/ (Synth-Kit + Mischpult), tools/measure.py, scripts/ und public/. Eine frische Kopie befindet sich im project/ dieser Fähigkeit. Erstelle es neu mit bash ~/.claude/skills/toon3d-story-shorts/setup.sh <dir>, welches npm install (festgelegte Versionen) und pip install --user scipy ausführt.
  • Node 24 + Remotion 4.0.539: GPU über ANGLE/Metal. Standbilder benötigen ~1,3 s nach einem ~20 s Bundle; eine vollständige 60 s Vorschau rendert in ~45 s bei --scale 0.5.
  • Python 3.9: numpy, PIL, scipy. ffmpeg-full. whisper-cli mit ~/video-editor/models/ggml-large-v3-turbo-q5_0.bin. edge-tts (python3 -m edge_tts).
  • Referenzstudie (von Ihnen zu erstellen, nicht enthalten): ~/video-editor/reference-study/, erstellt aus den Referenz-Kurzfilmen, die Sie studieren (laden Sie diese selbst in ~/Downloads/reference-shorts/ herunter; es sind Studienmaterialien, teilen Sie sie niemals). Die Studie des Autors maß 19 Kurzfilme; die Zahlen in references/ stammen daraus:
    • STYLE_BIBLE.md und SCRIPTS_ANNOTATED.md
    • measure/ (Bild-für-Bild-Statistiken, Transkripte, 2 s / 60-Bild-Kontaktabzüge, 1 fps Bilder, summary.json), welches die Basis für tools/measure.py ours ... --refs ist
    • frames/ und sheets/ (1 fps / 2 s Ansichten, die für Gegenüberstellungen verwendet werden)
  • Setze TMPDIR/REMOTION_TMP auf ~/video-editor/remotion-tmp (stills.mjs macht dies). Remotion-Bundles sammeln sich dort an. Lösche alte remotion-webpack-bundle-* Ordner nur, wenn der Benutzer zustimmt.

Pipeline

  1. Ideen → Thema → Fakten. Wenn der Benutzer kein Thema hat oder nach Ideen fragt, führe eine Ideenrunde durch (references/VIRAL_IDEAS.md enthält die Daten, Quellen, Bewertungsmatrix und Faktenregeln):

    • Was gewinnt jetzt (ein paar YouTube-Recherche-Aufrufe; frage zuerst, ob der Konnektor Credits abrechnet):

      • Die beliebtesten Kurzfilme des Referenzkanals: youtube_channel_shorts mit channel_id <REFERENCE_CHANNEL_ID> (der Kanal, dessen Kurzfilme Sie studieren) und sort_by popular. Füge alle neuen Titel zu TOPICS_DONE.md hinzu.
      • Nischen-Ausreißer: faceless_outliers_videos mit einer semantischen query pro Gewinnerart (z.B. "animierter Kurzfilm, der den versteckten Grund hinter einer seltsamen historischen Erfindung, einem Trick oder einem Gesetz enthüllt, mit einer Wendung am Ende"), videoType shorts, languages ["english"], minOutlierScore 3. Ignoriere unpassende Treffer (Spiele, Gadgets). Notiere die Titel-Muster und füge bereits verarbeitete Geschichten zu TOPICS_DONE.md hinzu.
    • Kandidaten: sammle ~30 wahre Geschichten aus der Quellenliste mit WebSearch/WebFetch. Ordne jede einer Gewinnerart zu: versteckter Grund hinter einem alten Objekt oder Brauch, fremdes System oder Schlupfloch, Gehirnpsychologie, Geldtrick oder Betrug, Fabel oder Paradoxon.

    • Bewerte jede mit der 10-Punkte-Bewertungsmatrix (von 20). Für die Top 10 überprüfe die Aktualität mit youtube_search (type shorts): verwerfe eine Geschichte, die bereits über 1M Aufrufe in den letzten 12 Monaten erzielt hat, oder finde einen frischen Blickwinkel.

    • Präsentiere 5-8 Ideen mit: einem Arbeitstitel in einem erfolgreichen Muster, dem Einzeiler-Aufhänger, dem Objekt, dem Mechanismus

      • Analogie, der Bewertungsaufschlüsselung, warum es viral gehen könnte (Referenzzahlen der Art), und 2-3 Quellen. Speichere sie alle in references/IDEAS_BANK.md. Der Benutzer wählt eine aus.
    • Recherchiere die Auswahl:

      • ≥2 unabhängige, solide Quellen für jede Zahl, jedes Datum, jeden Namen und jede Behauptung;
      • Legende als Legende gekennzeichnet; dramatisierte Beleidigungen als solche markiert;
      • ein Faktenblock (Behauptung → Links → Vertrauen) am Anfang von stories/<name>/SCRIPT.md.

      Für ein großes Thema kann die Deep-Research-Fähigkeit diesen Durchgang übernehmen.

    Ein gutes Thema ist eine überraschende wahre Geschichte mit einem einzigen zentralen Objekt und einem versteckten Mechanismus, den sich der Betrachter vorstellen kann, plus einer alltäglichen Analogie, die ihn erklärt (Suppenschüssel, Handy, das von einem Tisch rutscht, Aufzugsknöpfe).

  2. Drehbuch (160-240 Wörter, 45-65 s). Die gemessene Formel des Kanals (references/STYLE_BIBLE.md §2, SCRIPTS_ANNOTATED.md):

    • Aufhänger (fertig bis ~5 s, 9-20 Wörter): eine absurde Handlung als Tatsache dargestellt, im Präteritum ("Er bezahlte Fremde, um in seinem eigenen Lebensmittelgeschäft so zu tun, als würden sie einkaufen."). Alternativen: eine paradoxe Behauptung ("X ist illegal, doch...") oder ein konditionales Versprechen ("Wenn du jemals..."). Niemals eine Frage.
    • Schauplatz: 1-2 Zeilen im Präsens, mit konkreten Zahlen und dem Jahr.
    • Zweifler: jemand lacht oder verspottet, mit einem zitierten Spott in der Rolle. Verwende 1-2 Spötteleien pro Video.
    • Zuschauerfrage: "Moment, ...?" / "Aber wie?" (ungefähr eine pro Video).
    • Steigerung: Zeitsprünge und Wiederholungen ("Woche für Woche", "Bis Juli..."), plus ein hyperbolischer Witz alle 10-15 s ("so X, dass Y", eine ernüchternde Analogie).
    • Wendung: "Dann, eines Nachts/eines Morgens...".
    • Enthüllung: "Siehst du," bei ~65-87 % der Laufzeit, die den wahren Mechanismus in 1-3 klaren Sätzen erklärt, idealerweise durch die alltägliche Analogie. ("Siehst du," direkt nach dem Aufhänger funktioniert auch als Kontextwechsel.)
    • Pointen-Ausspruch: ein kurzer deklarativer Satz, der alles neu einrahmt (die Zweifler widerlegt). Darauf schneiden. Bonus: schreibe den letzten Satz so, dass er zum ersten zurückführt, für eine nahtlose Schleife.
    • Stil: Aufhänger im Präteritum, dann Präsens; gesprochene Wörter mit Zusammenziehungen; ~14 Wörter pro Satz; die Verknüpfungen sind "also / aber / dann", niemals "und dann". Die zweite Person ("Stell dir vor, du...") ist ein gültiger Modus.
    • Erzähle niemals, was der Betrachter bereits sehen kann (aus der ursprünglichen Fähigkeit übernommen). Die Stimme fügt hinzu, was das Bild nicht kann: die Ursache, die Zahl, den Witz, die Einsätze. Das Bild zeigt die Handlung.
    • Titel: eine Neugierlücke um das Objekt, 4-8 Wörter, in einem erfolgreichen Muster ("Das [Objekt], das [absurdes Ergebnis]", "Warum [Gruppe] [seltsame Sache tat]", "Wie ein [kleines Ding] [große Sache tat]", "Was [Objekt] Wirklich Bedeutete", "Der [Mensch], Der [Paradoxon]"). Biete 3 Optionen mit dem Drehbuch an.
    • Aufhängertest: lies den ersten Satz laut vor. Er muss in unter ~3 s zünden und sich falsch oder unmöglich anhören. Wenn er Kontext benötigt, schreibe ihn neu.
    • Liefere für Tor 1: das Drehbuch, die 3 Titel und den Faktenblock mit Quellen.
  3. Stimme in stories/<name>/voice/:

    • Generieren: python3 -m edge_tts --voice en-US-AndrewNeural --rate=+14% --text "$(cat ../script.txt)" --write-media raw.mp3, oder verwende die Aufnahme des Benutzers.
    • Straffen: python3 scripts/tighten_voice.py raw.mp3 voice.wav --sentence-gap 0.12 schneidet Lücken auf 0,07 s, bzw. 0,12 s am Satzende (die Referenz hat ~1 Pause über 0,25 s pro Video), und gibt 48 kHz Mono aus.
    • Wortzeitsteuerungen: whisper-cli -l en -ml 1 -sow -oj auf einer 16 kHz Kopie, dann konvertiere in words.json ([{w, a, b}] in Sekunden). Verwende die Schreibweise des Drehbuchs, nicht die von whisper. Kopiere es auch in words_authored.json: die Zeitleiste, gegen die der Einstellungsplan geschrieben ist (story.ts baut RETIME aus dem Paar auf; identische Dateien = keine Änderung).
    • Die eigene Aufnahme des Benutzers: vergleiche ihre Wörter mit dem Drehbuch und messe ihr Tempo (Wörter/s, Pausen über 0,25 s). Straffen hilft kaum bei einer bereits straffen Lesung; wenn sie langsamer als die Ziele unten ist, erstelle eine tonhöhenerhaltende --tempo 1.1 Version und lasse den Benutzer beide hören, bevor er wählt.
    • Ersetzen der Stimme nach dem Einstellungsplan (gleiche Wörter, neue Aufnahme; gemacht für Die falschen Kunden am 08.11.2026): mache nichts von Hand neu.
      • Behalte die alten Zeitsteuerungen als words_authored.json und lege die neuen in words.json ab (Schreibweise des Drehbuchs, gleiche Wortanzahl). Unterschiedliche Wörter bedeuten einen neuen Einstellungsplan.
      • RETIME = makeRetime(authored, spoken, FPS) (engine/retime.ts) bildet jeden Ausgabebild auf die authored Zeitleiste ab, folgt der neuen Stimme Wort für Wort mit ±2-Wort-Glättung (medianer Einsetzfehler ~1 f). index.tsx verwendet total: RETIME.total, retime: RETIME; cast.ts Lippensynchronisation importiert weiterhin words_authored.json.
      • Überprüfe ein paar Schlüsselwortbilder auf Standbildern, stelle dann den neuen Entwurf auf der Prüftafel ein, wobei jede Szene unter --changed aufgeführt ist.
      • Der Ton bewegt sich damit, ohne dass etwas von Hand neu platziert wird:
        1. node scripts/retime_cues.mjs <name> behält cues_authored.json einmal bei und schreibt cues.json in Ausgabezeit (Ereignisse, dur-Argumente, Hintergrundmusiken, Whooshes) plus timemap.json.
        2. python3 score.py music.wav <RETIME.total> timemap.json: Akzente folgen dem Bild, das Beat-Raster folgt Abschnitt für Abschnitt. Ohne eine Karte bleibt die Partitur unverändert (Stichprobe für Stichprobe überprüft).
        3. python3 audio/mix.py stories/<name>/cues.json public/<name>/mix.wav, dann flüstere die Mischung, um zu bestätigen, dass jedes Wort gehört wird.
    • Ziele: 3,6-3,9 Wörter/s, Aufhänger endet ≤6 s. TOTAL = ceil(last word end × 30) + 6 frames.
    • Straffe vor dem Einstellungsplan, niemals danach. Jeder Einstellungsbildrahmen basiert auf dem gestrafften words.json, daher bedeutet erneutes Straffen später ein Neutiming des gesamten Videos. (Das Beispiel übersprang dies und behielt 10 Pausen über 0,25 s, gegenüber ~1 der Referenz.)
  4. Einstellungsplan in src/videos/<name>/story.ts (kopiere das Beispiel):

    • SHOTS: {id, a, b, light, set} in Bildern. Ein neues Bild alle ~2,2 s (etwa alle 8 Wörter). Die Aktion trifft auf das Schlüsselwort, 0-3 f vor dessen Einsatz.
    • TRANSITIONS: wie ein Schuss kommt:
      • dissolve (4-8 f) bei Orts- oder Zeitwechseln
      • iris (12-16 f, cx/cy) durch Bullaugen, Gucklöcher, Linsen oder Uhren
      • dust (20-26 f) wenn ein Puff oder eine Wolke das Bild füllt
      • flash (4 f) nur nach dem Aufhänger Schüsse im gleichen Set ohne Übergang werden automatisch durch eine verkettete Kameragleitung verbunden, die auf die Grenze zentriert ist (makeCamAt; chain = 18 f, oder ein pro eingehenden Schuss rekordgroßer Reiseweg), so dass der Bühnenwechsel mittendrin landet. Niemals einen harten Schnitt. Eine verkettete Grenze, die > ~1100 px reisen oder sich um > 90° drehen würde, erhält stattdessen einen dissolve.
    • CAMS: pro Schuss Keys {f, dur?, dissolve?, s: f => dolly(pos, look, pushK(f, f0, rate, punch?), {fov, roll})}. Kameraregeln (references/studies/camera.md, 12 Kurzfilme bei 30 fps):
      • Bildbudget: 15-20 % stillstehend, ~45 % kriechend, ~33 % gleitend (3-30 px/f bei 540 Breite), ≤3 % schnell.
      • Eine neue Rahmung alle ~1,4 s. Die meisten sind kleine Neurahmungen: umschließe die Keys als withReframes(CAMS, ENDS) und jede lange Halteposition erhält alle 42 f einen 14 f seitlichen Schwenk von ±5 % des Motivabstands, wobei der eigene Push dieses Keys erhalten bleibt. Markiere bewusste ruhige Haltepositionen als hold: true. Etwa 4 schnelle Bewegungen pro Minute: Spitze 35-55 px/f (Obergrenze 70), 20-34 f.
      • Autor ~7 Bewegungen pro 10 s, die meisten davon kleine, langsame Bewegungen (Spitze ~10 px/f, 80-150 px Reiseweg). Verwende withNudges(CAMS, [[shot, baseKeyF, at, dur, ±0.05-0.07], ...]) für kleine seitliche Neurahmungen innerhalb langer Haltepositionen (sie behalten den Push dieses Keys bei), dann füllt withReframes den Rest. Die Kamera des Beispiels misst nach dieser Neuschlüsselung innerhalb der Referenz in jeder Klasse (stillstehend 19,5 / kriechend 49,9 / gleitend 27,1 / schnell 3,5 %, 7,4 Bewegungen pro 10 s; studies/camera.md).
      • Überprüfe die Richtung jedes Nudges auf einem Standbild. Bewege dich in Richtung des ...

[Fortsetzung zu lang; siehe vollständige SKILL.md für den Rest]

Verwandte Skills