Communitygithub.com

Animiertes Video

Animierte Videos in Code erstellen mit Remotion (React, SVG, three.js): Erklärfilme, Charaktergeschichten, Motion Graphics, kinetische Typografie, Papiercollage und animierte Infografiken, in 2D oder 3D, basierend auf einem Skript oder Voiceover, in jedem Seitenverhältnis. Verwenden, wenn ein Skript animiert, ein animiertes Video oder Reel oder Motion Graphics erstellt werden sollen. Nicht geeignet für die Bearbeitung von Kameramaterial (video-edit) oder KI-generierten Clips (higgsfield-*).

Was ist Animiertes Video?

Diese Skill ermöglicht die Erstellung von vollständig animierten Videos, bei denen jedes Bild programmatisch in Code erzeugt wird – entweder prozedural gezeichnet oder aus genehmigten Quell-Assets deterministisch gerendert. Sie eignet sich für Erklärfilme, Charaktergeschichten, Motion Graphics, kinetische Typografie und animierte Infografiken in 2D oder 3D und basiert primär auf einem Skript oder Voiceover. Die Skill ist für den Einsatz mit Remotion (React, SVG, three.js) optimiert und unterstützt verschiedene Seitenverhältnisse. Wichtig: Diese Skill ist nicht für die Bearbeitung von Kameramaterial oder KI-generierten Clips gedacht, sondern für rein codebasierte Animationen. Der Workflow umfasst sechs Schritte: 1) Finden der Bilder und des Konzepts in einem frischen Brainstorm-Agenten, 2) Festlegen des Formats und Stils, 3) Erstellen der Audio-Spur mit Wortzeitmarken, 4) Skelett und Storyboard mit Keyframe-Board, 5) Erstellen der Assets und Shots, 6) Überprüfung und Auslieferung inklusive Stummschalt-Test. Die Besonderheit liegt in der iterativen, kollaborativen Arbeitsweise: Jedes Bild muss die Frage des Skripts halten, die Erklärung durch das Bild erfolgt, die Stimme bestätigt, und Feedback darf die Vorstellungskraft nie einschränken. Die Skalierung der Produktion reicht von kurzen, einfachen Stücken bis zu komplexen, mehraktigen Filmen mit mehreren Agenten.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/CrissAlvarezH/ai-reel-gen-app/tree/HEAD/.claude/skills/animated-video

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Animiertes Video?

In einem Reel-Studio-Arbeitsbereich: zuerst die reel-studio-Skill (.claude/skills/reel-studio/SKILL.md) und die Stil-Skill des Videos (styles/<id>/SKILL.md) laden. Diese haben Vorrang vor den nachfolgenden Standardeinstellungen: Der Stil ist bereits pro Video ausgewählt (biete keine anderen Looks oder eine Runde von Stil-Frames an), die Erzählung erfolgt über ElevenLabs (Stimme aus Reel Studio → Ajustes → Voz) mit Zeitangaben aus tools/el_words.py (nicht Whisper), neue Projekte beginnen mit der Vorlage des Stils (nicht templates/remotion-film/). Die Bildersuche ist frei im gesamten Web; Ajustes → Imágenes steuert nur optionale API-Integrationen und Bildgenerierung. Verwende diese Skill für die Methode: Bildideen sammeln, Konzeptfreigabe, Board, Stummschalt-Test, Überprüfung.

Eine Aufgabenbeschreibung in ein fertiges animiertes Video verwandeln, bei dem jedes Bild in Code erstellt wird: entweder prozedural gezeichnet oder aus genehmigten Quell-Assets deterministisch gerendert. Filmmaterial von Bild- oder Videogeneratoren ist ein separater Weg (Schritt 2). Lies zuerst ~/.animated-video/profile.md, falls es existiert: die vom Benutzer angegebenen Präferenzen haben Vorrang vor den hier genannten Standardeinstellungen.

Was den Film ausmacht

Sei so einfallsreich, wie es die Idee erlaubt. Suche für jedes Konzept, das der Film zeigt, nach dem überraschendsten Bild, das es dennoch verständlich macht. Verrückte, unmögliche, lustige oder schöne Ideen sind willkommen, und jede wird an einem Test gemessen: Versteht der Betrachter den Mechanismus schneller oder erinnert er sich länger daran als mit dem wörtlichen Bild? Das wörtliche Bild ist der Standard, der nur gewinnt, wenn nichts Besseres gefunden wird. Genauigkeit prüft eine Idee; eine Metapher, die die Erzählung untermauert, bleibt.

Das Bild erklärt; die Stimme bestätigt. Bei ausgeschaltetem Ton lernt der Betrachter jeden Schritt aus dem, was auf dem Bildschirm passiert: Der Mechanismus wird als Ursache und Wirkung dargestellt (schneiden, senden, treffen, kopieren), die Idee jeder Zeile ist durch ihr Wort sichtbar, wobei Beschriftungen das Ereignis unterstützen, nicht ersetzen (Bewegung).

Das Bild hält die Frage offen. Ein Skript hält eine Frage offen und beantwortet sie in Schritten. Der erste Bildausschnitt wirft diese Frage auf, und kein Bild, keine Beschriftung und kein Titel zeigt die Antwort, bevor die Erzählung sie erreicht: Ein Betrachter, der die Antwort bereits gesehen hat, hat einen Grund zu gehen.

Farbe lenkt das Auge. Entscheide früh, was jede Farbe bedeutet: Das, dem der Betrachter folgt, trägt die Akzentfarbe und ist das hellste, am stärksten gesättigte Element im Bild, und eine Farbe behält ihre Bedeutung für den gesamten Film. Gib jeder anderen Rolle ihre eigene Farbe und lass alles, was keine Bedeutung trägt, ruhig bleiben. Um einen Referenz-Look zu treffen, entnimm seine Farben aus den Einzelbildern und gib den Animatoren die Zahlen: Lichter, Nebel und Grading treiben eine benannte Farbe ins Grau.

Design immer neu für jede Aufgabenbeschreibung. Stilpakete, Teile und frühere Filme sind Startpunkte. Ein früherer Film, der dem Benutzer gefallen hat, setzt die Messlatte für Fertigstellungsgrad und Tempo, niemals für Ideen, Geräte oder den Look.

Feedback grenzt ein Bild ein, niemals die Vorstellungskraft. Wenn der Benutzer eine Idee ablehnt, notiere, was an dieser Idee falsch war (sie hat verwirrt, wirkte erzwungen, sah billig aus) und finde eine bessere Idee jeglicher Art. Es wird erst dann zu einer Regel über eine ganze Kategorie, wenn der Benutzer sie als solche formuliert, und die Aufgabenbeschreibungen, die du für andere Agenten schreibst, enthalten nur die vom Benutzer genannten Regeln.

Frage mit einer Empfehlung, sodass „Ja“ eine vollständige Antwort ist. Sage einmal zu Beginn, dass die Skill am besten mit dem stärksten verfügbaren Modell bei hohem Aufwand funktioniert.

Produktion an das Stück anpassen

  • Kurz oder einfach: Ein Agent kann es bewältigen, wobei Standbilder überprüft werden. Das Brainstorming geht dennoch an einen neuen Agenten und der Stummschalt-Test wird trotzdem durchgeführt.
  • Länger oder mit vielen Akten: Behalte die Bilder, das Konzept und den Look bei einem Agenten, bis der Benutzer sie genehmigt, dann parallelisiere den Aufbau, wie es passt. Das Board fixiert die Idee jedes Beats; wer animiert, entscheidet, wie es sich bewegt, und schlägt ein besseres Bild vor, wenn er eines sieht. Behalte ein Cue-Blatt für den gesamten Film, sodass der Ton beabsichtigt bleibt. Bei langen Läufen sende einen Status mit einem Standbild und der verbleibenden Gesamtzeit; lasse Agenten Statuszeilen mit der Maschinenuhr stempeln, da selbst gemeldete Zeiten um Stunden abweichen können.
  • Eine Überarbeitung eines fertigen Films: Frage, welche Abschnitte neu gebaut werden sollen, empfehle die schwächsten; behalte den Rest und spleiße die neuen Teile ein.
  • Ein Einsatz in der Zeitleiste eines anderen (eine animierte Einstellung innerhalb einer Kamera-Bearbeitung, die video-edit gehört): Einsätze. Wenn unklar ist, wem die Zeitleiste gehört, frage einmal nach.
  • Ein Moderator vor der Kamera im Film: Compositing vor der Planung dieser Einstellungen.

1. Finde die Bilder und das Konzept

Wähle den Kern in Regie: eine Geschichte (jemand, der etwas will) oder eine Erklärung (wie etwas funktioniert, warum, was eine Zahl bedeutet). Die Bilder stammen von einem neuen Brainstorming-Agenten, der keine Produktionsregeln sieht, bewertet von einem separaten Auswähler (finde die Bilder); dann Konzepte, die sich wirklich unterscheiden, deine Empfehlung und das ausgewählte als getaktetes Beat-Blatt mit dem Bild jedes Beats. Ein fertiges Skript legt die Worte fest, nicht die Bilder. Wenn die Video-Skript-Skill installiert ist, überprüfe die Erzählung anhand ihrer Checkliste.

Hole die Genehmigung des Benutzers für das Konzept und seine Bilder ein, bevor du mit dem Bau beginnst, auch bei kurzen Stücken.

2. Lege das Format und den Stil fest

  • Wenn die Anfrage das Format und den Stil benennt, bestätige es in einer Zeile. Andernfalls zeige Stile, die sich wirklich unterscheiden, als Stil-Frames desselben Beats (Stile) und lass einen auswählen; lies das Paket des ausgewählten Stils, wenn es eines hat.
  • Frage nach dem Weg und seinen Kosten: In Code erstellt ist kostenlos pro Einstellung und konsistent; KI-Video kostet pro Clip und driftet.
  • Suche Fotos der realen Objekte, Orte und Schnittstellen, die der Film zeigt. Wenn eine reale Person vorkommt, frage, wo ihr Filmmaterial liegt, und ziehe Frames daraus.

3. Erstelle die Audio-Spur

Jeder Beat orientiert sich an der Erzählung (ohne eine solche am Musikbett, das zuerst gewählt wird). Bevorzuge die Aufnahme des Benutzers; solange diese nicht existiert, baue auf Platzhalter-Wortzeitmarken auf, beschriftet. templates/remotion-film/align.py liefert Wort-Zeitstempel und eine Lautstärkehüllkurve; leite jedes Cue mit cue("Phrase") ab, sodass ein neues VO den Film neu timt. Untertitel sind handgeschriebene Sinneinheiten, die mit dem Transkript abgeglichen werden. Musik und Effekte werden mit dem ersten Schnitt geliefert: die Dateien des Benutzers, die Asset-Bibliothek oder Samples auf der Festplatte vor der Synthese (templates/parts/audio/designed.py), und alles Synthetische wird gekennzeichnet.

4. Skelett und Board

Kopiere templates/remotion-film/, verdrahte Akte, Untertitel und Audio und rendere Standbilder über die Zeitleiste (Pipeline). Unbestätigte Fakten bleiben außerhalb des Films.

Zeige dem Benutzer ein Keyframe-Board vor der vollständigen Animation: ein Standbild pro Beat im gewählten Stil, erstellt in den echten Szenendateien, sodass es in die fertigen Einstellungen übergeht. Genehmigte Standbilder zeigen nicht, ob etwas zwischen ihnen passiert; wenn Bedeutung in der Bewegung liegt, zeigt ein Animatic (grobe Formen, die die Beats über dem VO ausführen) dies kostengünstig.

5. Erstelle die Assets und Einstellungen

Durchsuche zuerst die Asset-Bibliothek, wenn sie installiert ist. Wiederkehrende Teile halten in jeder Größenordnung, die die Geschichte braucht: gezeichnete Charaktere gemäß Charaktere; Teile enthält einen Globus, ein iMessage-iPhone, entworfene Sounds, ein Realismus-Kit und ein Bewegungs-Kit für dichte three.js-Bewegungen. Gestalte das, was du nimmst, neu.

Wenn mehrere Agenten animieren, gib ihnen eine schriftliche Vorgabe zu Look und Balken, entnommen aus dem Stilpaket und den Anker-Frames (dem Referenzfilm-Frame für jeden Beat oder dem Board). In jedem Stil ist ein reales Objekt, Interface, Unternehmen oder Ort erkennbar es selbst, und ein Ersatz erhält die gleiche Sorgfalt. Leite die Soundereignisse jedes Akts aus den Konstanten ab, die ihn zeichnen, sodass das Verschieben eines Beats auch seinen Sound verschiebt.

6. Überprüfung und Auslieferung

Agenten sehen Frames, keine Wiedergabe: Überprüfe Bewegung als Streifen aufeinanderfolgender Frames (zeitliche Prüfungen) und Audio durch Messung, und sage, was nur gemessen wurde. Wenn du deinem eigenen Auge nicht trauen kannst, lass unabhängige frische Agenten bewerten (Überprüfung); höre auf zu iterieren, wenn eine Runde wenig bringt oder das wichtigste Problem den Benutzer betrifft.

Bevor der erste vollständige Schnitt zum Benutzer geht, führt ein frischer Bewerter den Stummschalt-Test daran durch; behebe, was nicht nachvollziehbar ist. Ein abgelehnter gesamter Schnitt beginnt von den Bildern neu (Neustart).

Rendere das Finale (render.sh normalisiert die Lautstärke; lange Filme in Teilen) und überprüfe den ersten Frame, die letzte Sekunde und die Lautstärke. Melde den Pfad, offene Probleme, übersprungene Prüfungen, verwendete Bilder und alles Synthetische oder Erfundene. Committe jede Version im Git-Repo des Projekts. Wenn die Asset-Bibliothek installiert ist, schließe ihren Katalog.

Auf Wunsch reflektiere mit dem Reflexionsprotokoll.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

CrissAlvarezH/new-style

Create a new visual style for the creator's videos in a Reel Studio workspace (styles/<id>/style.json): interview him for its name, feel, colours and what each one means, fonts, motion, where pictures come from, reference links and images, then write the style so it shows in Estilos and new videos can use it. Use when he asks for a new style or presses "Nuevo estilo" on the Estilos page.

CrissAlvarezH/persona-hablando

The "Persona hablando + animaciones" format of a Reel Studio video — the creator talks to camera in his own recording; you transcribe it, agree the cuts with him (pauses, flubs, retakes), cut it, and lay the video's style animations over or between his shots. Use for any video whose format.txt says persona-hablando.

CrissAlvarezH/reel-studio

How a narrated explainer video is made in a Reel Studio workspace, in any visual style — script, pictures, voice, images, build, board, sound, mute test, render — following the creator's settings from the studio (profile, format, voice, image sources). Use for any new or revised video in a project's videos/ (projects/<id>/videos/). The video's style adds its own skill (styles/<id>/SKILL.md) for the look and the Remotion kit; LESSONS.md has what past videos taught.

CrissAlvarezH/video-script

Write short-form video scripts that hold viewers, using the creator's own video analytics. Use when choosing the hook of a chosen idea, writing or tightening a script before filming (talking-head or narrated explainer), or turning a posted video's insights into lessons. Coming up with ideas is content-ideas'.

Verwandte Skills