getFrontend/10-animation-styles-skill

Animationsstile

Zehn Looks, jeder eine Datei mit echtem Code, den Claude auf jede beliebige Geschichte anwenden kann. Nichts davon ruft ein Bild- oder Videomodell auf, also rendert dieselbe Geschichte jedes Mal identisch und kostet nichts.

Die Vorlage enthält ein fertiges 22-Sekunden-Beispiel: Claude fliegt mit einer selbstgebauten Rakete zum Mond, in jedem Beat in einem neuen Stil. Führe es zuerst aus, um jeden Look in Bewegung zu sehen, und ersetze dann die Geschichte.

Stile

Datei	Stil	Der Look in einem Satz
pixel.js	Pixel Art	Gezeichnet mit etwa 120 Pixeln Breite und ohne Glättung hochskaliert. Kleine Palette, geditherter Himmel, Spiel-HUD
ps2.js	PS2-Stil	Wenige Polygone, matschige kleine Texturen, Nebel, ein niedrig aufgelöstes Bild hochgezogen, Missions-HUD
comic.js	Comic Art	Dicke Tuschelinien, flache Farbe, Ben-Day-Punkte, Bewegungslinien, Sprechblasen, ein großes BOOM
brick.js	Lego-Stil	Alles besteht aus Plastiksteinen mit Noppen, unter weicher Sonne
clay.js	Claymation	Weiche Formen mit Fingerabdrücken, weiches Licht, 12 Posen pro Sekunde
paper.js	Papier-Cutout	Schichten aus geschnittener Pappe mit kleinen Schatten, Papierfasern, 8 Posen pro Sekunde
anime.js	Retro-Anime	80er-Jahre-Zelluloid: Verlaufshimmel, große Sonnenscheibe, Geschwindigkeitslinien, ein invertiertes Bild beim Treffer, Filmkörnung
poly.js	Low Poly 3D	Flache Flächen und hartes Licht, nichts Rundes
riso.js	Risographie	Zwei Farben auf off-white Papier, jede mit eigenen Halbtonpunkten, leicht versetzt gedruckt
mini.js	Miniatur-Diorama	Ein winziger, handgefertigter Set auf einem Tisch, Pappe und Watte, Tilt-Shift-Unschärfe

styles.md enthält die Regeln für jeden Stil: wodurch er als dieser Stil erkennbar ist, was für ein neues Motiv geändert werden muss und was ihn bricht. Lies den Teil für einen Stil, bevor du seine Szene schreibst.

Schritte

1. Hole das Briefing. Was ist die Geschichte oder die App, hochformatig (Reels, TikTok) oder breit (X, YouTube), und welche Stile? Ohne Präferenz bedeutet 3 bis 5 Stile, die zu den Beats passen, oder alle 10, um sie vorzuführen. Ein Stil für das gesamte Video ist auch in Ordnung.
2. Schreibe die Geschichte mit copywriter.md. Eine Zeile pro Beat. Zeige dem Benutzer die Zeilen mit dem jeweiligen Stil daneben an und warte auf ein Ja.
3. Kopiere die Vorlage: cp -r ~/.claude/skills/claude-animation-styles/template ~/mein-video && cd ~/mein-video && npm i. Überprüfe, ob sie läuft, bevor du etwas änderst: node render.cjs stills 2,6,12 und öffne die Bilder. Sie zeigen die Beispielgeschichte, lösche also stills/, bevor du mit deiner eigenen beginnst.
4. Schreibe story.json. format ist vertical oder wide. Jeder Beat hat einen style (den Dateinamen), seconds und seine line. Derselbe Stil kann für mehrere Beats verwendet werden, und jeder erhält seine eigene Szene (siehe unten).
5. Schreibe die Szene in jeder verwendeten Stildatei um. Behalte den Look bei, ersetze das Motiv. Siehe „Motiv ändern“ unten.
6. Überprüfe Standbilder nach jedem Stil: node render.cjs stills 1,3.5,6. Die Zahlen sind Sekunden im gesamten Video, nicht im Beat, und es gibt den Dateinamen jedes Bildes aus. Öffne jedes. Ist das Motiv ohne Ton erkennbar? Wirkt es wie dieser Stil? Wird etwas vom Rahmen abgeschnitten?
7. Füge eine Stimme hinzu, falls gewünscht: ELEVENLABS_API_KEY=... python3 voice.py [voice_id]. Es liest die Zeilen, schreibt voice.mp3 und passt die Zeiten in story.json entsprechend an. Ohne Schlüssel gibt es keine Stimme, also setze die Sekunden von Hand und füge Musik hinzu.
8. Rendern: node render.cjs video --audio voice.mp3 oder einfach node render.cjs video für keinen Ton. Es schreibt out/video.mp4. Ein 20-Sekunden-Video dauert ein paar Minuten.
9. Sieh dir das Ganze an, bevor du es übergibst: ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg (ein Bild pro Sekunde, leere Zellen am Ende sind normal). Du hörst es nicht, also sage dem Benutzer, er soll den Ton prüfen.

Um Musik unter eine Stimme zu legen, 14 dB leiser als die Stimme: ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav Messe beide mit -af ebur128 und passe die Lautstärke an, da sich Tracks in der Lautstärke stark unterscheiden.

Motiv ändern

Jede Stildatei hat ein create, das die Welt einmal aufbaut, und ein render(t, ctx, dur), das jeden Moment zeichnet, wobei t die Sekunden im Beat und dur die Länge des Beats ist. Es betrachtet nur t, sodass jeder Frame in beliebiger Reihenfolge gezeichnet werden kann.

Ein Stil, zweimal verwendet. create bekommt index (die Position des Beats in story.json), line und beat. Speichere this.index = index und zeichne für jeden eine andere Szene. Teste hierfür nicht start, da es sich bei jeder Zeitänderung ändert.

2D-Stile (Pixel, Comic, Papier, Anime, Riso). Das Motiv wird durch einen kleinen Painter gezeichnet: paint.fill(path, key) und paint.lines(segments, width, key), wobei jeder Stil entscheidet, was diese tun. Im Comic-Stil fügen sie Tuschelinien hinzu. Bei Papier fügen sie einen Schatten hinzu. Bei Riso legen sie Tintendichte an. lib/common.js enthält die Beispielmotive drawClaude und drawRocket. Schreibe drawCat, drawPhone oder drawFounder auf die gleiche Weise, verwende dieselben Stücknamen in jedem Stil, und es erhält automatisch jeden Look. Ein neuer Stückname (fur, apron) muss zur Palette dieses Stils hinzugefügt werden, die in Comic, Papier und Anime PAL und in Riso toneA und toneB ist, sonst malt es in der falschen Farbe ohne Fehler. Pixel Art zeichnet sein eigenes Sprite, also schreibe das von Hand.

3D-Stile (PS2, Brick, Clay, Poly, Mini). lib/three-claude.js baut das Motiv aus einfachen Formen, wobei ein kit über die Anzahl der Polygone und das Material entscheidet. Baue dein Motiv auf die gleiche Weise: makeCat(kit). Der Lego-Stil ist die Ausnahme, da alles aus Steinen gebaut werden muss, also kopiere seinen add-Helfer.

Behalte das Motiv in jedem Stil gleich. Dieselbe Silhouette, dieselben zwei oder drei Farben. Das macht einen Stilwechsel als dieselbe Geschichte erkennbar, nicht als neuen Clip. Eine einfache erkennbare Form schlägt ein detailliertes Charakterdesign.

Was diese funktionieren lässt

• Wechsle den Stil mit einem harten Schnitt. Schneide direkt zum nächsten Look. Die Überraschung ist der Übergang.
• Eine große Sache, die sich in der Mitte bewegt. Die Leute müssen jeden Beat in unter einer Sekunde erfassen, oft auf einem Telefon ohne Ton.
• Jeder Beat 1,5 bis 3 Sekunden. Lang genug, um den Look zu sehen, kurz genug, dass sie für den nächsten bleiben.
• Halte die Geschichte durch den Schnitt in Bewegung. Wenn die Rakete am Ende eines Beats steigt, steigt sie auch am Anfang des nächsten.
• Text gehört zum Stil. Ein HUD in den Game-Looks, eine Sprechblase im Comic-Look. Keine Untertitel darüberlegen.

Wenn etwas schiefgeht

• Puppeteer oder Three.js fehlen: npm i im Ordner mit render.cjs.
• ffmpeg fehlt: brew install ffmpeg auf einem Mac. Standbilder funktionieren ohne, das Video benötigt es.
• Schwarze 3D-Frames oder sehr langsame Render: Das Rendern nutzt die GPU auf einem Mac und einen Software-Renderer auf anderen Systemen (render.cjs, die gl-Zeile). Software-Rendering funktioniert und dauert viel länger.
• Schlagzeilen in der falschen Schriftart: Die Seite lädt Inter Tight und Bangers von Google Fonts, daher wird während des Renderings Internet benötigt.
• Ein Wort im Comic-Stil erscheint zu spät: Der Countdown liest Wortzeiten aus voice.json, wenn eine Stimme vorhanden ist. Ändere die Wörter, nach denen er sucht, in comic.js.

Behalte es dir

Kopiere die Looks und erstelle deine eigenen Motive. Verwende kein Markenlogo, keine Game-Charaktere oder echte Firmen-Sets auf dem Bildschirm und kopiere nicht die Szene eines anderen Creators Bild für Bild.