Eigenes Werkzeug
TweenWerk: Motion Design im Code. Sie führen Regie, die KI animiert.
TweenWerk ist das Motion-Studio, in dem ich meine Videos baue. Ein Video ist dort eine einzige Datei mit Ebenen, Keyframes, Effekten und Ton. Ich bearbeite sie im Studio mit der Maus, Claude Code bearbeitet dieselbe Datei über die Kommandozeile. Das Studio zeigt jede Änderung nach spätestens einer Sekunde.
Das Repository ist noch privat.
- Rendert auf dem eigenen Rechner
- Musik und Geräusche aus dem Code
- MIT-Lizenz
"tokens": { "colors": { "accent": …, … } },
"layers": [ …
{ "id": "titel", "type": "text",
"text": { "value": "Ihre Idee in Bewegung.",
"font": "$display", "color": "$ink",
"reveal": { "by": "word", "progress": { "keys": [
{ "t": 0.5, "v": 0, "ease": "out" },
{ "t": 1.9, "v": 1 } ] } } } },
… ]
Diese Grafik ist kein Video. Die TweenWerk-Engine rechnet sie gerade in Ihrem Browser. Ändern Sie Text, Farbe oder Kurve und sehen Sie zu.
72 Sekunden, komplett in TweenWerk gemacht
Skript, Sprecherstimme, Musik, Geräusche und Schnitt dieses Films kommen aus TweenWerk. Die Bilder im Hintergrund sind echte Aufnahmen aus dem Studio. Gerendert hat ihn derselbe Befehl, den Sie weiter unten im Terminal sehen.
Was im Studio steckt
Sieben Bereiche, jeder mit einem echten Bildschirmfoto aus dem Studio. Die Markierungen zeigen, wo Sie was finden.
- Ebenen
- Bühne
- Eigenschaften
- Keyframes
Ebenen, Keyframes und Kurven wie in After Effects
Links die Ebenen, in der Mitte die Bühne mit Anfassern zum Verschieben, Drehen und Skalieren, rechts die Eigenschaften. Unten liegt die Zeitleiste mit Keyframes, Kurven, Markern und der Wellenform der Musik. Keyframes rasten auf Takte, Marker und andere Keyframes ein.
- Ebenen: Fläche, Form, Text, Bild, SVG, Video, Null-Objekt und verschachtelte Komposition
- Effekte: Unschärfe, Leuchten, Schatten, Einfärben, dazu Mischmodi und Masken aus anderen Ebenen (Track Mattes)
- Text erscheint je Zeichen, je Wort oder je Zeile
- Rückgängig, Wiederholen und Tastenkürzel wie J, K und L
- Absätze
- Stimmung
- Wortzeiten
Sprechertext mit einer Stimmung je Absatz
Im Skript-Reiter schreiben Sie den Sprechertext, oder Claude schreibt ihn. Jeder Absatz bekommt eine Stimmung, etwa ruhig, neugierig oder ernst. Google Gemini spricht den Text, danach misst ein Whisper auf dem eigenen Rechner die Zeit jedes Wortes.
- Zwölf Stimmungen, von sachlich bis flüsternd
- Nur geänderte Absätze gehen noch einmal an Gemini
- Vor dem Senden stehen Zeichenzahl und Kosten da
- Bilder können genau auf einem Wort landen
- Kommentar am Bild
- Zeit und Ebene
- Erledigt
Kommentare, die an der richtigen Stelle hängen
Im Review-Modus klicken Sie auf die Stelle im Bild, die Sie meinen, und schreiben Ihren Kommentar. Er wird mit Zeit, Bildpunkt und der Ebene darunter gespeichert. Claude arbeitet die offenen Kommentare ab und antwortet direkt am Pin.
- Kommentar an Bild, Zeit und Ebene geheftet
- Taste N springt zum nächsten offenen Kommentar
- Erledigte Kommentare landen bei der Version, die sie gelöst hat
- Standbilder
- Kommentar am Standbild
- Kommentarliste
- Marker
Erst Standbilder, dann Bewegung
Bevor etwas animiert wird, rendert TweenWerk Standbilder an Markern, Takten oder Keyframes. Daraus wird das Storyboard, das Sie freigeben oder kommentieren. Die Standbilder kommen aus derselben Szene wie das fertige Video, Entwurf und Ergebnis passen also zusammen.
- Standbilder an Markern, Takten oder Keyframes
- Kommentare direkt auf dem Standbild
- Kontaktbogen über die ganze Länge, jedes Feld mit Zeitstempel
- Sprecher
- Wellenform
- Spurregler
- Lautstärke, Blenden
Musik und Geräusche aus dem Code
Jeder Ton liegt als eigener Block auf einer Spur, ähnlich wie in Premiere. Sie verschieben, kürzen und regeln die Lautstärke direkt auf der Spur. Musik und Geräusche erzeugt TweenWerk selbst, im Takt der Szene.
- Drei Musikstile und sechs Geräusche, ohne Download und ohne Lizenz
- Gleicher Startwert, gleiche Datei, bis aufs Byte
- Takte aus einem festen Tempo oder aus einer WAV-Datei erkannt
- Stummschalten und Solo je Spur
- Stile
- Aktiver Stil
- Vorschau
Ein Klick ändert Farben und Schriften im ganzen Video
Farben und Schriften stehen als Platzhalter in der Szene, etwa $accent für die Akzentfarbe. Wechseln Sie den Stil, ändern sich alle Ebenen auf einmal. Gelungene Elemente legen Sie mit einer Notiz in die Bibliothek und ziehen sie ins nächste Projekt.
- Vier Stile mitgeliefert, eigene aus jedem Projekt
- Elemente aus der Bibliothek übernehmen die Farben des Zielprojekts
- Das Schriftmenü zeigt jede installierte Schrift in ihrer eigenen Form
- Speichern
- Entwurf
- Freigabe
- Ältere Fassungen
Jede Runde ist eine Version
Mit Strg+Alt+S speichern Sie einen Stand. Ältere Versionen sehen Sie sich an, ohne sie zu verändern, und holen sie bei Bedarf zurück. Vor der Auslieferung geben Sie eine Version frei und rendern genau diesen Stand.
- Versionen ansehen, zurückholen und freigeben
- Erledigte Kommentare hängen an ihrer Version
- Eine bestimmte Version per Befehl rendern
KI als Motion Designer: Claude Code animiert, Sie führen Regie
Claude Code ist der Programmier-Agent von Anthropic. Er liest Dateien, ändert sie und führt Befehle aus. Für TweenWerk reicht das, denn jeder Schritt geht über die Kommandozeile: anlegen, prüfen, Standbilder, Ton, Rendern. Die KI schreibt Storyboard und Animation in die Szene. Ob es gut aussieht, entscheiden Sie.
- Brief und Storyboard zuerst, animiert wird erst nach Ihrer Freigabe
- Claude prüft die Szene mit lint und sieht sich Standbilder und Kontaktbögen an
- Ihre Kommentare aus dem Review arbeitet Claude einzeln ab und antwortet am Pin
- Jede Runde wird eine Version, gerendert wird die, die Sie freigeben
Motion Design mit Blender, gesteuert aus TweenWerk
Für 3D nutze ich Blender, das kostenlose Open-Source-Programm. TweenWerk startet Blender ohne Fenster, rendert die Szene aus blockout.py und übernimmt Kamera und Trackpunkte in die eigene Szene. Text und Grafik sitzen dann auf denselben Pixeln wie in Blender, auch wenn die Kamera fährt.
- vc blender rendert blockout.py oder eine .blend-Datei ohne Fenster
- Schwenk, Neigung, Rollen und Zoom der Kamera landen in scene.json, dazu jeder track_-Punkt
- Auf Wunsch macht ein Video-Modell über fal.ai aus dem grauen Blockout ein fertiges Video. Vorher steht der Preis da, gesendet wird erst mit --yes
- Musik, Geräusche und Schlussbild kommen wieder aus TweenWerk
Ziehen Sie die Trennlinie oder bewegen Sie sie mit den Pfeiltasten.
Realistische Sprecherstimme per KI, jedes Wort im Takt
Für die Stimme nutze ich Google Gemini. Jeder Absatz bekommt eine Stimmung, Gemini spricht ihn. Danach misst ein Whisper-Modell auf dem eigenen Rechner, wann jedes Wort fällt. So erscheint ein Bild genau auf dem Wort, und die Musik wird leiser, solange gesprochen wird. In der Hörprobe leuchten die Wörter mit, während die Stimme spricht.
- Zwölf Stimmungen je Absatz, von sachlich bis flüsternd
- Nur geänderte Absätze gehen noch einmal an Gemini, der Rest bleibt
- Wortzeiten lokal gemessen, im Mittel auf etwa 12 Millisekunden genau
- Musik unter der Stimme standardmäßig 12 dB leiser
Alles beginnt mit einem Satz.
Dann kommt Bewegung ins Bild. Jedes Element landet auf dem Takt der Musik.
Licht, Farbe und Körnung rechnet die Grafikkarte. So lebt jeder Hintergrund.
Der Sprechertext geht an Google. Kundentexte schickt TweenWerk nur über einen bezahlten Zugang und erst nach Rückfrage. Bei Ihren Texten stimme ich das vorher mit Ihnen ab.
Motion-Video ohne Higgsfield AI: Gestaltung braucht keine Credits
Higgsfield erzeugt KI-Videos und rechnet Generierungen in Credits ab. Für einzelne Einstellungen ist das praktisch. Ein Motion-Video besteht aber zum größten Teil aus Gestaltung: Text, Takt, Übergänge, Ton. Das rechnet TweenWerk im Code auf dem eigenen Rechner, so oft Sie wollen.
- Rendern kostet keine Credits, auch nicht in der zehnten Korrekturrunde
- Gleiche Szene, gleiches Bild: eine Änderung trifft genau die Stelle, die Sie meinen
- KI-Video nur für einzelne Einstellungen, über fal.ai und mit Preis vorab
- Bei Higgsfield verfallen Abo-Credits laut eigener Hilfeseite am Ende jedes Abrechnungszeitraums
Sechs Animationsprinzipien, nur aus Code
Antizipation, Stauchen und Strecken, langsames Anfahren und Abbremsen, Bögen, Nachschwingen und Timing. Jedes Prinzip bekommt eine eigene Bildwelt und wird von einem Ball gespielt. Kein KI-Bild, kein Video-Modell, nur Ebenen, Kurven und Takt.
TweenWerk auf GitHub: bald frei unter MIT-Lizenz
Ich veröffentliche TweenWerk als Open Source. Im Moment ist das Repository noch privat. Sobald es öffentlich ist, wird der Knopf unten aktiv. Das brauchen Sie, um es auszuprobieren:
- Node.js 22 oder neuer
- Python 3.11 oder neuer, nur die Standardbibliothek
- ffmpeg und ffprobe
- Chromium, Chrome oder Edge
- Optional: Blender für 3D, getestet mit Version 5.2
- Optional: API-Schlüssel für fal.ai (KI-Video) und Google Gemini (Sprecherstimme)
- Entwickelt und getestet unter Windows 11, Rendern auf macOS und Linux ungetestet
MIT-Lizenz, © 2026 Daniel Bröning
Noch nicht öffentlich. Fragen zum Werkzeug beantworte ich gern über das Kontaktformular.