Communitygithub.com

concept-reel: Konzept-Erklärclips ohne Sprecher

Erstellt oder überarbeitet sprecherlose, untertitelte 1080p-Konzeptclips mit Canvas, Playwright und FFmpeg: inhaltsgetriebene Storyboards, 15 Motion-Design-Stile, deterministische Animation, Vorschau-Kontaktbögen und ereignissynchrone Soundeffekte.

Was ist concept-reel: Konzept-Erklärclips ohne Sprecher?

Schritt 3 des Rezepts Produkt-Demovideo (das Warum erklären), aus Jogzh/concept-reel (erstellt am 2026-10-13). Die README zeigt Stilvorschauen und WebP-Beispielclips. Zuschauer sollen das Motiv erkennen, die Veränderung sehen und die Ursache verstehen; Zahlen kommen aus Berechnungen, Fakten tragen Quellen, gerendert wird raw.mp4 → Event-Soundspur → final.mp4.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add Jogzh/concept-reel

In Ihrer bevorzugten KI fragen

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

Dokumentation

Concept Reel · Konzeptfilm

Lassen Sie ein Bild einen Satz erklären: Das Publikum erkennt das Subjekt, sieht die Veränderung, versteht Ursache und Wirkung. Lieferbar sind lauffähiges Projekt, Storyboard und Faktenquellen sowie eine Vorschau oder das Endprodukt im angefragten Umfang.

Dieses Skill-Verzeichnis enthält die gemeinsame Engine; Projekte können im Benutzerprojekt erstellt werden. Die Pfade engine/, scripts/ beziehen sich auf dieses Skill-Verzeichnis und werden bei der Verwendung durch die tatsächlichen Pfade ersetzt. Die feste Bildgröße beträgt 1920×1080 im Querformat; standardmäßig 30 fps, bei neuen Projekten kann die Bildrate eingestellt werden.

Lesen nach Aufgabe

Gestaltungsprinzipien

  • Zuerst entscheiden, was das Publikum verstehen soll, dann Subjekt und Aktion wählen. Geometrische Formen können für Diagramme und abstrakte Mengen verwendet werden; reale Objekte müssen erkennbare Formen haben.
  • Änderungen im Untertitel müssen auf dem Bildschirm stattfinden. Zahlen stammen aus Berechnungen; Hinweise, Geltungsbereiche und unsichere Tatsachen klar kennzeichnen; wichtige Faktenquellen dokumentieren.
  • Nur einen Hauptfokus pro Szene. Untertitel können stabil sein, Titel, Schlüsselwörter und Tags je nach Subjekt und Leerraum layouten.
  • Schriftart, Farbbedeutung und Bewegungsgefühl einheitlich; Schwerpunkt der Aufnahme, Größe und Informationsdichte nach Inhalt wählen. Stilvorgaben sind Ausgangspunkte, Farbpalette und Bewegung anpassbar; ein Hauptstil und ein Hilfsstil kombinierbar.
  • Nach vollständiger Anzeige der Untertitel die Lesezeit berechnen; für Betrachten und Denken zusätzliche Zeit einplanen. Schlussfolgerung zuerst anhalten, dann abtreten.
  • Animationen werden durch t bestimmt. Zufallszahlen mit festem Seed verwenden, nicht auf Echtzeituhr, Timer oder über Frames hinweg kumulierte Zustände.
  • Originalbeispiele dienen dem Verständnis der Umsetzungsweise; neue Filme sollten sich auf das eigene Thema, den Text und das Storyboard konzentrieren. Quellen- und Materialgrenzen siehe NOTICE.

Arbeitsablauf

Lieferumfang festlegen. Thema, vorhandener Text, vorhandene schlechte Aufnahmen, Länge, Stil, Musik und ob vollständiger Export erforderlich sind, identifizieren. Aus dem Kontext ableitbare Entscheidungen direkt umsetzen; nur fehlende Anforderungen klären, die das Ergebnis beeinflussen. Wenn der Benutzer die vollständige Produktion autorisiert hat, fortfahren, ohne wiederholt um Phasenfreigabe zu bitten.

Fakten und Storyboard ordnen. Einen Satz für das Kernproblem und eine Faktenliste (Fakten, Quellen, Geltungsbereiche, Sicherheitsgrad) erstellen. Pro Aufnahme Zeit, narrative Aufgabe, Subjekt und Schwerpunkt, Text und Lesereihenfolge, Aktion, vollständige Lesezeit und Ton notieren. Zuerst Sätze klären, die nicht visualisiert werden können, dann Zeitplan aufstellen. Ursprünglichen Wortlaut vorhandener Texte beibehalten; bei notwendigen Änderungen an Fakten oder Struktur die Gründe erläutern.

Stil auf Zeichnung umsetzen. Bei fehlendem eindeutigem Stil 2–3 Richtungen basierend auf Subjekt, räumlichen Beziehungen, Informationsdichte, Bewegungston und Umsetzungskosten in Betracht ziehen, dann für den Inhalt geeignet auswählen. Storyboard notiert die Auswahlgründe, erkennbare Merkmale und Umsetzungsgrenzen. Mit der Stilgalerie Aktionen erkunden, eigene Filme dennoch nach Fakten und Storyboard erstellen. 3D-, Glas- und Flüssigkeitsvorgaben sind Canvas-angepasst, komplexes realistisches Rendern erfordert zusätzliche Umsetzung; Unterhaltungsbeschriftungen bleiben im Querformat.

Zuerst Schlüsselszenen validieren. Umgebung prüfen, Projekt erstellen, dann den schwierigsten oder die Stil am besten repräsentierenden Abschnitt umsetzen. Skelett hat keine fertigen Bilder, SUBS und Szenenfunktionen müssen ausgefüllt werden. Vorhandene Storyboards bleiben erhalten, vorhandener Quellcode wird standardmäßig nicht überschrieben.

python scripts/check_env.py
python scripts/new_film.py --list-styles
python scripts/new_film.py --describe-style isometric
python scripts/new_film.py <Projektverzeichnis> --style isometric --title "Filmtitel" --duration 60 --fps 30
python engine/render.py <Projektverzeichnis> --serve
python engine/render.py <Projektverzeichnis> --stills 2.5 8 15
python engine/render.py <Projektverzeichnis> --motion 8 10 12

Bei fehlenden Abhängigkeiten gemäß README installieren; bei fehlenden Schriftarten python engine/get_fonts.py ausführen. Standardmäßig wird gebündeltes Chromium verwendet; wenn der Benutzer systemeigenes Chrome benötigt, --browser chrome übergeben.

--style ID und --world B/C schließen sich gegenseitig aus; wenn nicht angegeben, bleibt die Standardeinstellung C. Neue Stilprojekte enthalten ein anpassbares STYLE-Rezept, das gemeinsam genutzte VStyles verwendet; motion.fps gibt die empfohlene Abtastrate für Stilaktionen an, die tatsächliche Ausgabebildrate wird durch --fps bestimmt. Skelett erzeugt keine Themeninhalte automatisch.

Nach Prüfung erweitern. Echte Screenshots ansehen, prüfen, ob das Subjekt erkennbar ist, die Aktion die Erklärung trägt und der Text lesbar ist; bei Zielansichtsgröße auf Überdeckung prüfen. Gefundene Probleme beheben und die betroffenen Momente erneut prüfen, dann den gesamten Film erweitern. Eine Szene pro Funktion, Untertitel in der äußersten Zeichnungsebene von draw. Komplexe Kapitel können in Dateien aufgeteilt werden, die in index.html deklariert werden.

python engine/render.py <Projektverzeichnis> --sheet 16
python engine/render.py <Projektverzeichnis> --det
python engine/render.py <Projektverzeichnis> --clip 0 5 preview

--sheet mit einem Wert gibt die Anzahl der Frames an, mit mehreren Werten bestimmte Zeitpunkte. Bei Fehlschlag von --det den Canvas-Status, den Zufallsseed und den über Frames hinweg kumulierten Cache überprüfen; Fehlschlag nicht als Erfolg bezeichnen.

Nach Autorisierungsumfang exportieren und vertonen. Bei Anforderung des Endprodukts vollständigen Film rendern, Ereignisse exportieren und Audiospur synthetisieren; bei nur Quellcode/Vorschau nach Abschluss der entsprechenden Ergebnisse liefern.

python engine/render.py <Projektverzeichnis> --jobs 4
python engine/render.py <Projektverzeichnis> --events
python engine/audio.py <Projektverzeichnis>
# Bei verfügbarer externer Musik
python engine/audio.py <Projektverzeichnis> --bgm music.mp3 --bgm-db -8

fr.sfx-Ereignisse heißen tick, soft, chord, bloom (kompatibel mit flash), rise, thud, tock, stamp, shimmer, hush. Auch ohne externe Musik können Grundton und Ereignistöne synthetisiert werden; genaue Ergebnisse wahrheitsgemäß angeben. --wav-only gibt nur die synthetisierte Audiospur aus, ohne externe BGM zu überlagern.

Abnahme und Lieferung. Die exportierten Segmente/den gesamten Film kontinuierlich ansehen und stichprobenartig Einstieg, stabiles Lesen, Schlüsselaktionen und Übergangsmittelpunkte prüfen. Sicherstellen, dass Fakten und Storyboard übereinstimmen, Bild und Ton synchron sind, Zahlen konsistent sind und Schriftarten keine fehlenden Zeichen aufweisen. Gefundene Probleme beheben und betroffene Aufnahmen erneut prüfen. Quellcode-Pfad, Vorschau oder renders/final.mp4 liefern, kurz die Ergebnisse der Prüfung und tatsächliche Einschränkungen beschreiben; nicht vollständig angesehene Teile klar benennen.

Projekt und Artefakte

index.html verweist auf die gemeinsamen Ressourcen in /engine/ und die lokale film.js; storyboard.md speichert Storyboard und Fakten. review/ enthält Schlüsselbilder, audio/ Ereignis- und synthetisierte Tonspuren, renders/ Segmente und das Endprodukt. Generierte Artefakte werden standardmäßig nicht committet, der Quellcode bleibt reproduzierbar.

Verwandte Skills