Sprache: Deutsch

Mach aus der HTML-Animation deiner KI ein Video

ChatGPT, Claude und Gemini liefern dir Code, aber Social-Media-Apps, Präsentationen und Schnittprogramme wollen eine Videodatei. Füge den Code hier ein und lade das Video herunter.

Oder fang mit einem Beispiel an:

Kommt dein Code von einer KI?

Vorschau

Sobald du HTML einfügst, läuft deine Animation hier.

Lass diesen Tab im Vordergrund, bis das Rendern fertig ist.

Herunterladen
Format
Seitenverhältnis
Sek.

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

So bekommst du exportfertiges HTML von der KI

Häng diesen Text an deine Anfrage an oder schick ihn zusammen mit dem Code, den du schon hast. So stehen die Chancen am besten, dass alles sauber gerendert wird.

Vom Chat zum Video
  1. 1
    Nach einer HTML-Datei fragen
    Sag dem Assistenten, was er animieren soll, und bitte um eine einzige HTML-Datei. Häng den Prompt unten an, damit das Ergebnis direkt exportfertig ist.
  2. 2
    Code kopieren
    Klick in ChatGPT, Claude oder Gemini auf den Kopier-Button am Codeblock. Zeigt der Assistent stattdessen eine Live-Vorschau, wechsle zuerst in die 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 bekommst du exportfertiges HTML von der KI
Häng diesen Text an deine Anfrage an oder schick ihn zusammen mit dem Code, den du schon hast. So stehen die Chancen am besten, dass alles sauber gerendert wird.
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 Dauer. Gib die Dauer 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 am Ende die falsche Größe. Kommandozeilen-Tools liefern exakte Ergebnisse, dafür musst du aber Node, einen Headless-Browser und FFmpeg installieren. Diese Seite rendert genauso Bild für Bild – ohne dass du etwas installieren musst.
Was sich rendern lässt
  • CSS-Animationen und -Übergänge
  • GSAP, anime.js, Motion und andere JavaScript-Bibliotheken
  • Canvas 2D
  • Mit CSS oder JavaScript animiertes SVG
  • WebGL und Three.js
  • Web Animations API und requestAnimationFrame
Was noch nicht geht
  • Safari, iPhone und iPad können nicht exportieren. Die Vorschau funktioniert dort aber.
  • Videos, Audio und iframes in der Seite bleiben außen vor.
  • Bilder und Schriften von Servern, die anderen Websites keinen Lesezugriff erlauben, fehlen im Ergebnis.
  • Animationen, die auf Klick, Hover oder Scrollen warten, bleiben stehen.
  • SVG-Animationen mit SMIL-Tags wie <animate> werden nicht erfasst.
  • Sehr aufwendige WebGL-Szenen können auf langsameren Computern scheitern.