Ich wollte den Look des Stranger-Things-Vorspanns. Dünne rot-orange Linien, die auf reinem Schwarz leuchten, an den Rändern sanft aufblühen und an der Kamera vorbeiziehen, als würdest du durch sie hindurchfliegen. Nicht das Logo, nicht die Schrift, nur diese Stimmung: etwas Riesiges, halb Geformtes, von innen beleuchtet.
Also habe ich ChatGPT Work geöffnet, den Agentenmodus in OpenAIs ChatGPT-Desktop-App, und es gebeten, den Shader für mich zu bauen. Ich habe nie eine Zeile Shader-Code geschrieben. Ich habe beschrieben, was ich wollte, ChatGPT hat es geschrieben, und Visibox hat es ausgeführt, live, auf Musik reagierend, alles ohne dass ich einen Texteditor angefasst habe. Das ist der ganze Trick dieses Videos, und es lohnt sich, ihn auseinanderzunehmen, denn der interessante Teil ist nicht der fertige Visualizer. Es ist das Hin und Her, das es gebraucht hat, um dorthin zu kommen.
Was ein Visualizer in Visibox eigentlich ist
Visibox 5 hat eine Funktion namens Visualizer bekommen: generative, GPU-gerenderte Clips, die im Raster neben deinen normalen Videoclips liegen. Manche sind audioreaktiv und springen zur Musik. Manche laufen einfach. So oder so löst du sie genauso aus wie alle anderen Clips in deinem Projekt.
Es gibt zwei Formate. MilkDrop ist das ältere, entstanden in der Winamp-Ära, und im Internet kursiert eine riesige Bibliothek von .milk-Presets, die du direkt in Visibox ziehen und nutzen kannst. ISF ist neuer, vom Team hinter der VJ-Software VDMX: eine Shader-Datei mit einem kleinen Header, der ihre einstellbaren Eingänge deklariert. Visibox unterstützt beide, aber für dieses Projekt habe ich ISF verwendet, weil sich herausstellt, dass genau das die Art von Datei ist, die eine KI sauber schreibt.
Die MCP-Verbindung einschalten
Bevor irgendetwas davon funktioniert, muss Visibox mit deinem KI-Assistenten kommunizieren. Das passiert einmalig, in den Einstellungen, unter Connect to AI Tools. Visibox sucht nach installierten KI-Apps und richtet sich in jeder automatisch ein. Danach kann ChatGPT (oder Claude oder was auch immer du benutzt) dein Projekt sehen, die Visualizer-Formate lesen, Presets bauen und sogar die Wiedergabe steuern: Lautstärke, Vollbild, das Auslösen von Clips. Ich habe geprüft, ob die Verbindung stand, indem ich ChatGPT gefragt habe, ob es Visibox erreichen kann; es hat mit meinem aktuellen Lautstärkepegel geantwortet.
Ein Detail ist hier wichtig: Visibox verbindet sich als lokales Tool, das auf deinem eigenen Computer läuft, du brauchst also eine Desktop-KI-App, die es erreichen kann. Die ChatGPT-Website im Browser kann eine lokale App wie Visibox nicht sehen. Deshalb läuft das hier über ChatGPT Work, einen der Modi in OpenAIs Desktop-App (dieselbe App, die kürzlich Codex einverleibt hat), oder über Claude Desktop, statt über chatgpt.com. Ab hier nenne ich es einfach ChatGPT.
Dasselbe habe ich in einem früheren Video mit Claude Desktop gemacht, und der Ablauf war nahezu identisch.
Der Trick: Lass die KI zuerst die Vorlage beschreiben
Bevor ich um Code gebeten habe, habe ich ChatGPT gebeten, den Stranger-Things-Vorspann in eigenen Worten zu beschreiben, damit wir uns auf ein Konzept einigen konnten, bevor irgendetwas gebaut wurde. Dieser eine Schritt hat mehr bewirkt, als ich erwartet hatte.
Es kam mit etwas zurück, das einer Einstellungsbeschreibung nahekam: fast völlige Schwärze, dünne rot-orange Linien, die an einer Kamera vorbeiziehen, sanftes Bloom, leichte Unschärfe und sogar eigene Vermutungen zur Audioreaktivität. Das gab mir etwas Konkretes, auf das ich reagieren konnte, statt einer leeren Seite.
Ich habe ihm gesagt, was es behalten und was es ändern sollte: geometrische Fragmente statt Buchstabenformen (zu nah daran, die Serie nachzubilden, und ehrlich gesagt ohne sie brauchbarer), konfigurierbare Farben, damit die Palette später auch blau werden konnte, und ständige Vorwärtsbewegung, neue Schichten von Formen, die aus dem Dunkel auftauchen, während alte über die Ränder des Bildes hinausdriften.
Ein Hinweis war wichtiger als alle anderen: Lass das Bild nie leer werden. Egal welche Dichte-Einstellung, es sollten immer irgendwo im Tiefenfeld Formen sein. Das ist der Unterschied zwischen einem Visualizer, der lebendig wirkt, und einem, der wirkt, als würde er darauf warten, dass etwas passiert.
ChatGPT hat das Konzept selbst benannt, aus eigenem Antrieb: Ember Geometry. Als wir uns darauf geeinigt hatten, bin ich für das eigentliche Coden auf ein leistungsfähigeres Reasoning-Modell umgestiegen und habe ihm gesagt, es solle das Preset als neuen ISF-Visualizer bauen.
Erster Build: ein schwarzer Bildschirm
ChatGPT hat ein paar Minuten gearbeitet, die ganze Zeit über MCP mit Visibox kommuniziert, die ISF-Formatspezifikation gelesen, den Shader geschrieben und ihn als neues Preset registriert. Dann bin ich zurückgewechselt, um es mir anzusehen.
Schwarzer Bildschirm. Nichts.
Das ist der Teil, den die meisten Videos herausschneiden würden. Ich nicht. Ich habe ChatGPT einfach gesagt, was ich sah: einen schwarzen Bildschirm, keinen Visualizer, und es gebeten, seine eigene Syntax zu prüfen. Es fand einen Compile-Fehler im Fragment-Shader, irgendetwas über die unzulässige Verwendung eines reservierten Wortes, und behob ihn. Zweiter Versuch: da war es. Leuchtende rot-orange Linien, die an der Kamera vorbeizogen, genau die Stimmung, die ich beschrieben hatte. Dieser Fix hat eine Nachricht und ein paar Minuten gedauert.
Zu reaktiv, dann gerade reaktiv genug
Ich habe etwas Musik angemacht, um zu sehen, wie er auf Audio reagiert, und es war eine Menge. Die Bewegung kehrte sich mit dem Bass um, sodass es sich statt nach kontinuierlicher Vorwärtsbewegung so anfühlte, als würde das Ganze hin und her ruckeln. Etwa zehn Sekunden lang schön anzusehen, danach ablenkend.
Ich habe ChatGPT gesagt, was nicht stimmte: Die Audioreaktivität überschrieb die Vorwärtsbewegung, und ich wollte den Vorwärtsschub in Ruhe lassen. Bass und Höhen durften weiterhin Glühen und Körnung antreiben, nur nicht die Kamerabewegung. Etwa eine Minute später kam das Update. Ruhiger, kontrollierter, aber immer noch deutlich lebendig, wenn die Musik einsetzte.
Es in ein Projekt zu bekommen, war der einfache Teil: Ember Geometry auf ein Lied ziehen, genau wie jeden anderen Clip, im Vollbild laufen lassen, fertig.
Warum das mehr zählt als der Shader selbst
Nichts davon hat verlangt, dass ich GLSL kenne oder die Parameter-Syntax von ISF oder irgendetwas über Shader-Kompilierung. Verlangt war, genau zu sein bei dem, was ich wollte, ehrlich bei dem, was nicht funktionierte, und bereit zum Hin und Her, statt den ersten Wurf zu akzeptieren. Diese Schleife, beschreiben, anschauen, korrigieren, ist die eigentliche Fähigkeit, und sie hängt nicht speziell an ChatGPT. Schalte die MCP-Verbindung ein, einigt euch auf ein Konzept, bevor Code geschrieben wird, und rechne damit, dass der erste Build ein, zwei Rückmeldungen braucht. Das ist normal, kein Scheitern.
Willst du denselben Trick auf Overlay-Effekte statt Vollbild-Visuals anwenden? Dazu gibt es ein Begleitvideo: Overlay-Effekte mit KI. Und wenn du lieber einer strukturierten Schritt-für-Schritt-Anleitung folgst als einer Session-Geschichte, gibt es auch ein schriftliches Rezept: einen KI-generierten Visualizer von Grund auf bauen.
Visibox kommt mit einer kostenlosen 14-Tage-Pro-Testversion. Mehr zu Visualizern, MilkDrop und ISF im Handbuch.
