vikramdevesh/3d-ani-lcs

Code-Video mit 3D (Videos und Shorts)

Jeder Frame ist eine reine Funktion der Zeit, geschrieben als HTML/CSS/three.js. Dieselbe Seite ist der Live-Editor (spielt sofort ab, nichts wird gespeichert) und die Render-Quelle (Chromium erfasst sie Frame für Frame, ffmpeg fügt sie zusammen). Der Benutzer ist der Regisseur; du erledigst die Arbeit. Es wird nichts gerendert, bis die Live-Version angeschaut wurde.

Der Workflow hat sieben Schritte. Führe sie in der Reihenfolge aus und überspringe Schritt 5 nicht.

#	Schritt	Was du produzierst
1	Setup	Projektordner aus template/ kopiert, Server läuft
2	Skript	script.md, danach ein Shot-Plan: ein Satz = ein Shot
3	Stimme	voiceover.mp3 + Wortzeitangaben, oder geschätzte Zeitangaben, falls die Stimme später kommt
4	Stil	Das Aussehen als Zahlen in STYLE.md geschrieben und in die 3D-Welt eingebaut
5	Korrektur	Live-Editor-Review, Notizen angewendet, wiederholte Fehler zu references/lessons.md hinzugefügt
6	Render	Chunk-Render, mit Audio zusammengefügt
7	Upload	Titeloptionen, Beschreibung, Kapitel, Thumbnail-Prompt

1. Setup

• Die Werkzeuge leben in ~/.youtube-video-editor/venv (Playwright Chromium, imageio-ffmpeg, pillow, faster-whisper). Fehlt es, führe ~/.claude/skills/youtube-video-editor/scripts/setup.sh aus. Rufe es immer als ~/.youtube-video-editor/venv/bin/python -I auf. Es gibt kein System-ffmpeg oder node auf dem Mac des Benutzers.
• Kopiere template/ nach <project>/ in einen für den Benutzer sichtbaren Ordner (er arbeitet normalerweise in ~/Downloads). 16:9 Video → index.html + scenes.js. Vertikales Short → short.html + scenes-short.js (Bühne 1080×1920).
• Starte den Server: python3 -m http.server 8766 --bind 127.0.0.1 aus dem Projektordner (führe es mit nohup … & aus), öffne dann http://localhost:8766/index.html im Browser-Bereich. Eine file://-Seite erscheint dort als toter Schnappschuss, und preview_start mit einer launch.json hat den Server auf diesem Mac nicht gestartet, also starte ihn von Bash aus.

2. Skript

• Das Skript bestimmt das Video. Schreibe es in der Stimme des Benutzers: kurze gesprochene Sätze, einfache Wörter, kein Lehrbuch-Ton. Deren Zielgruppe sind nicht-technische Anfänger (Low Code Studio). ~150 Wörter pro Minute; ein Short hat 60–110 Wörter.
• Plane dann die Shots vor dem Animieren: ein Satz = eine Szene, und für jede eine Zeile, die beschreibt, was die Kamera sieht. Einen Plan zu ändern ist kostenlos, eine Animation zu ändern nicht.
• Inspiriert von einem anderen Video? Behalte die Struktur und die Lektion, ändere jedes Beispiel, jedes Bild und jede Zeile. Verwende niemals deren Material, Formulierung, Thumbnails oder Charaktere wieder.

3. Stimme

• Der Benutzer nimmt seine eigene Stimme auf (es ist Teil der Marke) und fügt später ein Headshot hinzu. Der erste Durchlauf hat also kein Audio: Die Länge jeder Szene wird aus ihrer vo-Wortzahl geschätzt (WPS/PAD in engine.js).
• Wenn voiceover.mp3 existiert: konvertiere in 16 kHz Mono wav, führe ~/.claude/skills/youtube-video-editor/scripts/transcribe.py für Wortzeiten aus, setze dur jeder Szene auf die Lücke zwischen ihrem ersten Wort und dem ersten Wort der nächsten Szene, und passe data-in-Werte auf die Schlüsselwörter an. Die Zeitangaben innerhalb der Szene dehnen sich automatisch mit der Szenenlänge (autoren-Tempo → reales Tempo), daher brauchen die meisten Szenen nur dur. Übergib --audio voiceover.mp3 beim Rendern.
• Auf diesem i3 Mac kann whisper small bei ausgelastetem System langsam sein. base, beam_size=1, keine Wortzeitstempel ist etwa 5× schneller und reicht zum Nachschlagen; verwende small + Wortzeitstempel nur für den endgültigen Sync.

4. Stil: Zahlen, keine Adjektive

"Cinematic" bedeutet nichts; jede Szene würde anders raten. Schreibe STYLE.md im Projekt mit Regeln, die du überprüfen kannst, und baue sie dann einmal in die Welt ein. Beginne mit references/style-rules.md (der Haus-3D-Look: Kamerawinkel, Objektiv, Beleuchtungswerte, Palette, Bewegung, Untertitel). Wenn der Benutzer Referenzbilder bereitstellt, lies sie und übersetze das, was du siehst, in dieselben Zahlen. Seine eigenen Referenzen, keine Kopie des Videos eines anderen Erstellers.

2D-Bewegungsgrafik kostet weit weniger Tokens und bricht seltener als 3D. Verwende 3D für Shots, bei denen Raum, Maßstab oder eine Reise wichtig sind (der Hook, die "Welt"-Shots) und 2D-Karten für Aufforderungen, Listen, Vergleiche und Kapitelkarten. Eine gute Mischung ist ungefähr ein 3D-Shot in jeder dritten oder vierten Szene. Ein Short kann durchgängig 3D sein, da es nur wenige Shots hat.

5. Korrektur: der Live-Editor (niemals überspringen)

• Öffne den Editor für den Benutzer und stoppe dort. Sie haben explizit darum gebeten: Überprüfung im Live-Editor vor einem vollständigen Render. Das Seitenfeld zeigt die Sprachaufnahme jeder Szene, ermöglicht die Änderung der Länge (±0,5 s) und das Schreiben einer Notiz; Kopiere meine Review-Notizen legt alles in die Zwischenablage, damit sie es dir wieder einfügen können.
• Bevor du übergibst, überprüfe deine eigene Arbeit: render.py --sheet sheet.jpg gibt einen Frame pro Szene aus. Sieh ihn dir an (teile ein hohes Blatt in 3 Ausschnitte, damit es lesbar bleibt), korrigiere, was falsch ist, wiederhole. Typische Fehler des ersten Durchlaufs befinden sich in references/lessons.md. Lies diese Datei vor dem Bauen.
• Wenn die gleiche Notiz in mehr als einer Szene auftaucht, korrigiere das Video und füge eine Zeile zu references/lessons.md hinzu, damit das nächste Video bereits gelöst beginnt. Das ist der ganze Sinn des Skills.

6. Render

• Erst nachdem der Benutzer die Live-Version freigegeben hat. render.py --chunks out/chunks --chunk-len 60 dann render.py --join out/chunks final.mp4 [--audio voiceover.mp3]. Für Shorts füge --size 1080x1920 und die short.html?render-URL hinzu. Eine falsche Szene später → lösche diese chunk_NNN.mp4 und starte neu; nur sie wird neu gerendert.
• Geschwindigkeit auf dem i3 (gemessen): etwa 1 s pro Frame für eine Vollbild-3D-Szene bei 1080p, da Headless-WebGL in Software läuft. Ein 10-minütiges Video mit 30 fps sind 18.000 Frames, also plane 3–5 Stunden ein und teile dem Benutzer das vor dem Start mit. Verwende --fps 24, wenn der Benutzer einverstanden ist, führe es mit nohup im Hintergrund aus, halte den Mac wach (request_keep_awake), und rendere maximal zwei Chunk-Prozesse gleichzeitig (teile den Bereich mit --start/--end in verschiedene Ordner auf).
• Headless-Chromium benötigt --use-angle=swiftshader --enable-unsafe-swiftshader für WebGL (bereits in render.py).
• Neu schneiden ohne Neuerstellung: Szenen sind ein Array, also ist das Umordnen oder Entfernen von Szenen eine Schnittliste. Wenn der Anfang langsam ist, verschiebe den stärksten Shot auf Index 0.

7. Upload

Du kennst das Skript, also schreibe 5 Titeloptionen (empfehle eine), eine Beschreibung, Kapitel aus den Startzeiten der Szenen und Tags. Folge ~/.claude/skills/youtube-video-editor/references/youtube-metadata.md. Das Thumbnail ist der eine Ort, an dem ein Bildmodell hilft: Rendere einen starken Standframe (render.py --stills), schreibe den Prompt und lasse den Benutzer ihn generieren oder zusammenstellen. Jede Behauptung auf dem Thumbnail muss im Video wahr sein.

Szenenformat (engine.js)

SCENES.push({
  id: 'belt', chapter: '2 · Skript', title: 'Box auf dem Band',   // wird im Editor angezeigt
  vo: `Deine Box fährt auf einem Band.`,                                   // gesprochene Zeile; bestimmt die Länge, bis Audio existiert
  dur: 4,                                                         // optionale feste Länge in Sekunden
  cls: 'z',                                                       // optional: plain | grad | paper | z | z1 (scale-up)
  html: `<div class="three abs" style="inset:0"></div>
         <div class="h1" data-in="0.4" data-a="pop">Hallo</div>`,
  tick: (t, root) => K.draw3d(root.querySelector('.three'), 1920, 1080, t, 'belt'),
});

• Deklarativ: data-in / data-out (Sekunden), data-a (up down left right pop fade drop zoom), data-d, data-type (Schreibmaschine), data-count="0,2400000", data-w="0,80" (Breite %), data-draw (SVG-Strich).
• tick(t) ist für alles Benutzerdefinierte. Es darf nur von t abhängen: kein Date.now(), kein Math.random() (verwende E.rnd(i)), keine CSS-Animationen oder -Übergänge. Sonst stimmt das Render nicht mit der Vorschau überein.
• Kit: K.chat() Claude-artigem Prompt-Feld, K.track() Schrittverfolger, K.chapter() randloser Kapitelkarte, K.wave() + K.waveTick(), K.draw3d(holder, w, h, t, mode) für eine 3D-Ansicht, K.snap(canvas, t, mode) um mehrere Kamerablicke in einer Szene anzuzeigen (ein gemeinsamer WebGL-Renderer; erstelle niemals einen Renderer pro Szene).
• Die 3D-Welt ist K.world() in kit.js: einmal erstellt, update(t, mode) bewegt Objekte und platziert die Kamera. Für einen neuen Film ersetze dort die Objekte und Kameramodi; behalte das Muster bei. examples/workflow-video/ ist ein vollständiges 10-minütiges Video (45 Szenen), das mit diesem Skill erstellt wurde. Lese es für Muster, bevor du neue Szenen schreibst.

Zwei Looks: Spielzeugdiorama und Geschichtenwelten

• kit.js K.world() ist das einfache, flach schattierte Diorama (schnell zu bauen, gut für Erklärvideos und Hintergründe).
• template/worlds.js ist der reichere Geschichten-Look, den der Benutzer bevorzugt hat, nachdem er das Diorama als "nicht sehr realistisch" bezeichnet hat: glatte spielzeughafte Charaktere (person() mit animierbarem Kopf, Armen, Beinen, plus walk()), eine Verlaufshimmelskuppel, ACES filmisches Tone Mapping, eine niedrige warme Sonne plus warme praktische Lichter, additive Glüh-Sprites für Lampen, Dampf und Lichtstrahlen, Leinwand-Textur-Fenster, Nebel für Tiefe. Drei fertige 6-Sekunden-Welten sind darin (Chai-Stand im Morgengrauen, Nachtlieferfahrer, Leuchtturmwärter); examples/story-samples/ zeigt, wie man sie auf eine Seite bringt. Lade worlds.js nach kit.js und zeichne mit K.drawStory(holder, w, h, t, name).
• Code-3D kann nicht fotorealistisch sein. Wenn der Benutzer nach "ultrarealistisch" fragt, sage das deutlich und biete die Wahl an: KI-Video (kostet Credits, und das Video kann nicht mehr behaupten "alles Code") oder den Geschichten-Look. Gib dann 2-3 kurze Beispielclips zur Auswahl, bevor du den gesamten Film in einem Look erstellst.
• Gib jedem Geschichten-Shot einen Charakter, der etwas mit einem Anfang und einem Ende innerhalb des Shots tut (kommt herein, hält an, winkt; hebt eine Laterne), ein Namensschild und eine bewegte Lichtquelle. Das ist es, was als "eine Geschichte" gelesen wird.

Shorts-Checkliste

1080×1920, 20–45 s, eine Idee. Der Hook ist innerhalb von 2 Sekunden sichtbar und gesprochen, beginnend mit Bewegung. Untertitel mit 2–5 Wörtern auf einer dunklen Kapsel (Text direkt auf einem hellen 3D-Himmel ist unlesbar), innerhalb des sicheren Bereichs: nichts Wichtiges in den oberen 220 px oder unteren 420 px. Verwende engere Kameramodi (belt, follow, hero), da Weitwinkelaufnahmen im Hochformat winzig werden. Beende mit dem Höhepunkt plus einer Zeile, die ein Abo fordert; schneide jedes Outro ab.

Gebündelte Dateien

• template/: index.html, short.html, engine.js, kit.js, worlds.js, style.css, render.py, Starterszenen, lib/three.min.js
• examples/story-samples/: die drei Charakter-Beispielclip-Seite
• examples/workflow-video/: der vollständige "How I use Claude Code for video" Build (scenes-1/2/3.js + index.html); kopiere diese neben die Vorlagendateien, um ihn auszuführen (Thumbnails in seiner 0:21-Wand sind nicht gebündelt)
• references/style-rules.md: der 3D-Haus-Look in Zahlen
• references/lessons.md: bereits bezahlte Fehler (vor dem Bauen lesen, nach jedem Review anhängen)