supercut filmt Launchvideos direkt in der laufenden Web-App
Das MIT-lizenzierte CLI verbindet Code- und DOM-Analyse mit echten Playwright-Fahrten, lokalem Rendering und einer optionalen KI-Regie.
Ein gutes Launchvideo zeigt nicht bloß eine Oberfläche, sondern führt in wenigen Sekunden durch den entscheidenden Produktmoment. Genau diesen Teil versucht supercut zu automatisieren: Das Kommandozeilenwerkzeug analysiert Quellcode und DOM, wählt präsentationswürdige Bedienwege aus und steuert die laufende Web-App anschließend mit Playwright vor der Kamera. Aus realen Klicks, Texteingaben und Seitenzuständen entsteht eine reproduzierbare Demo mit filmischer Bewegung, Bewegungsunschärfe und Musik.
Das Paket trägt den Namen @co-messi/supercut, stellt den Befehl supercut bereit und wird in der Paketdatei als Version 0.1.0 geführt. Der Quellcode steht unter der MIT-Lizenz. Damit richtet sich das Projekt besonders an kleine Produkt- und Marketingteams, die echte Produktoberflächen zeigen wollen, aber nicht für jede Änderung eine komplette Bildschirmaufnahme von Hand inszenieren möchten.
Neu ist die Verbindung aus Regie und echter Bedienung
Konventionelle Bildschirmaufnahmen beginnen meist mit einer manuell vorbereiteten Klickfolge: Testdaten anlegen, Fenster ausrichten, Mausbewegungen wiederholen und hoffen, dass während der Aufnahme kein Zustand abweicht. supercut behandelt die Web-App dagegen als auswertbare Szene. Die Analyse von Quellcode und DOM liefert Hinweise darauf, welche Elemente vorhanden sind und welche Interaktionen eine nachvollziehbare Produktgeschichte ergeben können.
Entscheidend ist, dass das Ergebnis keine frei erfundene Produktanimation sein soll. Playwright bedient die tatsächliche Anwendung. Wenn im Video ein Formular ausgefüllt, ein Menü geöffnet oder ein Ergebnis angezeigt wird, geschieht dies in der laufenden Oberfläche. Das verbindet die Lesbarkeit einer geplanten Demo mit der Glaubwürdigkeit eines echten Produktzustands.
Die Repository-Dokumentation trennt die Arbeit in die Befehle generate, record und render. Dadurch bleibt die Produktion nicht in einem einzigen undurchsichtigen Lauf eingeschlossen: Die Regie kann vorbereitet, die Browserfahrt aufgenommen und das Material anschließend gerendert werden. Einzelne Artefakte lassen sich dazwischen bearbeiten, bevor der nächste Teil erneut ausgeführt wird.
Ein Launchmoment wird zur wiederholbaren Szene
Ein konkretes Beispiel ist eine neue Analysefunktion in einer SaaS-Anwendung. Das Launchvideo soll zunächst einen vorbereiteten Datensatz öffnen, danach einen Filter setzen und schließlich die neu erzeugte Auswertung zeigen. Bei einer manuellen Aufnahme müssen Cursorweg, Pausen und Seitenzustand für jeden Versuch erneut stimmen. Mit supercut lässt sich dieselbe Interaktionsfolge als reproduzierbare Szene ausführen.
Die Code- und DOM-Analyse hilft bei der Auswahl der sichtbaren Stationen. Playwright übernimmt danach die Browserinteraktion: Es öffnet die relevanten Ansichten, klickt die vorgesehenen Bedienelemente und trägt vorbereitete Texte ein. Die Kamera folgt dieser Fahrt, während das spätere Rendering die Aufnahme zu einer präsentierbaren Sequenz zusammensetzt. So wird nicht lediglich eine Liste von Funktionen abgefilmt; gezeigt wird ein zusammenhängender Nutzenmoment in der echten Anwendung.
Das ist vor allem dann wertvoll, wenn mehrere Varianten benötigt werden. Eine kurze Version kann direkt zum neuen Ergebnis springen, während eine längere Fassung den Ausgangszustand und die entscheidende Eingabe mitzeigt. Ändert sich die Oberfläche, lässt sich die Fahrt mit dem aktualisierten Produktzustand erneut aufnehmen. Das Video bleibt dadurch näher am aktuellen Produkt als eine einmalig zusammengeschnittene Aufnahme.
Playwright übernimmt die Fahrt, FFmpeg das Bild
Für die Browsersteuerung verwendet supercut Playwright. Diese Wahl macht Interaktionen reproduzierbar: Klicks und Eingaben werden nicht als bloße Cursorbewegungen aufgezeichnet, sondern an konkrete Elemente und Zustände der Web-App gebunden. Die benötigte Browserbasis ist Chromium. Für die Videoverarbeitung kommt FFmpeg hinzu; als weitere Voraussetzung nennt das Projekt Node.js ab Version 20.
Die Rollen sind damit klar verteilt. Die Web-App liefert die reale Oberfläche. Playwright erzeugt die kontrollierte Interaktion. Chromium stellt die Browserumgebung bereit. FFmpeg verarbeitet das aufgezeichnete Material. supercut verbindet diese Komponenten und ergänzt die filmische Regie. Laut Projektbeschreibung gehören dazu eine bewegte Kamera, Bewegungsunschärfe und Musik – also genau die Gestaltungsmittel, die aus einer reinen Funktionsaufzeichnung ein Launchvideo machen können.
Die Ausgabe ist auf Produktdemos in 1080p ausgerichtet. Das ist für Landingpages, Präsentationen und soziale Plattformen eine praktische Arbeitsgröße: Die Oberfläche bleibt lesbar, ohne dass für die Aufnahme ein externes Kamerasystem nötig wird. Weil die Quelle eine echte Browserdarstellung ist, sollten Demo-Daten, Zoomstufe und responsive Ansicht bereits vor der Fahrt so gewählt sein, dass die entscheidenden Elemente im Bild genügend Raum erhalten.
Die KI führt Regie, ist aber nicht für jede Aufnahme nötig
Die KI-Funktion von supercut ist optional. Sie kann aus den analysierten Informationen ein Skript für die Präsentation erstellen und – abhängig vom gewählten Modell – visuelle Qualitätskontrollen ausführen. Unterstützt werden DeepSeek, OpenRouter und eigene OpenAI-kompatible Anbieter. Damit ist die Regie nicht an einen einzigen Modelldienst gebunden.
Diese Trennung ist praktisch: Wer bereits genau weiß, welche Szene gezeigt werden soll, kann die Aufnahme und das Rendering lokal nutzen. Wer zuerst aus einer größeren Anwendung eine kompakte Produktgeschichte ableiten möchte, kann die KI-Regie hinzunehmen. Eine komplexe Oberfläche mit Navigation, Formularen und Ergebnisansichten wird so nicht wahllos abgefahren; das Modell kann daraus jene Stationen auswählen, die den Nutzen sichtbar machen.
Tokenkosten lassen sich begrenzen. Das ist besonders bei wiederholten Varianten relevant, weil nicht jede neue Aufnahme erneut eine umfangreiche Analyse benötigen muss. Ein vorhandenes Skript kann weiterverwendet oder gezielt angepasst werden. Die kostenträchtige Modellarbeit konzentriert sich damit auf Auswahl und visuelle Beurteilung, während Browserfahrt und Rendering auf dem eigenen Rechner stattfinden können.
Die Zwischenartefakte sind der eigentliche Hebel
Die Aufteilung in generate, record und render macht supercut mehr als nur zu einem Ein-Klick-Generator. Nach der Generierung kann ein Team die geplante Szene redaktionell schärfen: unnötige Navigation entfernen, Pausen an wichtigen Stellen verlängern oder die Reihenfolge so ändern, dass zuerst das Problem und anschließend die Lösung sichtbar wird. Danach wird nur die Browserfahrt neu aufgenommen.
Auch zwischen Aufnahme und Rendering bleibt ein sinnvoller Eingriffspunkt. Wenn die Interaktion stimmt, aber Tempo, Musik oder filmische Wirkung noch nicht passen, muss die Anwendung nicht zwangsläufig erneut bedient werden. Diese Entkopplung hilft bei Varianten für unterschiedliche Kanäle. Eine Landingpage benötigt möglicherweise eine ruhige, selbsterklärende Sequenz, während ein kurzer Social-Ausschnitt schneller zum sichtbaren Ergebnis kommen darf.
Für wiederkehrende Releases bietet sich eine kleine Bibliothek solcher Szenen an: Anmeldung mit Demokonto, Import eines vorbereiteten Datensatzes, Aktivierung einer neuen Funktion und Darstellung des Ergebnisses. Beim nächsten Release wird nicht das gesamte Video kopiert, sondern nur die betroffene Fahrt oder der veränderte Render angepasst. Die sichtbare Produktoberfläche bleibt dabei die maßgebliche Quelle.
Gute Demos beginnen mit einem klaren sichtbaren Ergebnis
Die stärkste Anwendungstechnik besteht darin, nicht die gesamte Oberfläche erklären zu wollen. Ein Launchvideo sollte einen konkreten Zustandswechsel zeigen: aus einer Eingabe wird eine Auswertung, aus einer leeren Ansicht wird ein befülltes Projekt oder aus einer Auswahl entsteht ein exportierbares Ergebnis. Quellcode- und DOM-Analyse liefern zwar viele mögliche Interaktionen, doch eine gute Sequenz konzentriert sich auf jene Elemente, die diesen Wechsel verständlich machen.
Dafür eignet sich eine vorbereitete Demo-Instanz mit kurzen, gut lesbaren Inhalten. Lange Freitexte, zufällige Daten und dicht gefüllte Tabellen erschweren die visuelle Führung. Besser sind stabile Testdaten, eindeutige Bezeichnungen und ein Endzustand, der sich deutlich vom Ausgangspunkt unterscheidet. Auch modale Fenster, Ladezustände und Animationen sollten reproduzierbar ausgelöst werden können, damit jede Aufnahme denselben Produktmoment erreicht.
Bei der Regie lohnt sich eine sichtbare Pause nach der entscheidenden Aktion. Wenn Playwright einen Filter aktiviert oder eine Generierung startet, braucht das Ergebnis einen Augenblick, in dem es gelesen werden kann. Filmische Bewegung sollte die Aufmerksamkeit zum relevanten Bereich führen, nicht mit der Oberfläche konkurrieren. supercuts Automatisierung ersetzt daher nicht die redaktionelle Entscheidung, welcher Moment die Produktneuheit am besten erklärt; sie macht diese Entscheidung wiederholbar ausführbar.
Für sensible Anwendungen gehört die Kamera in eine Demo-Umgebung
supercut führt echte Klicks und Texteingaben aus. Die Projektdokumentation empfiehlt deshalb, keine Produktionsdaten zu verwenden. Schutzfilter können Fehlbedienungen nicht in jedem Fall verhindern. Eine isolierte Demo-Instanz mit eigens angelegten Konten und Datensätzen begrenzt den möglichen Schaden und sorgt zugleich für vorhersehbare Aufnahmen.
Bei aktivierter Bildanalyse können außerdem ungeschwärzte Screenshots an den konfigurierten LLM-Anbieter übertragen werden. Hinzu kommen Crawling-Daten und – wenn diese Option verwendet wird – Hinweise aus dem Quellcode. Wer DeepSeek, OpenRouter oder einen OpenAI-kompatiblen Dienst für die Regie einsetzt, sollte deshalb nur Material zugänglich machen, das diesen Anbieter verlassen darf. Geheimnisse in Konfigurationsansichten, echte Kundennamen und interne URLs gehören nicht in die gefilmte Umgebung.
Die lokale Trennung bietet dafür einen klaren Ansatz: KI-gestützte Auswahl nur mit bereinigten Demo-Inhalten einsetzen, anschließend Aufnahme und Rendering offline ausführen. Wer keine externe Bildanalyse benötigt, kann die Szene manuell bearbeiten und den lokalen Teil der Werkzeugkette nutzen. So bleibt der praktische Vorteil der automatisierten Browserfahrt erhalten, ohne jede Produktionsphase an einen Modelldienst zu binden.
Ein offenes Werkzeug für kleine Launchteams
Die Paketmetadaten nennen Version 0.1.0, Node.js ab Version 20 sowie Playwright und Zod als Laufzeitabhängigkeiten. Zod dient dabei der Schemaüberprüfung, während Playwright die sichtbare Browsersteuerung trägt. Chromium und FFmpeg vervollständigen die lokale technische Grundlage.
Die MIT-Lizenz erlaubt Nutzung, Änderung, Veröffentlichung, Weitergabe und auch den Verkauf von Kopien, sofern Copyright- und Lizenzhinweis erhalten bleiben. Für kleine Teams ist das relevant, weil sich das CLI an die eigene Anwendung und bestehende Release-Werkzeuge anpassen lässt, ohne an ein geschlossenes Videoangebot gebunden zu sein. Die Software wird dabei ohne Gewährleistung bereitgestellt.
supercuts interessanteste Idee ist nicht eine vollständig autonome Werbefilmproduktion. Es ist die direkte Verbindung aus analysierbarer Web-App, programmatisch wiederholbarer Bedienung und filmischem Rendering. Damit lässt sich ein Feature so zeigen, wie es tatsächlich benutzt wird – und dieselbe Szene kann nach einer Produktänderung erneut vor die Kamera treten. Gerade für häufige Releases entsteht daraus eine brauchbare Alternative zur jedes Mal neu inszenierten Bildschirmaufnahme.