Communitygithub.com

Plextrang/story-shorts

Verwandle jede Story-Idee in einen fertigen, vertonten animierten Kurzfilm (9:16, 1080×1920, 30 fps, meist ca. 60 s) mit eigenen Charakteren, Schauplätzen, Kamerafahrten, Erklärgrafiken, Untertiteln, Stimmen, Musik und Soundeffekten – lokal im Code gerendert (three.js im headless Chrome) ohne KI-Video-Credits.

Was ist story-shorts?

Diese Fähigkeit ist eine vollständige Film-Engine und Workflow für die Erstellung animierter Kurzfilme direkt aus einer Idee. Der Kern ist eine Render-Engine, die three.js-Szenen Bild für Bild in einem headless Chrome erzeugt: 2D-Pappfiguren in einer toon-shaded, tintenumrandeten 3D-Welt, mit Kamerafahrten und Überblendungen, einer 2D-Overlay-Ebene für erklärende Grafiken, eingebrannten Untertiteln und einem zeitgesteuerten Soundmix. Jeder Film definiert nur seine eigene Geschichte, Figuren, Schauplätze, Einstellungen, Grafiken und den Soundplan. Die Engine selbst bleibt unverändert. Der Workflow führt Schritt für Schritt durch Idee, Drehbuch, Besetzung, Weltgestaltung, Einstellungsblockung, Sprachaufnahme, Bildprüfung, Soundmischung und finalen Render. Er unterstützt zwei Sound-Optionen: Epidemic Sound (empfohlen, mit MCP-Connector) oder kostenlose Tools wie Kokoro TTS. Jeder Film wird in einem eigenen Ordner mit einer frischen node_modules-Installation erstellt. Die Fähigkeit ist für Claude Code optimiert und enthält ausführliche Referenzdokumente zu Regeln, Story-Vorlagen, Engine-API, Übergängen, Sound und bekannten Fehlern. Die Hauptplattform ist Claude Code, aber die Idee und der Workflow sind auf andere KI-Agenten mit Kopf- oder headless-Chrome-Zugriff übertragbar.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Plextrang/claude-story-animator/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Story Shorts: Jede Idee rein, ein fertiger Cartoon-Kurzfilm raus

Diese Fähigkeit ist eine Film-Engine plus ein Workflow. Die Engine (engine/) rendert three.js Bild für Bild im headless Chrome: 2D-Pappfiguren in einer toon-shaded, tintenumrandeten 3D-Welt, Kamerafahrten und Überblendungen, ein 2D-Overlay für Erklärgrafiken, eingebrannte Untertitel und einen zeitgesteuerten Soundmix. Jeder Film schreibt nur seine Geschichtsebene: wer darin vorkommt, wo sie spielt, die Einstellungen, die Grafiken und den Soundplan. Ein neuer Film beginnt mit dem leeren Starter (starter/: zwei Platzhalter-Figuren, zwei Orte, vier Einstellungen). examples/floating-scale/ ist ein fertiger Film, nur als Referenz. Verwende seine Figuren oder Geschichte nie wieder.

Lies diese nach Bedarf:

  • reference/rules.md: die Geschichte- und Bildregeln. Lies sie zuerst.
  • reference/story-templates.md: sechs Geschichtsformen. Wähle eine pro Film.
  • reference/engine-api.md: wie man einen Film auf der Engine schreibt (Figuren, Posen, Welten, Requisiten, Einstellungen, Grafiken, Cues).
  • reference/transitions.md: Regel 11 in der Praxis (Kamerafahrten, Inszenierung für Kontinuität, beibehaltene Schnitte).
  • reference/sound.md: Stimme, Musik und Effekte, mit Epidemic Sound oder den freien Werkzeugen.
  • reference/lessons.md: bereits aufgetretene Fehler und ihre Lösungen. Überprüfe es vor dem Debuggen.

Bevor du beginnst: stell zwei Fragen

  1. Die Idee. Ein Satz reicht: "ein Leuchtturmwärter, der Angst vor der Dunkelheit hat", "der Marathon von 1904", "was wäre, wenn die Schwerkraft für einen Tag halbiert würde". Frage danach, falls der Benutzer keine Idee genannt hat. Frage nach der Länge nur, wenn es ihm wichtig ist (Standard ca. 60 s).
  2. Sound-Werkzeuge. Frage: "Hast du Epidemic Sound (mit seinem Claude-Connector), oder soll ich die freien Werkzeuge verwenden?"
    • Epidemic Sound (empfohlen): Epidemic Voiceover für den Erzähler und die Figuren, ein Epidemic-Musiktitel, auf die Geschichte zugeschnitten, Epidemic-Effekte und -Ambiente. Benötigt den Epidemic Sound MCP-Connector in Claude Code.
    • Kostenlos: Kokoro TTS für die Stimmen (scripts/kokoro_voice.py), eine im Code synthetisierte Partitur sowie Effekte.
    • Mische die beiden in einem Film nicht, ohne es im README des Films zu erwähnen.

Dann führe python scripts/check_setup.py aus und behebe alles, was als MISSING markiert ist, bevor du Filmcode schreibst.

Der Workflow (keine Freigaben nötig, es sei denn, der Benutzer wünscht sie)

  1. Neues Projekt. python scripts/new_film.py <ordner> "Titel" kopiert die Engine und den leeren Starter, schreibt eine Platzhalter-Zeitleiste und installiert film/node_modules frisch. Arbeite nur innerhalb dieses Ordners.
  2. Geschichte (docs/STORY.md, script/lines.json).
    • Wähle die Story-Vorlage, die zur Idee passt (reference/story-templates.md), und sag, welche du gewählt hast und warum.
    • Schreibe das Drehbuch: ein Eintrag pro gesprochener Zeile (id, Sprecher, Start, Text). Erzählung plus ein paar Figurenzeilen; etwa 150 Wörter pro Minute Filmlänge.
    • Schreibe die Einstellungsliste mit einem stummen Durchlesen pro Einstellung: Was versteht ein stummgeschalteter Zuschauer allein aus dem Bild.
    • Benenne die Orte. Ein Ortswechsel ist der einzige Grund für eine Überblendung; innerhalb eines Ortes bewegt sich die Kamera.
    • Fakten müssen wahr sein, mit echten Zahlen. Figuren, Geschichte und Welt sind original.
  3. Besetzung (film/src/story/cast.js).
    • Ein Schlüssel pro Figur (derselbe wie ihre Sprecher-ID). Beginne jede mit einer Voreinstellung und überschreibe Farben, Proportionen und Merkmale, bis sie zu diesem Film gehört (reference/engine-api.md, „Characters“). Füge ein neues Aussehen in character.js hinter einem neuen feat-Flag hinzu, wenn die Geschichte eines benötigt.
    • Rendere node film/tools/charsheet.mjs und betrachte jedes Blatt, bevor du eine Einstellung baust.
  4. Welt und Requisiten (story/world.js, story/set.js, optional story/props.js).
    • Baue jeden Ort aus worldkit.js plus seinen eigenen Wahrzeichen. Setze jedes Merkmal in SET. Gib Helden-Requisiten die Zustände, die die Geschichte braucht.
  5. Bildblockung (story/shots.js, story/overlay.js).
    • Ersetze die vier Einstellungen des Starters durch die Einstellungen des Films. Timing-Beats aus der Zeitleiste (K.wordAt, K.lineAt), niemals aus hartcodierten Sekunden. Bis die Stimme existiert, python tools/build_timeline.py --placeholder.
    • Inszeniere von Anfang an für Kontinuität (Regel 11): eine Performance pro Figur pro Ort, Requisiten auf ihren Markierungen.
    • Erkläre mit 2D-Diagrammen (Regel 4). Liste jede sichtbare Aktion in CUES.
  6. Stimme.
    • Erzeuge jede Zeile als eigenen Clip in audio/vo/raw/<id>.mp3|wav (Epidemic, oder scripts/kokoro_voice.py).
    • python <repo>/scripts/prepare_voice.py (mit --atempo-off für Kokoro) trimmt die stillen Enden und setzt das Tempo.
    • python tools/build_timeline.py, python tools/captions.py, dann cd film && node tools/cues.mjs.
    • Schneide nie einen Clip an Flüsterwortzeiten ab. Überprüfe die Bildausschnitte erneut: Die Beats haben sich mit der echten Stimme verschoben.
  7. Bildprüfung vor dem vollständigen Render:
    • node framecheck.mjs --step 4 muss „framing OK“ ausgeben.
    • node tools/poptest.mjs --out ../render/pop prüft alle Grenzen auf Pops; bash tools/movesheet.sh prüft Bewegungen.
    • bash tools/sheet.sh <name> "<zeiten>" erstellt Kontaktbögen. Sieh sie dir an und überprüfe jede Einstellung gegen ihr stummes Durchlesen. Führe mindestens zwei volle Durchgänge durch.
  8. Sound (audio/sound_plan.json, reference/sound.md).
    • Epidemic: Lade den Titel und die Effekte in audio/epidemic/ herunter, fülle music, effects und ambience aus, dann cd audio/epidemic_mix && python mix_film.py && python autolevel.py && python qc.py && python sync_check.py.
    • Kostenlos: fülle synth aus, dann cd audio/synth && python music.py && python build_fx.py && python mix.py && python cue_presence.py.
    • Ziele: −14 LUFS, True Peak ≤ −1,3 dBTP, Stimme mindestens 6 dB klar auf jeder Zeile, keine stillen Lücken, jeder Effekt innerhalb eines Frames.
  9. Rendern, zusammenstellen, übergeben.
    • cd film && node render.mjs --from 0 --to <frames-1> --scale 1.5 --workers 2 --jpg --out ../render/frames.
    • bash tools/assemble.sh schreibt out/<Titel>.mp4 und out/contact_sheet.jpg und misst das Ergebnis. Es weigert sich zu laufen, wenn ein abgestürzter Worker einen leeren Frame hinterlassen hat.
    • Wenn earshot installiert ist: bash audio/tools/es.sh critique out/<Titel>.mp4, Ziel „launch-grade“.
    • Schreibe das README.md des Films: Logline, Messungen, alle beibehaltenen Schnitte und warum, die verwendeten Sounds und ehrliche Schwachstellen. Behaupte niemals, der Film sei gut: Du kannst ihn nicht in voller Geschwindigkeit sehen oder hören. Liste, was der Benutzer mit Auge und Ohr prüfen soll, und warte dann auf seine Überprüfung.

Unverhandelbar (Details in reference/rules.md)

  • Es liest sich auch ohne Ton. Zeige das Problem vor der Lösung. Zeige jede Zeile auf dem Bildschirm, während sie gesprochen wird.
  • Keine wörtlichen Metaphern; erkläre mit einem klaren 2D-Diagramm.
  • Requisiten sind auf einen Blick lesbar. Verwende mittlere und weite Einstellungen mit ganzen Figuren, halte das Untertitelband (62–78 % der Höhe) frei, und niemand wird am Rand abgeschnitten.
  • Gleicher Ort bedeutet eine Kamerafahrt, ein neuer Ort bedeutet eine Überblendung, und ein Schnitt bleibt nur mit einer angegebenen Begründung.
  • Jede sichtbare Aktion hat einen hörbaren Ton, und die Erzählung bleibt während des gesamten Films klar.
  • Nur originale Figuren, Geschichten und Welten. Kopiere niemals Figuren oder das Aussehen einer bestehenden Serie und verwende niemals den Beispiel-Film wieder.
  • Arbeite nur innerhalb des eigenen Filmordners. Installiere dort alles frisch und verlinke nie auf ein anderes Projekt.

Verwandte Skills