Framefields: Videos mit Code erstellen und prüfen

Framefields richtet sich an Menschen, die Videos mit Code erstellen möchten. Die quelloffene Bibliothek verbindet TypeScript-Kompositionen mit Animation, Bildbearbeitung und GPU-Rendering. Ein Programmieragent kann beim Schreiben helfen; der Film bleibt als bearbeitbarer Quellcode im Projekt.

Einfach erklärt: Wozu dient die Website?

Hier findest du die Bibliothek und ihre Anleitungen. Stell dir einen kurzen Produktfilm vor: Eine Überschrift fährt ins Bild, ein Diagramm wächst und ein Objekt dreht sich. Im Code legst du fest, wo diese Elemente stehen und wann sie sich bewegen. Framefields macht daraus die Bilder des Videos und eine MP4-Datei. Dafür brauchst du ein eingerichtetes Softwareprojekt. Die Website selbst ist keine fertige Online-Schnittoberfläche.

Welche Umgebung brauchst du?

Die Dokumentation verlangt Node.js ab Version 22 und ein ES-Modul-Projekt. Der native Renderer nutzt WebGPU mit einem passenden Grafik-Backend. Unterstützte Software-Renderer ermöglichen auch CPU-Ausführung, allerdings langsamer. Da Framefields derzeit als Beta geführt wird, solltest du die Paketversion festhalten und zunächst eine repräsentative Szene prüfen.

Ein eigener Render-Worker kann Projekte aus einem Git-Commit samt Medien verarbeiten und Ergebnisse hochladen. Er ist eine zusätzliche Bereitstellung mit eigener Infrastruktur, kein nachgewiesenes kostenloses Cloud-Kontingent.

Titel, Bildkomposition und 3D im selben Projekt

Animierte Vektorschrift, Layouts und einzelne Buchstabenbewegungen eignen sich für Intros und Erklärsequenzen. Bilder und Videolayer lassen sich mit Farbkorrektur, Unschärfe, Körnung, LUTs, Masken und Übergängen kombinieren. Kameras, Licht, Materialien und importierte 3D-Modelle ergänzen die flachen Elemente.

Diagramme, Lottie-Dateien und Tonspuren erlauben weitere Formen der Produkt- oder Datenpräsentation. Prozedurale Geräusche und audiodynamische Signale können Bewegung unterstützen. Die Bibliothek stellt Bausteine bereit; Gestaltung, geeignete Medien und nachvollziehbares Timing bleiben Teil des Projekts.

So entsteht ein überprüfter erster Film

1. Richte das Projekt nach der offiziellen Starthilfe ein. Beachte die Freigabe des benötigten Installationsskripts für die native Abhängigkeit.
2. Installiere bei Bedarf die Agent-Skills. Beschreibe Inhalt, Text, Dauer, Seitenverhältnis, vorhandene Medien und gewünschte Ausgabe möglichst konkret.
3. Trenne gemeinsame Gestaltung, Komposition und Render-Skript. Lade echte Schriftdateien und stelle sicher, dass Git-LFS-Medien vollständig vorliegen.
4. Prüfe Typen, einzelne PNG-Bilder und anschließend ein Bildraster. In der lokalen Vorschau kontrollierst du Bewegung und Ton und kannst Hinweise direkt im Bild hinterlassen.
5. Erzeuge die MP4-Datei mit aktivierter QA, prüfe die Meldungen und spiele den Export vollständig ab.

Die Vorschau bietet Scrubbing und Einzelbildschritte. Sie hilft besonders dabei, schlecht lesbare Texte oder unpassende Übergänge früh zu erkennen.

Lokale Bildanalyse, Lizenz und Daten

ONNX-Modelle können Motive erkennen, segmentieren und Körperposen erfassen. Damit sind etwa mitwandernde Beschriftungen oder Freistellungen möglich. Bei withVision stammen die Ergebnisse aus dem vorherigen gerenderten Bild; Bild null liefert noch keine. Prüfe diesen Ablauf anhand aufeinanderfolgender Bilder oder des Videos. Ein Raster weit auseinanderliegender Frames ist dafür ungeeignet. Details enthält die Vision-Dokumentation.

Stand 21. Oktober 2026: Die Software steht unter Apache-2.0. KI-Abonnements, Rechenleistung, Hosting und Medienrechte sind davon getrennt. Ein allgemeiner Cloud-Preis wurde nicht verifiziert.

Modelle werden beim ersten Einsatz heruntergeladen und lokal gespeichert. Die Skills bestehen aus Anweisungen und versenden selbst keine Daten. Welche Dateien ein externer Programmieragent oder Render-Server verarbeitet, hängt dagegen von dieser separaten Umgebung ab.

Häufige Fragen

Muss ich jede Codezeile selbst schreiben?

Nein. Die offiziellen Skills unterstützen Programmieragenten beim Erstellen und Überarbeiten der Komposition. Einrichtung, Materialien und visuelle Kontrolle bleiben erforderlich.

Wie kontrolliere ich das Ergebnis?

Nutze PNG-Einzelbilder, Bildraster und die Vorschau mit Ton. Die endgültige MP4-Datei solltest du zusätzlich abspielen; Typprüfung allein bestätigt keine gute Gestaltung.

Ist die gesamte Produktion kostenlos?

Die quelloffene Bibliothek ist nicht gleichbedeutend mit kostenlosen KI-Diensten oder kostenloser Hardware. Prüfe auch Lizenzen für Schriften, Musik und andere Medien.

Offizielle Anleitungen und Community

• Agent-Einrichtung: Skills und Arbeitsablauf.
• GitHub-Projekt: Quellcode, Beispiele und Fehlerberichte.
• Offizieller Discord: Austausch mit der Community.
• Gatewai auf YouTube: Beispielfilme ansehen.