CSS-only-Animation – 10 div-Elemente, ~40 Zeilen CSS, kein JavaScript. Nahtlose 30-Sekunden-Schleife. Erstellt in einer einzigen KI-Konversation.

Das ist kein Framework und keine Bibliothek. Es handelt sich um einfaches HTML und CSS – dieselben Tools, die seit Jahrzehnten in jedem Browser vorhanden sind. Eine einzige benutzerdefinierte CSS-Eigenschaft (--i) speist in einen calc() Ausdruck, sodass eine Animationsregel zehn verschiedene Geschwindigkeiten steuert. Die KI hat die Technik herausgefunden; du hast nur beschrieben, was du sehen wolltest.

Das sollte man im Hinterkopf behalten, wenn wir uns mit Tools wie p5.js und Three.js beschäftigen: Mit sehr wenig lässt sich viel erreichen.

Über Text-zu-Video hinaus: Mit KI Code schreiben, der Bilder generiert

In unserem vorherigen Artikel über die Erstellung von Konzertvisualisierungen mit KI haben wir uns Text-zu-Video-Tools wie Sora, Veo und Runway angesehen, die aus schriftlichen Eingaben Videoclips generieren. Diese Tools eignen sich hervorragend für die Erstellung von filmischen, fotorealistischen Inhalten – traumhafte Landschaften, abstrakte Flüssigkeitswelten, kosmische Flugreisen. Es gibt jedoch noch einen anderen Ansatz, der ebenso leistungsstark und wohl auch unterhaltsamer ist: die Verwendung von KI zum Schreiben von Code, der Visualisierungen generiert.

Du musst nicht programmieren können. Das übernimmt die KI für dich. Du musst nur wissen, was du sehen möchtest. Manche nennen das „Vibe Coding“ – du beschreibst deine Vision in einfacher Sprache und überlässt der KI die Umsetzung. Das ist mittlerweile eine der beliebtesten Anwendungen von KI-Tools und eignet sich perfekt für die Erstellung von Visualisierungen.

Anstatt ein Video zu beschreiben und darauf zu warten, dass eine KI es rendert, beschreibst du eine Animation im Gespräch, und die KI schreibt ein Programm, das sie erstellt – direkt in deinem Browser, in Echtzeit. Die Ergebnisse sind algorithmisch, geometrisch und endlos anpassbar. Denk an pulsierende Gitter, spiralförmige Partikel, sich verwandelnde Formen, generative Muster und optische Täuschungen im Stil der Op-Art. Das ist KI-gestütztes kreatives Codieren – und so haben wir unser Op-Art-Videopaket erstellt.

Warum KI-generierten Code für Visualisierungen verwenden?

Bevor wir uns mit den Tools befassen, sollten wir uns zunächst einmal mit den Gründen befassen, warum du diesen Ansatz der Text-zu-Video-Generierung vorziehen könntest:

Perfekte Schleifen. Code-basierte Animationen können so gestaltet werden, dass sie von Anfang an nahtlos in einer Schleife laufen. Es sind keine Überblendungstricks erforderlich – die Mathematik funktioniert einfach.
Unendliche Variationen. Ändere eine Farbe, eine Geschwindigkeit, eine Form, einen Parameter – und schon erhältst du ein völlig anderes Bild. Eine Eingabeaufforderung kann Dutzende einzigartiger Schleifen erzeugen.
Es macht süchtig. Im Ernst. Sobald du anfängst, „Jetzt mach eine Spirale daraus“ zu sagen und zu beobachten, wie die KI den Code in Echtzeit umschreibt, ist dein Nachmittag gelaufen.

Code-generierte KI vs. Text-zu-Video-KI: Wann sollte man welche verwenden?

Wenn du unseren vorherigen Artikel über KI-generierte Grafiken gelesen hast, fragst du dich vielleicht, wann du welchen Ansatz verwenden solltest. Hier ein kurzer Vergleich:

Text-zu-Video-KI (Sora, Runway, Veo)

KI-Code-Generierung (dieser Artikel)

Am besten geeignet für

Filmische, organische, fotorealistische Bilder

Geometrische, algorithmische, musterbasierte Visualisierungen

Looping

Erfordert Bearbeitungstricks oder spezielle Werkzeuge

Mathematisch nahtlos im Design

Anpassung

Jedes Mal von Grund auf neu generieren

Ändere einen Parameter, erhalte eine neue Variante

Dateigröße

Groß (komplexe Videodaten)

Klein (saubere, komprimierbare Bewegung)

Einrichtung

Cloud-Dienstkonto + Guthaben

Kostenloser KI-Chatbot in deinem Browser

Stil

Verträumt, surreal, fotografisch

Präzise, geometrisch, Op Art

KI-Tools, die visuellen Code schreiben

Die wichtigsten KI-Chatbots verfügen mittlerweile über Live-Code-Vorschau-Funktionen – Tools, die Vibe-Coding ermöglichen. Du gibst ein, was du möchtest, und die Tools generieren HTML-, CSS- und JavaScript-Code, dessen Ausführung du sofort sehen kannst. Hier findest du eine Übersicht über die verfügbaren Funktionen.

Claude (Artefakte)

Claude von Anthropic verfügt über eine Funktion namens „Artifacts“, die ein Seitenfenster neben deiner Unterhaltung öffnet. Wenn du Claude bittest, visuellen Code zu schreiben, wird das Ergebnis direkt dort angezeigt – du erhältst eine interaktive Live-Vorschau neben dem Code. Fordere Änderungen an („Farben wärmer machen“, „Rotation verlangsamen“, „mehr Partikel hinzufügen“) und die Vorschau wird sofort aktualisiert.

Claude schreibt in der Regel sauberen, gut strukturierten Code und kann besonders gut mit kreativen Programmieraufgaben umgehen. Es funktioniert hervorragend mit p5.js, Three.js, der Canvas-API und CSS-Animationen – alle werden über CDN-Links in einer einzigen HTML-Datei geladen.

Sowohl die kostenlose als auch die kostenpflichtige Version unterstützen Artefakte. Verfügbar unter claude.ai.

ChatGPT (Leinwand)

ChatGPT von OpenAI verfügt über Canvas, einen ähnlichen Arbeitsbereich in einem Seitenpanel, der HTML und JavaScript in Echtzeit rendern kann. Du kannst es bitten, einen p5.js-Sketch, eine Three.js-Szene oder eine Vanilla-JavaScript-Animation zu generieren, und Canvas zeigt dir die Live-Ausgabe. Wiederhole die Konversation, genau wie bei Claude.

Canvas läuft in einer Sandbox-Umgebung und unterstützt externe Bibliotheken über CDN. Es ist sowohl in den kostenlosen als auch in den kostenpflichtigen ChatGPT-Tarifen enthalten, wobei kostenpflichtige Nutzer Zugriff auf leistungsfähigere Modelle für die komplexe Codegenerierung erhalten. Verfügbar unter chatgpt.com.

Google Gemini (Canvas & AI Studio)

Googles Gemini verfügt auch über eine Canvas-Funktion, die Code in einem Seitenbereich generiert und in einer Vorschau anzeigt – ähnlich wie Claude Artifacts und ChatGPT Canvas. Diese Funktion ist für alle Gemini-Nutzer kostenlos und unterstützt HTML, CSS und JavaScript mit Live-Vorschau.

Für anspruchsvollere Projekte bietet Googles AI Studio einen „Build Mode“, der aus Beschreibungen in natürlicher Sprache komplette Web-Apps generieren kann, mit Live-Vorschau und Bereitstellung per Mausklick. Für eine einfache Animationsschleife ist das zwar übertrieben, aber wenn du ein interaktives visuelles Instrument oder eine generative Kunstgalerie erstellen möchtest, lohnt es sich, diese Option zu erkunden. Verfügbar unter gemini.google.com und aistudio.google.com.

Weitere Optionen

Für fortgeschrittenere Arbeitsabläufe bieten KI-gestützte Code-Editoren wie Cursor und Windsurf vollständige Entwicklungsumgebungen mit integrierter KI, und webbasierte Tools wie v0, Bolt.new und p5js.ai können ebenfalls visuellen Code mit Live-Vorschau generieren.

Kreative Programmierbibliotheken: p5.js, Three.js und mehr

Du musst diese nicht im Detail verstehen – die KI schreibt den Code für dich –, aber es ist hilfreich zu wissen, was du verlangen musst:

Einfaches HTML und CSS — Übersieh nicht das eigene Animationssystem des Browsers. Das obige Beispiel wurde damit erstellt. CSS @keyframes, benutzerdefinierte Eigenschaften und calc() kann komplexe geometrische Animationen ganz ohne JavaScript erstellen. Frag deine KI nach einer „CSS-only-Animation”, bevor du zu einer Bibliothek greifst – möglicherweise benötigst du gar keine.
p5.js – Die erste Wahl für kreatives Programmieren im Web. Ursprünglich für Künstler und Designer entwickelt, eignet es sich perfekt für generative 2D-Kunst: Partikelsysteme, Strömungsfelder, geometrische Muster, rauschbasierte Visualisierungen. Wenn du unsicher bist, frag die KI nach einer p5.js-Skizze. Das ist der einfachste Weg zu etwas Schönem.
Three.js – Der Standard für 3D im Web. Wenn du rotierende 3D-Objekte, volumetrische Beleuchtung, Kameraflüge oder irgendetwas mit Tiefe wünschst, frag nach Three.js. Es funktioniert in allen AI-Chatbot-Sandboxen über CDN.
Weitere Optionen – Die integrierte Canvas-API und CSS/SVG-Animationen des Browsers funktionieren ohne Bibliotheken. GSAP eignet sich hervorragend für zeitachsenbasierte Sequenzierungen. Und für fortgeschrittene GPU-beschleunigte Effekte (z. B. Shadertoy) frag die KI nach einem GLSL-Fragment-Shader – der Code ist komplexer, aber die Ergebnisse sind atemberaubend.

Erste Schritte: Erstelle deine erste KI-generierte visuelle Schleife

Hier ist eine praktische Anleitung. Öffne einen der oben genannten KI-Chatbots und probiere eine Eingabe wie diese aus:

Erstelle eine p5.js-Skizze mit konzentrischen Kreisen, die pulsieren und sich langsam drehen. Verwende einen dunklen Hintergrund mit hellen, satten Farben. Lass die Skizze nahtlos in einer Schleife laufen.

In wenigen Sekunden erhältst du eine Live-Vorschau einer Animation. Von dort aus kannst du mit der Iteration beginnen:

„Die Kreise dünner machen und mehr davon hinzufügen“
Verwende eine Farbpalette aus tiefem Violett, elektrischem Blau und Pink.
„Füge der Drehung ein leichtes Wackeln hinzu.“
„Etwas schneller machen“
„Jetzt mach eine Variante mit Quadraten statt Kreisen.“

Jede Änderung dauert nur wenige Sekunden. In 15 Minuten kannst du ein Dutzend einzigartige Loops erstellen.

Die Präambel: Die Voraussetzungen für den Erfolg der KI schaffen

KI-Chatbots sind Allzweckwerkzeuge. Wenn man sie sich selbst überlässt, geben sie dir möglicherweise eine winzige Leinwand, fügen unnötige UI-Steuerelemente hinzu oder erstellen eine Animation, die nicht sauber läuft. Du kannst die meisten dieser Probleme vermeiden, indem du deiner ersten Eingabe einige Zeilen Kontext voranstellst, die der KI mitteilen, welche Art von Ausgabe du wünschst.

Hier ist eine Einleitung, die du am Anfang jedes Gesprächs über visuelle Generierung einfügen kannst:

Ich möchte visuelle Animationen für Live-Auftritte erstellen, die sich in einer Schleife wiederholen. Befolge für jede von dir erstellte Grafik die folgenden Regeln:

Verwende p5.js, das über CDN in einer einzigen HTML-Datei geladen wurde.

Die Leinwand soll das gesamte Browserfenster ausfüllen und sich responsiv anpassen.

Verwende einen dunklen oder schwarzen Hintergrund.

Alle Bewegungen sollten mithilfe zeitbasierter Mathematik (sin, cos, modulo) nahtlos in einer Schleife ablaufen – ohne Frame-Zählung.

Füge keine UI-Steuerelemente, Textüberlagerungen, Schaltflächen oder Schieberegler hinzu – nur die visuelle Darstellung.

Halte die Animation mit 60 fps flüssig.

Verwende kräftige, satte Farben, sofern ich nichts anderes sage.

Danach können alle Eingaben im Dialog kurz und kreativ sein – die KI kennt bereits das gewünschte Format. Sag einfach „spiralförmige Sechsecke mit Regenbogenspur” und du erhältst genau das, im Vollbildmodus, in einer Schleife und bereit zur Aufnahme.

Du kannst die Einleitung nach Belieben anpassen. Möchtest du Three.js statt p5.js verwenden? Tausch es aus. Bevorzugst du weiße Hintergründe? Ändere die Zeile. Der Punkt ist, die Regeln einmal festzulegen, damit du sie nicht jedes Mal wiederholen musst.

Tipp: Wenn du Claude verwendest, kannst du diese Einleitung als „Projekt“-Anweisung speichern, damit sie automatisch in jede Unterhaltung aufgenommen wird. ChatGPT verfügt über eine ähnliche Funktion namens „Benutzerdefinierte Anweisungen“ in den Einstellungen. Auf diese Weise kannst du einfach einen neuen Chat öffnen und sofort mit der Eingabe von Bildmaterial beginnen.

Tipps für die Eingabe bei der kreativen Programmierung mit KI

Da die Einleitung die technischen Aspekte behandelt, kannst du dich in deinen kreativen Anregungen ganz auf das konzentrieren, was du sehen möchtest:

Beschreib die Bewegung, nicht nur die Form. „Rotierende Sechsecke” ist in Ordnung. „Sechsecke, die sich langsam drehen und in einem atmungsaktiven Muster skalieren, mit einem Nachlaufeffekt” ist viel besser.
Beschreib die Stimmung. „Hypnotisch“, „minimalistisch“, „psychedelisch“, „ruhig“, „aggressiv“ – diese Begriffe leiten die Wahl der Farben, Geschwindigkeit und Komplexität.
Bezieh dich auf reale Dinge. „Wie ein Kaleidoskop“, „wie Zellen unter einem Mikroskop“, „wie Regen auf einem Fenster“ – Analogien geben der KI ein visuelles Ziel, das effektiver ist als abstrakte Beschreibungen.
Leg eine Farbpalette fest. Wenn du das nicht tust, wählt die KI Farben aus, die jedoch oft sehr generisch sind. Mit „Nur Cyan und Magenta auf Schwarz verwenden“ oder „warme Sonnenuntergangstöne“ erhältst du etwas mit echtem Charakter.
Geh in kleinen Schritten vor. Versuch nicht, dein perfektes Bild in einer einzigen Eingabe zu beschreiben. Fang einfach an und verfeinere dann. Das geht schneller und macht mehr Spaß.
Frag nach Variationen. Wenn dir etwas gefällt, sag: „Erstelle drei Variationen davon mit unterschiedlichen Farbpaletten“ oder „Erstelle eine minimalistischere Version“. Dies ist eine der schnellsten Methoden, um eine visuelle Bibliothek aufzubauen.
Wechsle mitten im Gespräch die Technologie. Wenn ein p5.js-Sketch nicht das gewünschte Ergebnis liefert, versuch es mit „Erstelle dieses Konzept in Three.js mit einer 3D-Perspektive neu“ – manchmal verändert ein anderer Rendering-Ansatz das Ergebnis.

Starter-Eingabeaufforderungen

Wenn du einen Ausgangspunkt benötigst, findest du hier einige Vorschläge, die zuverlässig zu großartigen Ergebnissen führen. Füge zuerst deine Einleitung ein und probiere dann eine der folgenden Optionen aus:

Op-Art & Geometrisch

„Rotierende konzentrische Ringe mit abwechselnden schwarzen und weißen Segmenten, die ein Moiré-Interferenzmuster erzeugen“
„Konzentrische Polygone, die sich abwechselnd ausdehnen und zusammenziehen, wobei jedes Polygon gegenüber dem nächsten leicht phasenverschoben ist.“

Partikel & Strömung

„Hunderte kleiner Partikel, die sich entlang unsichtbarer Kurven bewegen, wie Rauch, der von einem sanften Wind erfasst wird. Die Partikel sollten ein- und ausgeblendet werden.“
„Ein Sternenfeld, das langsam vorwärts driftet, als würde man durch den Weltraum fliegen. Die Sterne sollten in Größe und Helligkeit variieren.“

Bio & Natur

„Überlappende Sinuswellen, die wie eine Aurora Borealis über den Bildschirm ziehen, mit wechselnden Grün- und Violetttönen“
„Konzentrische Wellen, die sich von zufälligen Punkten aus nach außen ausbreiten, wie Regentropfen auf stillstehendem Wasser“

3D & Perspektive (frag hierfür nach Three.js)

„Ein sich langsam drehender Drahtgitter-Torusknoten mit leuchtenden Kanten vor schwarzem Hintergrund, gerendert in Three.js“
„Ein Tunnel aus rotierenden geometrischen Formen, durch den die Kamera langsam fliegt. Three.js.“

Abstrakt & Psychedelisch

„Eine sich verändernde Blob-Form mit sanfter Geräuschverschiebung, die durch schillernde Farben wechselt“
„Übereinanderliegende durchscheinende Formen, die sich verschieben und überlappen und an ihren Schnittpunkten neue Farben entstehen lassen“

So speicherst du KI-generierte Grafiken als Videodateien

Sobald du in deinem Browser etwas erstellt hast, das dir gefällt, musst du es als Videodatei speichern, damit du es in Visibox (oder anderswo) verwenden kannst. Dazu gibt es mehrere Möglichkeiten.

Bildschirmaufzeichnung

Die einfachste Methode: Stell deine Animation im Browser auf Vollbild um (bei den meisten Browsern mit F11) und nimm deinen Bildschirm auf.

Mac: Verwende die integrierte Bildschirmaufzeichnung (Cmd+Shift+5) für schnelle Aufnahmen oder OBS Studio (kostenlos) für die vollständige Kontrolle über Bildrate, Format und Codierung.
Windows: Verwende die Xbox-Spielleiste (Win+G) für schnelle Aufnahmen oder OBS Studio für anspruchsvolle Arbeiten mit 60 fps und Formatoptionen.

In-Browser-Erfassung (der Profi-Trick)

Wenn du eine pixelgenaue Ausgabe ohne Bildschirmaufzeichnungsartefakte wünschst, kannst du Frames direkt aus dem Canvas-Element des Browsers erfassen. Das ist etwas technischer, aber die KI kann dir bei der Einrichtung helfen:

CCapture.js – Eine JavaScript-Bibliothek, die sich in deinen Animationsloop einklinkt und jeden Frame mit einer festen Bildrate erfasst, unabhängig davon, wie schnell (oder langsam) deine Animation tatsächlich gerendert wird. Das bedeutet, dass du selbst bei komplexen Szenen eine butterweiche Ausgabe erhältst. Frag die KI: „Füge CCapture.js zu diesem Sketch hinzu, um ihn als WebM-Video mit 60 fps zu exportieren.“
MediaRecorder API – Eine integrierte Browser-API, die die Ausgabe eines Canvas-Elements direkt aufzeichnen kann. Frag die KI: „Füge eine Aufnahmetaste hinzu, die diese Canvas-Animation als WebM-Datei aufzeichnet.“

Tipps für saubere Aufnahmen

Nimm mit 60 fps auf, wenn dein Wiedergabesystem das unterstützt. Die flüssige Bewegung macht bei algorithmischen Visualisierungen einen großen Unterschied.
Passe die Auflösung an dein Ziel an. Wenn du auf einen 1080p-Projektor ausgibst, stell dein Browserfenster (oder deine Leinwand) vor der Aufnahme auf eine Größe von 1920 x 1080 ein.
Nimm länger auf, als du benötigst. Nimm 30 bis 60 Sekunden auf, auch wenn dein Loop nur 10 Sekunden lang ist. Du kannst die Aufnahme in einem Video-Editor zuschneiden und den saubersten Abschnitt auswählen.
Schließ andere Anwendungen während der Aufnahme, um Bildausfälle zu vermeiden.
Verwende für deine endgültigen Dateien die H.264-Kodierung. Diese ist universell kompatibel und wird von Visibox (und den meisten Wiedergabesoftwareprogrammen) am besten verarbeitet. OBS kann direkt in H.264/MP4 aufzeichnen.

Verwendung deiner KI-generierten Loops in Visibox

Sobald du deine Loops als Videodateien erfasst hast, ist es ganz einfach, sie in Visibox zu importieren – per Drag & Drop. Ein paar Dinge sind dabei zu beachten:

Teste deine Loops. Spiel sie in Visibox mit aktivierter Loop-Funktion ab und beobachte den Übergangspunkt. Code-generierte Visuals laufen in der Regel sauberer als KI-generierte Videos, aber es lohnt sich immer, dies zu überprüfen.
Nutze die Effekte von Visibox. Unser Op Art Video Pack enthält 24 Loops, aber die integrierten Farbfilter, Spiegelungs- und Dreheffekte von Visibox vervielfachen diese zu Hunderten von Variationen. Der gleiche Trick funktioniert auch mit deinen KI-generierten Inhalten.
Erstelle eine Bibliothek. Jede Prompt-Sitzung kann eine Handvoll einzigartiger Loops hervorbringen. Mit der Zeit baust du dir eine persönliche visuelle Bibliothek auf, die ganz individuell auf dich zugeschnitten ist.

Einpacken

Das Beste an diesem Ansatz ist, dass es sich weniger so anfühlt, als hätte „die KI das gemacht“, sondern eher so, als hätte „ich das mit einem sehr schnellen Assistenten entworfen“. Lade unser kostenloses Op-Art-Video-Paket herunter, um zu sehen, was möglich ist, öffne dann Claude, ChatGPT oder Gemini und versuch, dein eigenes Video zu erstellen. Und wenn du bereit bist, damit aufzutreten, macht Visibox es dir ganz einfach.

Häufig gestellte Fragen

Muss ich programmieren können? Nein. Das ist ja gerade der Sinn der Sache. Die KI schreibt den Code, du beschreibst in einfacher Sprache, was du sehen möchtest. Dabei lernst du zwar einige Fachbegriffe (z. B. dass du nach „p5.js” oder „Three.js” fragen musst), aber du musst niemals direkt Code bearbeiten.

Welcher KI-Chatbot eignet sich am besten für die Generierung von visuellem Code? Alle drei wichtigsten Optionen – Claude, ChatGPT und Gemini – können visuellen Code mit Live-Vorschau generieren. Claude neigt dazu, besonders saubere kreative Code-Ausgaben zu produzieren, aber auch ChatGPT und Gemini sind sehr leistungsfähig. Probier alle drei aus und finde heraus, welcher am besten zu deinem Arbeitsablauf passt. Sie sind alle kostenlos zu starten.

Darf ich diese Bilder kommerziell nutzen? Im Allgemeinen ja. Der von diesen KI-Tools generierte Code ist originell (es handelt sich nicht um Kopien bestehender Codes) und die visuelle Ausgabe wird durch mathematische Funktionen bestimmt, nicht durch trainierte Bilder. Die genauen Bedingungen findest du in den Nutzungsbedingungen der einzelnen Tools. In der Praxis gehören die Ergebnisse jedoch dir und du kannst sie in Performances, Videopaketen oder anderswo verwenden.

Mit welcher Auflösung sollte ich aufnehmen? 1080p (1920 x 1080) ist für die meisten Live-Performance-Setups die ideale Auflösung. Viele Projektoren und LED-Wände überschreiten diese Auflösung nicht, und die Dateien bleiben überschaubar. Wenn du 4K benötigst, stell deine Leinwandgröße vor der Aufnahme entsprechend ein.

Wie man mit KI-generiertem Code Visualisierungen erstellt (keine Programmierkenntnisse erforderlich)