siweimidu/animate

Was macht animate?

Du erstellst kurze animierte Videos in Code: eine <canvas>, prozedural gezeichnet und vertont, deterministisch Bild für Bild, gerendert mit einem Headless-Browser und ffmpeg. Die Geschichte folgt einer Grammatik, die aus starken Kurzfilmen studiert wurde; der Look ist ein Stil – ein Plug-in-Kit, ausgewählt aus styles/ oder erstellt aus den Referenzen des Benutzers mit new-style.md.

Anforderungen: Node 18+, Playwright mit Chromium (npm i -g playwright && npx playwright install chromium), ffmpeg im PATH. Überprüfe sie zuerst; fehlt eine, sage dem Benutzer den Installationsbefehl und stoppe. Für Voice-Over: Python mit faster-whisper (pip install faster-whisper) timt jedes Wort; ohne werden die Wortzeiten geschätzt.

Alle Pfade unten sind relativ zum Basisverzeichnis dieses Skills. Die Stücke leben im Projekt des Benutzers unter pieces/<name>/ (erstelle pieces/, falls nötig); vom Benutzer erstellte Stile leben unter <project>/styles/<name>/.

Unverhandelbar

1. Keine Animation vor Genehmigung des Storyboards. Die Check-Ins existieren, weil eine falsche Geschichte oder ein falscher Look einen vollständigen Build kosten.
2. Schau dir Referenzen an, bevor du etwas zeichnest – die des Benutzers oder das sample.png und Demo des Stils. Überprüfe dann jeden Keyframe gegen grammar/FRAME.md und die eigene Checkliste des Stils in seiner STYLE.md.
3. Jede faktische Behauptung auf dem Bildschirm wird mit einer Websuche überprüft und mit ihrer Quelle im Brief aufgeführt. Behaupter nie "erster" ohne Quelle.
4. Einzeldatei, alles in Code: eine index.html; alles wird in Code gezeichnet und synthetisiert – keine Bild-/Audio-/Videodateien, keine data:-URIs, keine URLs, keine Webfonts im Code. tools/build.mjs erzwingt dies. Zwei optionale Ausnahmen, beide vom Benutzer selbst: Assets (Screenshots und Logos in <piece>/assets/, vom Build eingebettet) und ein Musikstück (beim Export hinzugefügt). Siehe Assets und Musik unten.
5. Deterministisch: nur seed-basierter Zufall (RNG(...)), der Boil-Index B für schrittweise Variation. Nie Math.random() oder Wanduhrzeit verwenden.
6. Referenzmedien bleiben lokal. Niemals committen, ihren Code kopieren oder ihren Künstler in veröffentlichten Ausgaben nennen, es sei denn, der Benutzer bittet um Nennung.
7. "Fertig" wird gemessen: tools/review.mjs besteht, und du hast die Kontaktbögen angesehen. Berichte die Zahlen, nicht "sieht gut aus".
8. Frage mit Optionen. Verwende AskUserQuestion mit einer empfohlenen Standardoption, damit der Benutzer mit einem Klick antworten kann.

Der Ablauf

0. Aufnahme

Stelle die Fragen in intake.md – nur die, die du nicht ableiten kannst. Für den Look baue die Galerie (node tools/gallery.mjs <out.png> [<project>/styles], ~3s), zeige sie und frage: welchen davon, oder zeige mir eine Referenz? Studiere dann die Referenzen selbst gegen FRAME.md und die Checkliste des Stils.

1. Geschichts-Check (Text, schnell)

Wähle das Format aus grammar/FORMATS.md – die Handlungsmaschine entscheidet es (eine Geschichte ist eine Chronologie, verbunden durch Morphs; eine Mission schneidet auf den Beat; eine Liste ist ein Katalog). Lies grammar/STORY.md. Überprüfe Fakten im Web. Zeige dem Benutzer dann:

• die Einzeiler-Idee und das aussprechbare Gerät ("der Funke gewinnt pro Ära einen Strahl und endet als die Antwort")
• das Format und warum, den Stil, die Länge, BPM
• eine nummerierte Beat-Tabelle: Zeit, was passiert, die Brücke zum nächsten Beat, die Rolle des Sounds (wo die Stille ist, wo der lauteste Treffer ist)

Frage: genehmigen / Beats ändern / anderer Blickwinkel. Überarbeite bis zur Genehmigung. Hier wird "Ich meinte X, nicht Y" günstig abgefangen.

2. Look-Check (2–4 Stil-Frames)

Starte das Stück unter pieces/<name>/: kopiere piece.json und src/ aus dem Demo des Stils (styles/<name>/demo/) – es spricht bereits das Kit des Stils und verbindet Epochen mit einem Morph – oder aus templates/beat-cut/ für ein Stück, das hart auf den Beat schneidet (Achtel, ein Sechzehntel-Lauf auf ungeraden Frames, eine Epoche pro Einstellung, Rahmungen aus Kameras), oder templates/piece/ für die einfachste Scherenschnitt-Morph-Vorlage. Setze "style" in piece.json, schreibe dann brief.md und LOG.md neu (die Vorlagen sind Platzhalter).

• Ein ausgelieferter Stil: lies seine STYLE.md und das Demo und zeichne mit seinem Kit.
• Die Referenzen des Benutzers: folge new-style.md. Messe die Referenzen zuerst (tools/measure/refs.mjs); die Stil-Frames des Stücks sind die angepassten Frames, also ist dies ein Check-In: die Vergleichsbögen und die Frames zusammen. Speichere den Stil-Ordner, nachdem das Stück genehmigt ist (das Stück wird sein "bewährt auf").

Zeichne 2–4 der unterschiedlichsten Beats als vollformatige Frames. Jeder muss FRAME.md und die Checkliste des Stils bestehen. Rendere sie nebeneinander mit node tools/still.mjs pieces/<name> 2.25,9.75,16.5 look.png --scale 0.5 (oder tools/storyboard.mjs mit TIMELINE.board gesetzt auf diese Beats), und zeige das Bild. Frage: Daumen hoch pro Frame / Look ändern / anderen Stil versuchen.

3. Storyboard-Check (jeder Beat)

Zeichne jeden Beat im genehmigten Look. Fülle TIMELINE.board mit einer Schlüsselzeit pro Beat ({ t, title, sound, next }) und rendere das Board. Frage nach Daumen hoch/runter nach Plattennummer und Notizen; zeichne neu, was runter ist; wiederhole. Die Platten sind die eigenen Szenenfunktionen des Videos, also wird später nichts neu gezeichnet.

4. Bau

1. Schreibe pieces/<name>/brief.md (Spezifikation, Stil, Beats, Brücken, Soundplan, Behauptungen + Quellen). Führe ein LOG.md.
2. Animiere die Szenen: zeitgesteuerte Aktionen mit TT, ev(t, d), popS(t), Write-Ons (siehe craft.md → Bewegung). Verdrahte Epochen, Kameras und Brücken in src/bridges.js (Morph-verbundene Formate) oder lasse BRIDGES = [] für harte Schnitte.
3. node tools/build.mjs pieces/<name> → index.html (das Kit des Stils wird aus piece.json "style" gezogen).
4. Teste Kacheln während des Baus: node tools/tile.mjs pieces/<name> tile.png <frames...> – schau sie dir an; kachele über jeden Morph und Schnitt.
5. Vertonung in src/score.js (siehe craft.md → Sound).
6. node tools/export.mjs pieces/<name> --share → Frames, audio.wav, Stems, renders/final.mp4, renders/share.mp4 (--formats 9:16,1:1,16:9 für jedes Format; --blur 4 für Bewegungsunschärfe bei 1s-Stilen). Iteriere den Mix mit --only-audio (rendert die Partitur neu und multiplexiert sie, ~4× schneller).
7. node tools/review.mjs pieces/<name> → Kontaktbögen pro Einstellung, Schnittraster, Morph-Raster, Handlungsbogen, Anker, Text (abgeschnitten / überlappend / unter der Telefon-UI) und Sound (der lauteste Moment, die Stille davor, LUFS). Behebe, bis es besteht, betrachte die Bögen, schreibe eine PASS-Tabelle pro Einstellung in LOG.md. Vertraue der Textprüfung mehr als deinem Auge: Eine abgeschnittene Beschriftung sieht auf einem Kontaktbogen gut aus.

5. Liefern

Sende renders/share.mp4. Sage in ein paar Zeilen: was es ist, die Zahlen der Prüfungen, was die Überprüfung aufgedeckt und behoben hat, die schwächste Einstellung und was du nicht verifiziert hast (z. B. kannst du die Partitur nicht hören). Frage, was geändert werden soll: Geschichte, Look, Übergänge, Tempo, Sound.

6. Lernen

Hänge nach jedem Durchlauf an das LOG.md des Stücks an. Wenn etwas Neues schiefging oder funktioniert hat, schlage eine einzeilige Regel für craft.md, die STYLE.md des Stils oder eine Kit-Änderung vor und füge sie hinzu, wenn der Benutzer zustimmt.

Voice-Over (optional)

Frage bei der Aufnahme (Frage 3). Mit einer Stimme ist die Stimme die Uhr: jeder Beat beginnt ~0,3s nach dem Ende des vorherigen Satzes, und die großen Momente landen auf gesprochenen Wörtern. Das Skript ist das Storyboard: eine Zeile pro Beat.

1. Schreibe das Skript in pieces/<name>/voice/script.json: { "lead": 1.2, "tail": 1.8, "lines": [{ "id": "open", "text": "Wie es gesprochen wird.", "after": 0.45 }, ...] }. Schreibe Zahlen und Namen so, wie sie gesagt werden sollen. Halte es ≤ 3,5 Wörter/s; gib einer Zeile ein längeres after, wo das Bild Zeit zum Wirken braucht (ein Count, eine Bildunterschrift, die Stille vor dem Höhepunkt).
2. Baue vor der Stimme: node tools/voice.mjs pieces/<name> --scratch erzeugt eine Timing-Stimme mit der eigenen Sprachausgabe des Betriebssystems (niemals ausliefern), so dass das gesamte Stück animiert und überprüft werden kann.
3. Die Takes: eine Datei pro Zeile, gespeichert als voice/<id>.mp3 mit "file" auf der Zeile gesetzt.
   • Der ElevenLabs-Konnektor (falls der Benutzer ihn hat: Claudes Einstellungen → Konnektoren → ElevenLabs, mit OAuth angemeldet, kein API-Key): finde 2–3 Sprecher, die passen, mit der Sprachensuche, generiere eine Zeile in jeder (eine Variante pro Zeile, nicht vier), lasse den Benutzer wählen, dann generiere jede Zeile einmal mit dieser Stimme und dem Modell. Das Generierungsergebnis gibt einen kurzlebigen Download-Link pro Take: speichere jeden in voice/. Es kostet etwa ein Guthaben pro Zeichen; sage die Gesamtsumme vor dem vollständigen Durchlauf. Wenn der Konnektor während der Sitzung hinzugefügt wurde, erscheinen seine Tools möglicherweise erst nach einem Neustart der App.
   • Die eigene Aufnahme des Benutzers, eine Datei pro Zeile (oder geschnitten aus einem Take).
   • Rufe niemals eine Stimme von einer Website ab, auf die der Benutzer nicht verwiesen hat, und klone niemals eine Stimme ohne die Zustimmung ihres Besitzers.
4. node tools/voice.mjs pieces/<name> → voice/voice.wav (die Zeilen mit ihren Pausen) und voice.json (Start und Ende jeder Zeile und jedes Wortes, gehört im Audio von faster-whisper, lokal). Der Build injiziert es als VOICE.
5. Im Kopf: VL(id) ist eine Zeile, VW(id, word, n) wenn ihr n-tes word beginnt; Beats beginnen mit t1 + 0.3 der vorherigen Zeile; TIMELINE.narration kommt von VOICE.lines und DURATION von VOICE.duration. Setze Schreibvorgänge und Blitze auf die Wörter, die sie benennen. Setze den Höhepunkt-Treffer in eine Pause vor der Zeile, die ihn benennt: ein Treffer unter Sprache wird weggedrückt.
6. piece.json: "voice": { "file": "voice/voice.wav", "music": -12 }. Export mischt die Stimme über die Partitur (die Partitur bei music dB, weiter gedrückt, während die Stimme spricht) auf −14 LUFS. Review beurteilt den Handlungsbogen und das Höhepunktsfenster nur auf der Partitur (renders/audio-score.wav; eine Stimme ist lauter als jeder Treffer) und die Stimme mit seiner NARRATION-Prüfung.
7. Neuaufnahmen und Skriptbearbeitungen: ersetze die Datei einer Zeile (oder bearbeite ihren Text), führe voice.mjs erneut aus, baue neu: Szenen, die von VOICE gesteuert werden, bewegen sich mit. Ein geändertes Wort kann einen Hinweis verwaist lassen, der darauf zeigt; überprüfe diese Beats.

Musik: der eigene Track des Benutzers (optional)

Frage bei der Aufnahme (Frage 6). Ohne einen Track wird die Partitur in Code auf einem 120 BPM Raster komponiert. Mit einem:

1. Lege ihn ins Stück: pieces/<name>/audio/track.wav (WAV, MP3 oder M4A), und in piece.json: "music": { "file": "audio/track.wav", "start": 12.0, "gain": 0, "fade": 0.5 } (start = wo im Song das Stück beginnt).
2. node tools/beats.mjs pieces/<name>/audio/track.wav pieces/<name> --start 12 --dur <piece length> → beats.json: das Tempo, der erste Beat, jeder Beat und Takt, die stärksten Treffer, der lauteste Moment und die Drops. Übergib --bpm 128, wenn der Benutzer das Tempo kennt; überprüfe ansonsten seine Zeile "andere Tempi" (doppelt / halb / zwei Drittel Zeit ist der übliche Fehler).
3. Der Build injiziert es als BEATS; der Startkopf liest BPM und GRID0 daraus, und onBeat(t) schnappt eine Zeit auf das Achtel-Raster des Songs. Setze Schnitte, Morphs und Hinweise auf onBeat(...). Der Song entscheidet den Bogen: setze die Wende auf einen Drop (BEATS.quiet) und den Höhepunkt auf seinen lautesten Treffer (BEATS.loudest, BEATS.hits), nicht dorthin, wo eine komponierte Partitur sie gesetzt hätte.
4. Die Partitur (src/score.js) behält nur Soundeffekte (to = 's'): Export ersetzt den Musikbus mit dem Track, mischt den Effekt-Stamm darüber und normalisiert auf −14 LUFS. Das Raster des Reviews verwendet TIMELINE.gridOffset; der SOUND-Abschnitt sagt, ob der lauteste Moment im Höhepunktakt landet.
5. Die Browser-Vorschau spielt weiterhin die komponierte Partitur ab (keine Audiodateien auf der Seite); der Export hat den Track.

Assets: echte Screenshots und Logos (optional)

Frage bei der Aufnahme (Frage 7), wenn das Thema ein Produkt ist. Dann:

• node tools/capture.mjs <url> pieces/<name>/assets/home.png [--selector "css"] [--full] [--dark] [--hide "css"] macht Screenshots von der eigenen Website des Benutzers (eine Seite, ein Abschnitt, das Logo). Frage, bevor du etwas aufnimmst, das ihm nicht gehört. Logodateien, die er dir gibt, kommen ebenfalls in assets/ (PNG, SVG, JPG, WEBP).
• tools/build.mjs bettet alles in assets/ in index.html ein (das Stück bleibt eine Datei, und die Canvas bleibt für die Prüfungen lesbar); window.renderFrame erscheint, sobald die Bilder dekodiert sind, und jedes Tool wartet darauf.
• Zeichne sie mit drawAsset('home.png', x, y, w, h, { fit: 'cover' | 'contain', r }) innerhalb der eigenen Rahmung des Stils (ein zerrissenes Papierfoto, ein getuschter Rahmen, eine gedruckte Karte), damit sie zum Look gehören. asset(name) gibt das Bild zurück.
• Nur echte Produkt-UI: animiere die echten Bildschirme (crop, einzoomen, enthüllen, mit dem Helden darauf zeigen); zeichne niemals einen gefälschten Bildschirm, als wäre er das Produkt. Extrahiere Markenfarben aus den Screenshots.

Formate: ein Stück, mehrere Formen (optional)

Frage bei der Aufnahme (Frage 2, Mehrfachauswahl). Liste sie in piece.json "formats": ["9:16", "1:1", "16:9"] (das erste ist das Hauptformat). Der Startkopf liest ?format= und setzt W, H, SAFE und CX; Szenen platzieren Dinge mit LX(fraction), LY(fraction) und dimensionieren sie mit UNIT, und wählen eine andere Anordnung mit PORTRAIT / WIDE, wo eine Form es erfordert (eine Spalte von drei auf 9:16, eine Reihe von drei auf 16:9). Beschneide niemals einen 9:16-Render auf 16:9.

• node tools/export.mjs pieces/<name> --formats 9:16,1:1,16:9 --share → renders/final.mp4 (Hauptformat) und final-<w>x<h>.mp4 für die anderen.
• Überprüfe jedes: node tools/review.mjs pieces/<name> --format 16:9 (und tile / still / textcheck / storyboard akzeptieren auch --format). Die Textprüfung ist hier am wichtigsten: Eine breite Bildunterschrift, die auf 16:9 passt, kann auf 9:16 überlaufen.

Bewegung: Federn und Unschärfe

• Federn (kit/core.js): springMove(t0, a, b, SPRING.snappy) bewegt einen Wert mit einem kleinen Überschwinger und einem Einpendeln; springTrack([[t, v], ...]) folgt einem Wert durch viele Ziele ohne Sprung. Voreinstellungen: snappy (UI), smooth (Karten, Kamera), heavy (große Schrift, Logos), playful (Maskottchen). Geschlossen-rechnerisch, also bleiben Frames deterministisch. Bei On-2s-Stilen schreiten sie alle 2 Frames fort, wie es sein soll.
• Bewegungsunschärfe: export.mjs --blur 4 mittelt 4 Unter-Frames pro Frame – nur für Stile auf 1s (STYLE.ones: Mathe, isometrisch); handgezeichnete Looks auf 2s sind absichtlich scharf (Export warnt).

Parallele Agents (lange Stücke)

Ein 45–60s Stück hat 10–15 Szenen; teile die Arbeit auf:

[Der Rest des Inhalts wurde aus Platzgründen gekürzt]