om-dubeyyy/vox-style-animation

Vox-Animation

Du erstellst kurze Erklärvideos im Redaktions-Collage-Look: Papierhintergründe, getönte Fotokarten mit Rahmen und Schatten, einen gelben Marker auf dem Schlüsselbegriff, rote Stiftkreise und -pfeile, Karten mit Stecknadeln, Collagen-Bewegung auf Zweien und physische Schnitte, alles mit durchdachtem Sound. Das Kit liegt in kit/, der Renderer in scripts/ und die Handwerksregeln in references/.

Die Regel über allen Regeln: Das Bild muss das Argument tragen. Dekoration über einer schwachen Aussage ergibt immer noch ein schwaches Video. Die zweite Regel: Es sollte handgemacht wirken, mit Absicht. Jeder Standard im Kit fügt eine kleine physische Unvollkommenheit hinzu oder entfernt eine digitale Perfektion.

Bevor du baust: lies diese

1. references/LOOK_BOOK.md: Was es professionell aussehen lässt, mit gemessenen Zahlen und den 18 Amateur-Fehlern. Immer lesen.
2. references/SCRIPT.md: Frage → Archiv → Skript → Aufnahmeliste. Lies es, wenn du schreibst oder timest.
3. references/API.md: Jeder Kit-Aufruf. Lies es, bevor du die Seite schreibst.
4. references/TIPS.md: Tipps aus fertigen Videos (Bild, Timing, Sound, Wahrheit, Auslieferung) und eine 10–12 s Entlarvung Schuss für Schuss. Lies es vor einem kurzen Hook oder einer Entlarvung.
5. references/SOUND.md (aufgenommene Foley, der Dokumentar-Mix, Erzählung), references/ASSETS.md (Lizenzen!), references/QA.md nach Bedarf.

Arbeitsablauf

1. Frage und Skript. Eine beantwortbare, überraschende Frage mit etwas zu zeigen. Hook → Kontext → Wendung → Beweis → Auszahlung (eine 10 s Entlarvung: Behauptung → „nicht wirklich" → Daten → Zugeständnis → Auszahlung, SCRIPT.md §7). Etwa 215 Wörter pro Minute, wenn ein Creator spricht; etwa 150–165 Wörter pro Minute für einen Dokumentar-Erzähler, mit einer Richtung pro Zeile. Zitiere jede Tatsache in SOURCES.md und erfinde niemals Zahlen, Zitate oder Dokumente; lasse Behauptungen weg, die die Daten nicht tragen.
2. Zuerst archivieren. Finde die Bilder und echtes Filmmaterial, bevor du das Skript fertigstellst: NASA, Library of Congress, Smithsonian Open Access, Wikimedia, Pexels (überprüfe jede Lizenz; kontaktiere jeden Clip auf Wasserzeichen und eingebrannte Texte). Filmmaterial in den Karten wirkt dokumentarisch; Standbilder allein wirken wie eine Diashow. Notiere Datei, URL, Lizenz und Quellenangabe. Committe niemals Texturelabs-Dateien oder kommerzielle Schriftarten. Keine Vox-Logos oder -Aufnahmen. Lasse das Modell niemals die Bilder erraten (--query noimg zeigt, wie billig das aussieht).
3. Aufnahmeliste. Eine Zeile pro gesprochenem Satz, mit Zeiten aus einem Wort-für-Wort-Transkript der Sprachaufnahme: python3 $SKILL/scripts/words.py vo.wav --inject <seite>, dann const w = V.wordmap("#words") in der Seite und dieselben Wörter im Mix, sodass eine neu aufgenommene Zeile alles neu timet. Eine Hauptbewegung pro Zeile. Wähle eine wiederkehrende visuelle Idee für das gesamte Video. Benenne den Schnitt bei jedem Szenenwechsel (harter Schnitt, curveCut, zoomCut, holePush, whip, paperWipe; niemals einen Überblendung).
4. Bauen. Arbeite innerhalb dieses Skill-Ordners (der mit dieser SKILL.md; nenne ihn $SKILL, normalerweise ~/.claude/skills/vox-style-animation). Führe cd $SKILL && npm run new -- <name> aus; es erstellt videos/<name>/index.html mit allen eingestellten Pfaden. Für ein Projekt woanders, führe node $SKILL/scripts/new.mjs <name> --dir <ordner> aus. Kopiere Seiten nicht von Hand: Die ../../kit-Pfade funktionieren nur zwei Ebenen unterhalb des Skill-Ordners. Lege Bilder in videos/<name>/assets/ ab und protokolliere sie in dessen SOURCES.md. Behalte die Standardwerte bei, es sei denn, es gibt einen Grund:
   • Papier, nicht weiß; getönte Fotos; Karten ±1,5–3°, mit 4% Rahmen und weichen Schatten;
   • onTwos: true (12 fps Collagen-Bewegung); das Papier bleibt still (drift: 0), aber die Objekte atmen: breathe() auf jedem gehaltenen Foto, float() 2–3 px auf Karten und Ausschnitten, ein oder zwei scrap()s vor der Linse, ein ghost() des echten Dokuments dahinter (LOOK_BOOK §10);
   • die Behauptung in Frame 1 lesbar; echte Clips in Karten mit footage();
   • Schübe mit +1–3 %/s bei Halten, +4–6 %/s zur Betonung;
   • Anmerkungen auf ihren Wörtern; drei Stimm-Typen; 1–3 Akzente, jeder mit einer Aufgabe;
   • auf 9:16 nichts Wichtiges in den oberen 12% oder den unteren 20% (die Plattform-UI deckt es ab). examples/apollo/index.html zeigt fast alle Helfer. Für Karten verwende node $SKILL/scripts/map.mjs …. Um ein Standbild oder einen Clip vorzubehandeln, verwende python3 $SKILL/scripts/photo_treat.py.
5. Zuerst Standbilder prüfen. Führe node $SKILL/scripts/render.mjs videos/<name>/index.html --stills t1,t2,… bei jedem Szenenwechsel und jeder Anmerkung aus. Öffne die PNGs und schau sie dir an. Gehe references/QA.md durch und behebe jedes Problem. Wenn der Renderer mit einem Seitenfehler stoppt, nennt die Nachricht den Helfer und das Ziel, das fehlt.
6. Rendern. Für Entwürfe mischt node $SKILL/scripts/render.mjs videos/<name>/index.html --voice vo.wav [--music bed.mp3] --gif die synthetisierten Cues des Kits ein (Musik −22 dB und geduckt, Raumton, −14 LUFS). Für die Endversion verwende aufgenommene Foley: rendere mit --no-sfx, dann python3 $SKILL/scripts/doc_mix.py silent.mp4 --cues cues.json --words <seite> --voice vo.wav --music … --room $SKILL/kit/sfx/cc0/room_tone_office.mp3 --out final.mp4 --stems (Erzählung als Referenz, jedes Sample auf seinen Peak gesetzt und peak-ausgerichtet auf sein Wort; SOUND.md). Mische Effekte niemals einzeln ab. Wenn das Video jemals in 4K gezeigt wird, rendere mit --scale 2 (ein natives 3840×2160 Master).
7. Endkontrolle. Ziehe Einzelbilder aus der MP4 an den Übergängen. Bestätige die Lautstärke mit ffmpeg -i out.mp4 -af ebur128 -f null -. Berichte dann, was du erstellt hast, sowie dessen Quellen und Lizenzen.

Einrichtung (einmal pro Maschine)

npm install                      # gsap, playwright, d3-geo, topojson-client, world-atlas
npx playwright install chromium  # der Browser des Renderers
# optional, um Texturen und Sounds neu zu generieren: pip install numpy scipy pillow
# optional, für words.py und doc_mix.py: pip install faster-whisper numpy
# optional, für die stimmenerhaltende Beschleunigung von narration.py: ein ffmpeg mit rubberband (macOS: brew install ffmpeg-full)

Du benötigst Node 18+ und ffmpeg 4.4+ im PATH. Das Kit ist reines Browser-JavaScript; es gibt keinen Build-Schritt. Für die Browser-Vorschau führe npm run preview aus, lasse es laufen und öffne http://localhost:8080/videos/<name>/.

Unverhandelbar

• Nur echte Fakten mit Quellen. Eine getippte „Faktenblatt"-Karte ist in Ordnung. Ein gefälschter Brief, eine gefälschte Quittung oder Schlagzeile, die als echt präsentiert werden, ist nicht in Ordnung.
• Die Lizenz jedes Bildes ist bekannt. Ausgeliehenes Filmmaterial erhält einen Onscreen-Chip („Archiv · NASA") oder eine Bildunterschrift, wenn der Kanal Onscreen-Chips verbietet.
• Verwende nicht das Vox-Logo oder -Filmmaterial. „Vox-Stil" beschreibt einen Look; das Logo impliziert eine Empfehlung. Wenn der Benutzer das Wort „Vox" auf dem Bildschirm als Stilhinweis haben möchte (viele Vox-artige Reels tun das), setze es in eine gebündelte freie Serifenschrift, behalte irgendwo ein „Vox-Stil"-Label bei und weise auf das Markenrisiko hin; es ist seine Entscheidung.
• Überprüfe umstrittene Grenzen auf Karten.
• Halte Text aus KI-generierten Bildern heraus; füge allen Text in der Seite hinzu.
• Karten von Indien (und anderen umstrittenen Gebieten): Die Grenzen von Natural Earth sind de facto, nicht offiziell. Siehe ASSETS.md vor der Veröffentlichung.

Nicht verbunden mit, unterstützt von oder verbunden zu Vox Media. „Vox" ist eine Marke von Vox Media, LLC.

Wenn das Video des Benutzers „billig aussieht"

Ziehe Standbilder und gehe die 18 Amateur-Fehler in LOOK_BOOK.md durch. Die üblichen Korrekturen, in der Reihenfolge ihrer Wirkung:

1. Papierhintergrund und Fototönung.
2. Bewegung auf Zweien, mit einer Sache, die sich gleichzeitig bewegt.
3. Anmerkungen, die auf die Wörter abgestimmt sind.
4. Kartenrotation, Rahmen und Schatten.
5. Objekte zwischen Ein- und Ausgang völlig still: füge breathe, float, ein scrap hinzu.
6. Sound: aufgenommene Foley bei Schlüsselaktionen, peak-ausgerichtet, unter der Stimme; Musik 18–24 dB unter der Stimme.
7. Ersetze Überblendungen durch Schnitte.