skill-motion: animierte Filme mit Code
Ein Film dieser Art ist eine JavaScript-Datei, die jede Sekunde auf einem <canvas> zeichnet (seek(t)), eine
Tonspur (banda.mp3: Stimmen + Musik + Effekte) und ein daraus gerendertes MP4. Die Erstellung dauert etwa zwei Stunden
Arbeit, kostet nur ein paar Cent bei ElevenLabs, ist Bild für Bild korrigierbar und läuft live in einer
Präsentation ohne Internet.
Zwei Modi. Geschichten (Charaktere, Comic oder weich, für Emotionen) und Werbung (echtes Produkt, Rhythmus, Versprechen, damit
kaufen wollen). Entscheide zuerst: Wenn «Marketing», «Werbung», «Pro», «Demo» oder «um es dem Kunden zu zeigen» gesagt wird,
lies references/promo.md und verwende assets/motor-promo.js.
| Anfrage | Motor | Lese |
|---|---|---|
| Geburtstag, Familie, Einladung, Geschichte mit Charakteren | motor-base.js (Comic) oder motor-suave.js | guion.md, chispa.md |
| Werbung, Demo einer Webseite oder App, Video für einen Käufer, Reels | motor-promo.js + filmar_web.py | promo.md |
| Marke oder Launch mit technischem Look, Dokumentar-Kamera | motor-tech.js | motor-visual.md Abschnitt 9 |
| Karten, die sich neigen, Kamera die ohne echte Webseite fliegt | motor-3d.js | chispa.md |
| Erklären von Zahlen oder Mechanismen: Maße, Beschriftungen, Ablesungen, technische Zeichnung | motor-acotaciones.js (zusammen mit einem beliebigen Motor) | motor-visual.md Abschnitt 12 |
| Kamerafahrt, die eine 3D-Szene umkreist oder durchläuft | Orbita3D am Ende von motor-3d.js | motor-visual.md Abschnitt 13 |
Was es zum Funktionieren bringt, ist nicht die Technik, sondern drei Gewohnheiten: alles, was es sagt, ist wahr, es wird mit Deepgram gehört, statt geraten und es wird mit Rasterblättern angesehen, bevor gerendert wird. Claude sieht das Video nicht und hört es nicht während der Ausführung; diese beiden Kontrollen sind seine Augen und Ohren.
Was es braucht
Node 18 oder höher, Python 3, ffmpeg und Chrome. Für Stimme und Musik ein ElevenLabs-Konto (ELEVENLABS_API_KEY). Um
das Ergebnis zu «hören», ein Deepgram-Konto (DEEPGRAM_API_KEY, optional). Siehe INSTALAR.md.
Wo alles ist
| Ich brauche | Datei |
|---|---|
| Der Funke: Checkliste, damit es «wow» und nicht nur «gut» wird (vor dem Drehbuch lesen) | references/chispa.md |
| Konzept, getestete Stile, Sätze, Stimmbesetzung, Zeitplan | references/guion.md |
| Stimmen, Musik, Effekte, Mischung, Hören mit Deepgram | references/sonido.md |
| Der Zeichenmotor, Charaktere und Posen, Comic-Stil, Kompositionsregeln | references/motor-visual.md |
| Rendern, Light-Version, Präsentation, Veröffentlichen, Git | references/entrega.md |
| Startpunkt der .js: Comic-Stil oder weicher Stil | assets/motor-base.js (Comic), assets/motor-suave.js (weich, mit alternden Charakteren) |
| Seite zum Ansehen und Rasterblatt | assets/pelicula.html, assets/hoja.html |
| Film in einer Präsentation (Folie + Steuerung) und Builder | assets/pelicula-en-presentacion.html, assets/construir.py |
| Skripte | scripts/ (Schlüssel, Stimmen, Musik, Erzählung, Effekte, Mischung, Deepgram, Rendern, Light) |
| CC0-Soundeffekte inklusive | sfx/ (Credits in sfx/LICENSES.md) |
| Falsches 3D auf Canvas (sich neigende Karten, fliegende Kamera, Neonboden) | assets/motor-3d.js |
| «Tech & Pro»-Stil für Marken und Launches: Dokumentar-Kamera (HUD), Fokusrahmen, Alarme, Scan, Interface-Karten, Dashboard, Grid-Boden | assets/motor-tech.js und references/motor-visual.md Abschnitt 9 |
| Pro-Werbung, Produkt-Demo, Formate 16:9, 9:16 und 1:1 | references/promo.md, assets/motor-promo.js |
| Echte Webseite Bild für Bild mit GPU filmen | assets/filmar_web.py |
| Kunden-Brief und festes Storyboard mit Bildbereichen (vor dem Zeichnen einer Werbung) | assets/brief-cliente.md, assets/storyboard-plantilla.md, references/promo.md |
Cursor im Bogen mit Klick, Tippen, Eingaben mit Prellen, Versatz, Drift und Kameraschub. Jede Mauszeigerreise in einer Werbung geht im Bogen mit Pause vor dem Klick (cursorPro); gerade Bewegung ist verboten | motor-promo.js (cursorPro, cursor, tecleo, entra, escalonar, deriva, empuje), references/motor-visual.md Abschnitt 11 |
| Sichere Zonen, Vektor-Interface, Liste «Vor dem Rendern prüfen» und Politur-Bank | references/promo.md |
Zahlen des Drehbuchs in einem DATOS-Block für Einzeiler-Revisionen; Rendern ohne Audio | references/entrega.md Abschnitt 11 |
Anmerkungen im Drehbuch ([VISUAL], Pausen), jede Zahl auf dem Bildschirm mit ihrem Wort | references/guion.md Abschnitt 8 |
| Vokabular der Einstellungen mit Proportionen und der eingefrorenen Zeit | references/chispa.md |
| BPM messen und Musik nach Takten umsortieren | scripts/pulso.py, scripts/cortar_musica.py, references/sonido.md Abschnitt 13 |
| Testabschnitt, Zusammenbau in Teilen und neues Audio ohne erneutes Rendern | references/entrega.md Abschnitt 8 |
| Einen bereits ausgelieferten Film korrigieren, weil sich das Produkt geändert hat | references/entrega.md Abschnitt 10 |
| Gruß mit der Stimme der Person und Einladung mit Flyer | references/sonido.md Abschnitt 9, references/entrega.md Abschnitt 7 |
Der Prozess
Befolge die Schritte der Reihe nach; jeder hat seine Kontrolle, bevor es zum nächsten geht.
0. Ist ein Video jetzt sinnvoll? Wenn der Film Zahlen eines Geschäfts nennen wird (Gewinn, Preis, Kunden, Fristen), muss vor
dem Schreiben des Drehbuchs eine offiziell benannte Quelle dieser Zahlen existieren. Wenn es zwei Modelle gibt, die unterschiedliche Zahlen
liefern, oder die Zahl noch diskutiert wird, wird das Video nicht erstellt: Die Person wird informiert und es wird vorgeschlagen, die offene
Tabelle zu zeigen und zu besprechen. Ein Video kostet zwei Stunden und hinterlässt eine feste Zahl im Kopf des Betrachters. Details in
references/guion.md Abschnitt 9.
1. Konzept (mit der Person). Entscheide den Modus (oben). Zuerst references/chispa.md: Format mit Regeln, die
gebrochen werden, eine Wendung, die Personen mit Namen, ein wiederkehrender Charakter und ein «Wow»-Moment. Für wen, was soll er fühlen,
wie lange dauert es, wo wird es gezeigt. Schlage drei Konzepte vor, jedes in zwei oder drei Sätzen und mit einer Textvorschau, und
den Ton (die getesteten Stile sind in references/guion.md). Wenn die Person eine Idee gegeben hat, folge ihr wortwörtlich: Jedes
Element ihrer Anfrage ist eine Szene.
2. Überprüfen, was behauptet wird. Jede Sache, die der Film über das Produkt sagt, wird im Code gesucht. Was nicht
da ist, wird nicht gesagt; was da, aber deaktiviert ist, wird gesagt und der Person mitgeteilt. Gleiches gilt für ein Unternehmen oder ein Projekt,
das noch nicht existiert: Jede Zahl wird in GUION.md mit ihrer Quelle und als Fakt, Annahme oder Vorschlag notiert, und
Wörter, die verpflichten («Garantie», «existiert bereits», «in Sekunden», «erfüllt das Gesetz», ein Preis), werden nur verwendet,
wenn sie irgendwo entschieden und schriftlich festgehalten sind (references/guion.md Abschnitt 9).
3. Drehbuch. GUION.md im Filmordner: Wortlaut der Anfrage der Person, Stimmen, Musik, eine Tabelle mit
Sekunde, wer spricht, der Satz und was zu sehen ist. Kurze Sätze, einer pro Spur, neutrales Spanisch, ohne Gedankenstrich.
4. Stimmen. source scripts/llaves.sh und scripts/voces.py frases.json. Höre sie mit Deepgram an; erstelle die
erneut, die schlecht geworden sind, mit --solo. Wenn die Erzählung eine Sprachnotiz der Person ist, gibt es keine Sätze: references/sonido.md
Abschnitte 9 und 10.
5. Timing. scripts/armar_narracion.py <anfänge> --total <s>: lässt Luft zwischen den Sätzen und Lücken, in denen das Bild
für sich spricht. Mit Deepgram werden palabras.json (Sekunde jedes Wortes) zur Synchronisation erstellt.
6. Musik. Plan nach Abschnitten, die den Szenen folgen (scripts/musica.py); misst Puls und Lautstärke mit
scripts/pulso.py. Wenn die Abschnitte woanders gelandet sind, sortiere sie mit scripts/cortar_musica.py um.
7. Mischung. Effekte aus der enthaltenen CC0-Bibliothek (sfx/) und synthetisierte (scripts/efectos_sinteticos.py),
scripts/mezclar.py efectos.json auf -16 LUFS. Kontrolle: oir_con_deepgram.py --comparar zwischen der Erzählung allein und
der Tonspur: Kein Wort geht verloren. Wenn eines verloren geht, senke den Effekt, der in dieser Sekunde klingt, oder öffne eine Lücke in der
Musik.
8. Zeichnung. Bei Werbung zuerst Brief und festes Storyboard (assets/brief-cliente.md) und das Produkt filmen
(references/promo.md). Kopiere den Motor des Stils (assets/motor-base.js Comic, assets/motor-suave.js weich oder
assets/motor-promo.js Werbung) als mein-film/film.js, ändere den globalen Namen, schreibe eine Funktion pro
Szene nach dem Zeitplan. Seite pelicula.html und hoja.html aus assets/ (ändere den Namen der .js und
des Globals; füge Schriftarten hinzu, falls du andere verwendest). Generische Charaktere, niemals die echte Person.
9. Rasterblätter. source scripts/preparar_render.sh und node $R/render.mjs pelicula.html fotos.png --stills ...
mit 9 Zeitpunkten pro Blatt, den ganzen Film. Sieh sie an, korrigiere, was verdeckt, abgeschnitten, klein, überladen oder unleserlich ist
(Liste typischer Fehler in references/motor-visual.md) und sieh noch einmal hin. Bei Werbung zeichnet SEGURAS=1 die sicheren
Zonen und promo.md enthält die Liste «Vor dem Rendern prüfen».
10. Rendern. node $R/render.mjs pelicula.html <pfad>.mp4 30 1 6 im Hintergrund; kopiere das MP4 in den
Filmordner; scripts/liviano.sh zum Verschicken per Messenger. Sieh dir ein Bild der Light-Version an. Wenn die Stiländerung
groß ist, erstelle zuerst einen Abschnitt und rendere nur diesen Abschnitt neu, damit die Person es in Bewegung sehen kann
(references/entrega.md Abschnitt 8). Wenn sich nur das Audio geändert hat, rendere nicht: Füge die neue Tonspur an das stumme Video an.
10.b Video lesen. `scripts/revisar_texto.sh .mp4