TellMotion

TellMotion — Idee → Thema → Animation

Ein wiederholbarer Ablauf, günstig in Tokens. Funktioniert für jedes Thema, das sich als 2D-Darstellung eignet: Diagramme, Prozesse, Architekturen, Algorithmen, Zeitachsen, Konzepte. (Nicht für 3D- oder Realfilme.)

Aufbau dieses Skills: themes/ (theme.json-Katalog) · tools/ (Node, keine Abhängigkeiten) · assets/base (Motion-Canvas-Vorlage mit Szenenrezepten) · assets/packs/ (optionale Komponentenpakete) · scripts/new-project.sh · references/.

1. Brief (eine Runde, nur fragen, was fehlt)

Wenn der Benutzer bereits Inhalt/Struktur angegeben hat, nicht erneut fragen. Verwende AskUserQuestion (max. 4 Fragen) für das, was fehlt:

1. Thema und Inhalt (falls nicht vorhanden: ein erfundenes vorschlagen und dies mitteilen).
2. Länge / Tempo (Standard: ruhiges Tempo, Szenen von 20–60 s) und fps (Standard: 30 Vorschau / 60 Render).
3. Design — immer diese drei Optionen anbieten:
   • Vorlage: ein Thema aus dem Katalog verwenden. Führe node tools/list-themes.mjs aus (kompakte Liste) und frage nach der ID; für eine visuelle Vorschau führe node tools/build-catalog.mjs <tmpdir> aus und öffne gallery.html (ausliefern mit node tools/serve.mjs <tmpdir>).
   • Eigenes Design: 3 kontrastierende theme.json-Vorschläge schreiben (siehe references/theme-format.md), Vorschauen rendern und den Benutzer wählen lassen (Schritt 2).
   • Eigenes mitbringen: der Benutzer liefert Markenfarben/-schriftarten oder eine Figma-Datei → daraus ein theme.json ableiten.
4. Pakete: aus dem Thema ableiten, nur bei Unklarheit nachfragen, und nur das hinzufügen, was die benutzerdefinierten Szenen verwenden: cloud (Architekturen), algorithms (Sortieren, Bäume), charts (Daten), flowchart (Prozesse), timeline (Geschichte/Fahrpläne), code (Programmierung, CLI), typography (Intros, Zitate, A vs. B), science (Zyklen, Schichten, Wellen), math (Gleichungen, Funktionen), ui (Produktdemos, Benutzerabläufe), maps (Orte, Reisen). Beliebig kombinieren; references/packs.md listet jede Komponente auf.

2. Eigenes Design (überspringen, wenn eine Vorlage gewählt wurde)

1. 3 Vorschläge als theme.json-Dateien in einem temporären Ordner schreiben (das nächstgelegene Katalogthema kopieren und Tokens ändern; unterschiedliche Familien, z. B. technisch / verspielt / redaktionell).
2. node tools/validate.mjs <datei> für jede, dann node tools/build-catalog.mjs <ausgabe> --themes <ordner>.
3. Vorschauen anzeigen: <ausgabe>/gallery.html im Browser-Fenster öffnen (serve.mjs) oder die SVGs senden. Auf die Wahl des Benutzers warten.
4. Optionaler hochauflösender Weg mit Figma (nur wenn der Benutzer dies wünscht und der Figma-Konnektor existiert): references/figma.md.
5. Das gewählte Thema als <projekt>/theme.custom.json speichern (und anbieten, es zum Katalog beizutragen).

3. Storyboard (der Benutzer genehmigt es, bevor etwas animiert wird)

Eine Animation umzuschreiben ist teuer; eine Liste von Szenen umzuschreiben nicht. Diesen Schritt nur bei einer einzelnen Szene oder auf Wunsch des Benutzers überspringen.

1. references/storyboard.md und references/recipes.md lesen, dann storyboard.json schreiben: ein Eintrag pro Szene, mit ihrem Rezept (oder custom), was sie zeigt, ihrer Dauer in Sekunden und ihrem tatsächlichen Text.
2. node tools/storyboard.mjs validate <datei>, dann node tools/storyboard.mjs preview <datei> --theme <id|datei> --out <tmpdir>. Die Seite im Browser-Fenster anzeigen (serve.mjs) und die Szenen auch im Chat auflisten.
3. Auf die Zustimmung des Benutzers warten. Das Storyboard ändern, nicht den Code, bis er zustimmt. Danach den Vorschau-Server stoppen.

Nach der Genehmigung selbstständig bis zur Auslieferung arbeiten.

4. Projekt

bash <skill>/scripts/new-project.sh <name> --theme <id|pfad.json> [--pack a,b|all] [--demos]

(--demos kopiert die Demoszene jedes Pakets: praktisch, um die API zu lernen, dann die Demos löschen.) Aus dem Ordner ausführen, der das Projekt enthalten soll. Ein Projekt pro Thema; für neue Videos Szenen hinzufügen. Es kopiert die Vorlage, wendet das Thema an (src/theme.ts, src/fonts.ts), installiert Abhängigkeiten und registriert das Projekt in .claude/launch.json. Thema später ändern: node <skill>/tools/apply-theme.mjs <thema> <projekt> dann npm install.

5. Szenen

node tools/storyboard.mjs generate <datei> <projekt> schreibt jede Szene und src/project.ts. Rezeptszenen sind fertig. Jede custom-Szene ist ein laufender Platzhalter mit Titel, Untertiteln und Länge: ihre Animation schreiben, dabei die Platzhalter behalten. Dafür references/motion-guide.md (Kern-API, Layout-Rezept, Fallstricke) und references/packs.md (Paketkomponenten) lesen. Ein erneutes Ausführen von generate behält bereits bearbeitete Szenen. Feste Regeln:

• Eine Szene pro Block in src/scenes/, registriert in src/project.ts (+ eine .meta-Datei pro Szene).
• prepareScene(view, title) verwenden; zuerst enter() und zuletzt leave() aufrufen; Untertitel via sub.say(text).
• Text ≥ 28 px bei 1920x1080; Untertitel ≤ 85 Zeichen; eine Kategoriefarbe pro Elementtyp + Legende in src/config.ts (LEGEND).
• Nur das zeigen, was pro Szene benötigt wird; das aktive Element mit glow() und den Rest mit dim() versehen.
• Bearbeitbare Texte, Zeitsteuerungen und Farben als Konstanten am Anfang jeder Szene (EDITABLE TEXT-Kommentar); globale Geschwindigkeit in PACE.
• Teile mit connect(root, a, b) verbinden. Anfragen und Ereignisse mit send(root, arrow.points, {shape: 'dot' | 'diamond', to: piece}) übertragen, sodass die Form sie unterscheidet und das Teil bei Ankunft reagiert.
• Niemals Farben oder Schriftarten in Szenen hartcodieren: C, S, FONT, fs() aus config.ts verwenden, damit Themen austauschbar bleiben.

6. Verifizieren (günstig)

1. npm run typecheck im Projekt, dann node tools/storyboard.mjs duration <projekt>: wenn eine Szene stark vom genehmigten Plan abweicht, korrigieren oder den Benutzer informieren.
2. preview_start (Projektname aus .claude/launch.json), resize_window 1700x950, dann auf die Timeline klicken und zoom auf [215,0,800,330]; mehrere Klicks+Zooms in einem browser_batch bündeln. Auf der Timeline scroll right, um spätere Szenen zu erreichen.
3. Wenn fertig: resize_window Voreinstellung desktop, preview_stop. Kein mp4 rendern, außer wenn gewünscht.

7. Rendern (wenn gewünscht)

npm run render im Projekt schreibt output/<name>/<name>.mp4 und render.json (Dauer pro Szene, Dateigrößen), ohne den Editor zu öffnen. Optionen (nach npm run render --):

• --format mp4,webm,gif · --thumb oder --thumb-at <sekunden> · --fps <n> · --scale <n>. WebM-Codierung ist langsam (Minuten): nur anfordern, wenn nötig.
• --aspect 9:16,1:1: passt das Video mit Balken im Themenhintergrund ein (--pad-color überschreibt); es erfolgt kein neues Layout der Szene, daher schrumpft der Text auf etwa 56 %. Den Benutzer darauf hinweisen.
• --draft: 30 fps bei halber Größe, in output/<name>-draft/. Zur Überprüfung verwenden.
• --info: Dauer jeder Szene, nichts gerendert. Günstig: besser zur Überprüfung des Timings als Rendern.
• --dry-run: Größenbereich pro Datei aus gerenderten Samples, nichts gespeichert. Vor einem großen Render oder wenn der Benutzer sich über die Größe sorgt, verwenden.

Benötigt Chrome, Edge oder Chromium (CHROME überschreibt den Pfad). Projekte, die vor diesem Skript erstellt wurden: node <skill>/tools/render.mjs <projekt>. Die Quelle ist tools/render.mjs.

8. Ausliefern

Szenen auflisten (Name → was sie zeigt), wie man sie ausführt (npm start), wie man rendert (npm run render), wie man das Tempo ändert (PACE), Texte (Konstanten pro Szene), Thema (apply-theme.mjs). Angeben, was nicht verifiziert wurde. Wenn der Arbeitsbereich eine CLAUDE.md hat, das neue Projekt hinzufügen.

Token-Ersparnisse

• Dateien, die du gerade geschrieben hast, nicht erneut lesen; Edit verwenden.
• list-themes.mjs anstelle des Lesens von Theme-JSON-Dateien verwenden; ein einzelnes Thema nur beim Anpassen lesen.
• Screenshots/ Zooms bündeln; vollständige Seitenaufnahmen vermeiden.
• assets/ wiederverwenden, anstatt Komponenten neu zu generieren.