Animiertes Erklärvideo

Animator

Du erstellst Animation: gezeichnete Bilder, die sich in Remotion bewegen. Du erstellst kein Filmmaterial.

Geltungsbereich

• Rufe kein Veo, Kling, Sora oder ein anderes Text-zu-Video-Modell in dieser Fähigkeit auf. Jeder Frame wird in Remotion aus Bildern, SVG und Code zusammengesetzt.
• Wenn die Anfrage echtes Filmmaterial, fotorealistische Aufnahmen oder einen Filmtrailer erfordert, stoppe und sage, dass diese Fähigkeit dies nicht kann. Wechsle nicht stillschweigend zu einem Videomodell.

Die Geschmacksregeln

Jede Regel stammt aus einer Version, die abgelehnt wurde.

1. Szenen, nicht Reden. Zeige jeden Punkt als inszenierte Szene: Die Charaktere agieren, die Requisiten bewegen sich, der Ort ändert sich. Zwei Köpfe, die vor einem Hintergrund reden, sind ein abgelehntes Ergebnis.
2. Dynamisch. Bewege die Kamera in jeder Einstellung. Ändere oft die Einstellungsgröße: Totale, Halbtotale, Nah. Schneide auf die Aktion. Keine Einstellung bleibt länger als etwa 4 s statisch.
3. Elegante Charaktere. Kleide sie dem Schauplatz entsprechend ein: ein perfekter Schnitt, guter Stoff, geschmackvolles Detail. Niemals generische Clip-Art-Personen.
4. Professionelle, anständige Verarbeitung. Es muss aussehen wie eine Studio-Animation. Keine Spielereien, keine billigen Effekte, kein Meme-Stil.
5. Tiefe vor Breite. Ein gut gezeigter Punkt ist besser als sechs Punkte in einer Liste. Wenn das Thema viele Punkte hat, schlage ein Video pro Punkt vor.
6. Zwei Stimmen in einem Dialog, wenn das Thema es zulässt: Ein Charakter fragt, der andere antwortet. Frage den Benutzer, welche Stimme welche Rolle spricht. Klone niemals die Stimme einer echten Person ohne deren schriftliche Zustimmung.
7. Für ein Modell oder einen Prozess, mache den schematischen Schnitt. Frage nicht nach welchem Schnitt. Reine SVG-Formen in der Markenpalette, keine Figuren; die Erzählung trägt die Geschichte. Eine Geschichte über Menschen bleibt ein Charakterschnitt.
8. Die Stimmung folgt dem Thema. Eine verspielte App bekommt ein verspieltes Video: hüpfende Bewegung, überschwingendes Easing, Karten, die auftauchen. Ein ernstes Thema bekommt eine zurückhaltende Behandlung. Lies das Produkt, bevor du die Stimmung wählst.

Wo die Dinge sind

Was	Wo
Projektverzeichnis	~/explainer/<name>/. Überschreibe das Stammverzeichnis mit EXPLAINER_ROOT. Ein Ordner pro Projekt; eine Vorschau und das vollständige Video sind zwei Kompositionen desselben Projekts
Ordnerstruktur	SCHEMA.md neben dieser Datei. in/ Eingabe, assets/ Master-Dateien, public/ Render-Eingabe, work/ Entwürfe, out/ Finale
Starterset	starter/ neben dieser Datei: eine minimale Remotion-Komposition, die ein Storyboard abspielt, sowie das Marken-Kit und die Bewegungshelfer
Skripte	scripts/ neben dieser Datei. Führe sie vom Projektstammverzeichnis aus aus. new-project.sh kopiert das Starterset und die Werkzeuge in ein neues Projekt
Medienerzeugung	adapters/ neben dieser Datei und ADAPTERS.md für den Vertrag. Setze GEN_IMAGE, GEN_SPEECH, GEN_SFX, CUTOUT und GEN_MUSIC auf deine eigenen Befehle
Markenprofile	brands/<name>/ neben dieser Datei. brands/example/ ist ein neutrales Profil zum Kopieren

Setze die Werkzeugpfade einmal pro Shell oder in der .env-Datei des Projekts:

SKILL=~/.claude/skills/explainer-video
export GEN_IMAGE="python3 $SKILL/adapters/gen-image.py"
export GEN_SPEECH="python3 $SKILL/adapters/gen-speech.py"
export GEN_SFX="python3 $SKILL/adapters/gen-sfx.py"
export CUTOUT="python3 $SKILL/adapters/cutout.py"
export GEN_MUSIC="python3 $SKILL/adapters/gen-music.py"

Vorgehensweise

1. Drehbuch und Storyboard

1. Schreibe storyboard.json. Gib für jeden Beat den Sprecher, die Zeile, die Szene (Ort, Aktion, Requisiten), die Einstellungsgröße und die Kamerabewegung an. Siehe SCHEMA.md für die Beat-Felder.
2. Stelle sicher, dass jeder Punkt mindestens eine Szene hat, die ihn ohne Worte zeigt.
3. Frage den Benutzer, ob das Video Untertitel benötigt. Wenn ja, frage welche Art: ins Bild eingebrannt, oder eine .srt-Datei neben dem Video. Erstelle die Untertitel aus dem Sprachskript, nicht aus einem Transkript: Das Skript hat die korrekte Rechtschreibung.
4. Frage den Benutzer, welche Stimme welche Rolle spricht. Biete eine kostenlose Stimme für die Vorschauen und eine kostenpflichtige, ausdrucksstarke Stimme für den Endschnitt an.
   • Zuerst kostenlose Stimme. Vertone jede Vorschau und den ersten vollständigen Schnitt mit der kostenlosen Stimme. Behalte das Geschlecht der Rolle bei. Erzeuge die kostenpflichtige Stimme erst, nachdem der Benutzer den kostenlosen Stimmenschnitt genehmigt hat. Behalte das tag jedes Beats im Storyboard für den kostenpflichtigen Durchlauf.
5. Frage den Benutzer, welche Marke das Video verwendet: ein Profil aus brands/<name>/, das eigene Aussehen des Projekts oder keine. Ein Video ohne offensichtliche Marke braucht trotzdem die Frage. Schreibe die Antwort in in/brief.md, damit die Karten und die Palette vom ersten Render daran angepasst werden.
6. Sende das Storyboard an den Benutzer. Generiere keine Bilder, bevor er es genehmigt hat.

2. Charaktere

1. Schreibe eine feste Beschreibung pro Charakter: Gesicht, Haare, Körper, Kleidung. Kopiere sie Wort für Wort in jeden Bild-Prompt. Halte sie in in/characters.md fest.
2. Erzeuge die Basiszeichnung mit gen-image.py auf einem flachen, einfarbigen Hintergrund. Füge "kein Bodenschatten, kein Leuchten" zum Prompt hinzu.
3. Erzeuge die aktiven Posen ausgehend von dieser Basis mit --input: gehen, sitzen, zeigen, reagieren, gestikulieren, drehen. Eine Szene braucht Posen, nicht nur eine stehende Figur.
4. Erstelle die Mundzustände (geschlossen, offen, weit geöffnet) und den Lidschlag. Füge nur die geänderte Region in die Basis ein. Verwende niemals ein ganzes bearbeitetes Bild: Das Gesicht driftet.
5. Schneide jede Pose mit cutout.py aus. Verwende isnet-anime für Zeichnungen und u2net für Fotos.
6. Platziere alle Posen auf derselben 1024 px Leinwand, so dass ein Positionswechsel keinen Offset benötigt.
7. Erstelle ein Kontaktblatt aller Posen (ImageMagick montage). Öffne es und suche nach einer Pose, die sich in Gesicht, Kleidung oder Proportionen unterscheidet. Generiere diese Pose neu. Maximal 3 Versuche pro Bild.

Echte Personen: zeichne oder animiere keine echte Person ohne deren Einwilligung. Frage zuerst.

• Schneide das Gesicht mit cutout.py --model u2net aus. Setze es nicht in einen Kreis.
• Helle Haare auf hellem Hintergrund verschwinden im Ausschnitt. Wenn das passiert, verwende ein anderes Foto.
• Blende den Hals und die Schultern unter dem Kinn aus und zeichne den Hals mit dem Körper. Ein zugeschnittenes Foto endet dort mit einer harten Kante.
• Zeichne die Körper im Code (SVG-Gelenke). Dann ist jede Pose exakt und kein Gesicht kann driften.

3. Szenen und Requisiten

1. Erzeuge jeden Ort als Hintergrund (--size 1536x1024) im gleichen Stil wie die Charaktere, ohne Personen.
2. Erzeuge die Requisiten, die als separate Ausschnittsebenen agieren: ein Telefon, eine Eintrittskarte, eine Tasse, ein Vorhang.
   • Überprüfe jeden Bildschirm, jedes Gerät und jede Verpackung auf Markenzeichen und Text. Ein "Keine Logos"-Prompt verhindert sie nicht. Entferne ein Zeichen mit ImageMagick. Verwende keine Bild-zu-Bild-Bearbeitung: Sie entfernt den falschen Teil und behält das Zeichen.
3. Erzeuge Vordergrundebenen für Parallaxe, wo es hilft: Sitzreihen, eine Balustrade.
4. Wenn das Projekt ein Markenprofil hat, verwende es. Nimm die Palette aus brand.css, das Logo und den Slogan aus images/ und die Schriftarten aus fonts/. Erfinde keine Markenfarben. Lese die NOTES.md des Profils für seine Markenform.
5. Wenn das Projekt kein eigenes Grafikicon hat, verwende ein MDI-Icon (@mdi/js, ein 24×24 Pfad). Zeichne kein Icon von Hand und verwende keine Emojis. Wenn die Website des Projekts bereits ein MDI-Icon für eine Sache verwendet, verwende dasselbe Icon im Video.

4. Stimmen

1. Generiere jede Zeile mit gen-speech.py und derselben --voice pro Sprecher.
   • Bis der Benutzer den Schnitt genehmigt, verwende die kostenlose Stimme des gleichen Geschlechts. Die unten stehenden Notizen zu den kostenpflichtigen Modellen gelten für den kostenpflichtigen Durchlauf.
   • Führe scripts/regen-voices.py <model> aus. Es sendet eine Zeile nur dann an die API, wenn sich ihre Anfrage geändert hat (Text, Stimme, Modell, Einstellungen oder ein benachbarter gleicher Sprecher), sodass die genehmigten Aufnahmen erhalten bleiben. Generiere nicht alle Zeilen neu, um eine zu korrigieren.
   • Um eine Zeile absichtlich neu zu würfeln, füge --fresh <beat or speaker> hinzu. Jede Aufnahme wird in assets/voice/takes/ aufbewahrt. Um zu einer früheren Aufnahme zurückzukehren, verwende --restore <take>.
   • Ein Projekt, das vor dem Cache erstellt wurde, hat keinen voice_key pro Beat. Führe es einmal mit --adopt aus, sonst generiert der erste Durchlauf jede Zeile erneut.
   • Verwende bei einem ausdrucksstarken Modell ein englisches Audio-Tag vor jeder Zeile, z.B. [herzlich] und stelle die Stabilität, Ähnlichkeit, den Stil und die Geschwindigkeitsregler des Modells ein. Ohne sie klingt die Zeile flach. Lasse das Tag außerhalb von line, da der Untertitel line zeigt: Setze es in das Beat-Feld tag und sende es vor den Text.
   • Verwende keine Audio-Tags mit einem Modell, das sie nicht dokumentiert. Es könnte sie laut vorlesen.
   • Liste für jede Stimme zuerst die Namen, die fremd aussehenden Wörter und die Buchstabencodes auf. Eine Stimme liest sie so, wie es ihre eigene Sprache tun würde, selbst mit einem gesetzten Sprachcode. Versuche zuerst eine phonetische Schreibweise des Wortes, dann inline IPA. Mache drei Takes pro Schreibweise und einen Kontroll-Take und lasse den Benutzer nach Gehör wählen.
   • Schreibe keinen Ton in Großbuchstaben. Eine Stimme könnte Großbuchstaben als einzelne Buchstaben lesen. Schreibe den Ton stattdessen als Wort.
   • Ein neuer Take verschiebt jedes Wort. Verknüpfe die Frame-Offsets innerhalb des Beats (Kamera, Lichter, Soundeffekte) mit den Anfängen der Untertitelspannen, nicht mit buchstäblichen Frames. Nach einem neuen Take, hole die Wortzeiten aus einem Sprach-zu-Text-Durchlauf und setze nur die Spannenanfänge zurück.
2. Führe scripts/level-voices.py aus. Es pegelt jede Zeile nach Sprachlautstärke. Spitzenpegelung ist nicht ausreichend: Die Zeilen können sich über 6 dB erstrecken.
   • Eine Version in einer anderen Sprache: Behalte die Szene und erzeuge eine zweite Komposition aus derselben Quelle. Gib der neuen Sprache ihr eigenes Storyboard mit denselben Beat-IDs, ihren eigenen Sprachanreicherungen, Hüllkurven und Musik-Schnitt (STORYBOARD, VOICE_DIR, MUSIC in check-audio.py).
   • Pegele die neuen Stimmen auf den Sprachpegel des genehmigten Mixes, nicht auf dasselbe Ziel.
3. Erstelle die Mundhüllkurven und bündele sie mit scripts/gen-envelopes.mjs.

5. Animation in Remotion

• Inszenierung: Spiele jede Szene als Aktion. Die Charaktere gehen herein, setzen sich, reagieren und benutzen die Requisiten. Bewege Requisiten auf ihrer eigenen Ebene. Eine Korrektur fügt den fehlenden Teil hinzu; behalte die Aktion, die die Ursache zeigt.
• Kamera: Fahre heran, schwenke oder fahre in jeder Einstellung mit. Verwende Parallaxe zwischen dem Hintergrund, den Charakteren und dem Vordergrund. Begrenze jede Kamerabewegung so, dass jede Ebene, die den Bildausschnitt füllen muss, in ihm auf ihrer Parallaxentiefe bleibt, einschließlich Rotation. Eine Ebene mit einer Tiefe < 1 bewegt sich weniger als die Kamera: Ein Herauszoomen oder ein Schwenk, der außermittig endet, legt den Bildrand frei, und ein Streifen des Bodens wird sichtbar.
• Tiefe: Lege den Boden und alles, was darauf steht (Stühle, Personen, Requisiten), auf eine Ebene in einer Tiefe. Zwei Tiefen bewegen den Boden und die Stuhlbeine bei jeder Kamerabewegung auseinander, und die Stühle schweben. Ein müßiges Nicken rotiert den Oberkörper oberhalb der Sitzlinie, nicht den Stuhl.
• Bewegung: Verwende Federn mit einem kleinen Überschwinger. Verwende Antizipation vor einer Bewegung. Verwende niemals einen harten Wechsel zwischen zwei Posen.
• Ruhezustand: Gib Atem, Schwanken und Blinzeln ihre eigenen Perioden und Phasen.
• Mund: Steuere ihn über die Hüllkurve, mit einem minimalen Halten von 3 Frames (mouthStates in der Starterset-motion.ts).
• Erzähler außerhalb des Bildes: Zeige einen Wellenform-Orb, der der Hüllkurve folgt, nicht das Gesicht des Erzählers (NarratorOrb.tsx im Starterset).
• Licht: Verwende Licht als Story-Werkzeug. Zum Beispiel: Hauslichter dimmen, ein Telefonbildschirm leuchtet auf einem Gesicht.
• Übergänge: Wähle einen pro Schnitt (Match Cut, Wipe, harter Schnitt). Verwende nicht eine einzige Überblendung für alle Schnitte.
• Ein Charakter bleibt ein Objekt über einen Schnitt hinweg. Wenn sich ein Charakter von einer Einstellung zur nächsten bewegt, trage ihn auf dem Bildschirm von seinem alten Platz zu seinem neuen. Ein Charakter, der auf der einen Seite geht und auf der anderen hereinkommt, wirkt wie ein zweiter Charakter.
• Eine Änderung, die der Zuschauer erkennen muss, bekommt ihre eigene Pause in der Stimme. Teile den Beat und füge 1,5–2 s Stille danach ein. Inszeniere die Änderung in dieser Pause: markiere den alten Zustand, dimme ihn, überblende, hebe dann den neuen Zustand in der nächsten Zeile hervor.
  • Setze die Pause an einen Satzbruch, niemals innerhalb einer Phrase. Finde die Lücke anhand des Pegels: nimm den längsten Lauf von 20 ms Fenstern unter etwa −38 dB (relativ zum Peak) nach dem Wort und schneide in seiner Mitte. Verwende nicht die Lücke aus Sprach-zu-Text-Wortzeiten: Ihre Kanten können 0,5 s abweichen.
• Untertitel und Karten mit Kernpunkten: Halte sie kurz. Eine Karte unterstützt eine Szene. Sie ersetzt sie nie.
• Der Rahmen – jedes Video hat ihn:
  1. Titelkarte zu Beginn, etwa 3 s: das Logo (falls zutreffend), der Videotitel und eine kurze Zeile. Sie kann stumm sein oder nur Musik haben.
  2. Abschlussfolie, etwa 4 s: das Logo (falls zutreffend), die Behauptung oder der Aufruf zum Handeln und die URL. Sie kann stumm sein.
  3. Eckenlogo: ein kleines Logo in der unteren rechten Ecke für das gesamte Video zwischen den beiden Karten. Blende es nach der Eröffnungskarte ein und vor der Abschlussfolie aus. Halte es fern von Gesichtern und Schlüsselelementen.
  4. "Falls zutreffend": Ein Marken-, Produkt- oder Unternehmensvideo hat ein Logo. Ein persönliches Video hat kein Firmenlogo. Es bekommt trotzdem die Titelkarte und die Abschlussfolie.
  5. Um den Rahmen zu einem fertigen Video hinzuzufügen, nehme die Stimme nicht neu auf. Setze die bestehende Komposition in eine <Series> zwischen die beiden Karten. Die Karten fügen am Anfang und am Ende Stille hinzu, und das ist akzeptabel.
• Marke zuerst, immer. Wenn das Projekt ein Markenprofil hat, verwende es: die Karten aus dem Profil, die Palette aus brand.css, das Logo und das Zeichen als echte Assets. Wenn das Projekt echte App-Screenshots hat, verwende sie als Ebene: Ein echter Bildschirm ist besser als eine gezeichnete Annäherung eines Bildschirms. Nur die Personen, Orte und Requisiten werden gezeichnet. UI, Logos und Typografie stammen von der Marke. Wenn das Profil eindeutig veraltet gegenüber der Live-App ist, sage dies und verwende die App.

6. Überprüfe das Bild

1. Rendere Standbilder mit npx remotion still an den Schlüsselframes.
2. Öffne die Standbilder. Suche nach einem Gesicht, das von einer Karte oder einem Untertitel verdeckt wird, und nach einem Charakter, der vom Bildrand abgeschnitten wird. Eine optionale Zweitmeinung: ADAPTERS.md beschreibt einen REVIEW_IMAGE Befehl. Behandle sein Urteil als Hinweis, nicht als Hindernis, und bestätige jeden Befund auf dem Frame.
3. Rendere eine Stichprobe von etwa 20 s mit einer Szene, einem Posenwechsel, einer Kamerabewegung und einem Dialogwechsel.
4. Extrahiere Frames um jeden Posenwechsel …

… [truncated for translation]