Deine KI hat eine Animation geschrieben. Hol sie dir als Video.

ChatGPT, Claude und Gemini liefern Code, aber soziale Netzwerke, Präsentationen und Schnittprogramme brauchen eine Videodatei. Füge den Code hier ein und lade sie herunter.

Oder starte mit einem Beispiel:

Lässt du den Code von einer KI schreiben?

Vorschau

Deine Animation läuft hier, sobald du sie einfügst.

Lass diesen Tab im Vordergrund, solange gerendert wird.

Herunterladen
Format
Seitenverhältnis
Sek.

Läuft auf deinem Gerät. Deine Datei wird nie hochgeladen.

So schreibt die KI exportfertigen Code

Hänge diesen Text an deine Anfrage an oder schicke ihn zusammen mit dem Code, den du schon hast. Das Ergebnis lässt sich dann ohne Nacharbeit rendern.

Vom Chat zum Video
  1. 1
    Um eine einzige HTML-Datei bitten
    Sage dem Assistenten, was animiert werden soll, und bitte um eine einzige HTML-Datei. Hänge den Prompt unten an, damit das Ergebnis exportfertig ist.
  2. 2
    Code kopieren
    In ChatGPT, Claude oder Gemini nutzt du die Kopieren-Schaltfläche am Codeblock. Zeigt der Assistent stattdessen eine Live-Vorschau, wechsle zuerst zur Codeansicht.
  3. 3
    Einfügen und exportieren
    Füge den Code oben auf dieser Seite ein, wähle das Seitenverhältnis für deine Plattform (9:16 für Reels, Shorts und TikTok, 16:9 für YouTube und Präsentationen) und exportiere.
So schreibt die KI exportfertigen Code
Hänge diesen Text an deine Anfrage an oder schicke ihn zusammen mit dem Code, den du schon hast. Das Ergebnis lässt sich dann ohne Nacharbeit rendern.
Schreib diese Animation als eine einzige, eigenständige HTML-Datei um, die ich mit htmlto.video als Video exportieren kann:
- Gestalte sie für das Seitenverhältnis 16:9. Sie muss das Browserfenster genau ausfüllen (100vw mal 100vh, kein Scrollen). Gib alle Größen in vw und vh an, damit sie sich an jede Auflösung anpasst.
- Sie startet von selbst, sobald die Seite geladen ist, und braucht weder Maus noch Tastatur noch Scrollen.
- Sie hat eine feste Länge. Gib die Länge in einem Kommentar in der ersten Zeile an, zum Beispiel <!-- duration: 8s -->.
- Animiere mit CSS-Animationen, der Web Animations API, GSAP oder requestAnimationFrame mit dessen timestamp-Argument. Verwende kein Video, kein Audio und keine iframes.
- Schreib das gesamte CSS und JavaScript inline in die Datei. Bette Bilder als Inline-SVG oder Data-URLs ein. Schriften und Bibliotheken dürfen nur von einem CDN kommen, das Cross-Origin-Laden erlaubt, etwa Google Fonts, cdnjs oder jsDelivr.
- Antworte mit dem vollständigen HTML in einem einzigen Codeblock.
Warum nicht den Bildschirm aufnehmen oder die Kommandozeile nutzen?
Bildschirmaufnahmen ruckeln, zeigen den Mauszeiger und haben die falsche Größe. Kommandozeilen-Tools liefern exakte Ergebnisse, setzen aber Node, einen Headless-Browser und FFmpeg voraus. Diese Seite rendert genauso Bild für Bild, ohne dass du etwas installieren musst.
Was sich rendern lässt
  • CSS-Animationen und -Transitions
  • GSAP, anime.js, Motion und andere JavaScript-Bibliotheken
  • Canvas 2D
  • SVG, animiert mit CSS oder JavaScript
  • WebGL und Three.js
  • Die Web Animations API und requestAnimationFrame
Was noch nicht geht
  • Der Export wird in Safari sowie auf iPhones und iPads nicht unterstützt. Die Vorschau funktioniert dort.
  • Videos, Audio und iframes in der Seite werden weggelassen.
  • Bilder und Schriften von Servern, die Cross-Origin-Zugriff sperren, fehlen im Ergebnis.
  • Animationen, die auf Klick, Hover oder Scrollen warten, laufen nicht weiter.
  • SVG, das mit SMIL-Tags wie <animate> animiert ist, wird nicht erfasst.
  • Sehr aufwendige WebGL-Szenen können auf langsameren Computern scheitern.