HTML in Video umwandeln, Bild für Bild im Browser
Füge das HTML ein, das Claude, ChatGPT, Gemini oder du geschrieben hast, oder lege eine .html- oder .zip-Datei ab, und speichere es als MP4, GIF oder transparentes WebM. Jedes Bild wird auf deinem Rechner gezeichnet: Das Video läuft flüssig, und nichts wird hochgeladen.
- ✓Kostenlos, ohne Wasserzeichen und Anmeldung
- ✓Nichts verlässt deinen Browser
- ✓Bildgenau, bis 4K mit 60 fps
- ✓MP4, GIF, WebM und PNG
MP4 in 1920×1080, Bild für Bild auf deinem Computer gezeichnet: flüssig, egal wie schnell er ist, und nichts wird hochgeladen.
Oder starte mit einem Beispiel
Jedes ist eine einzelne HTML-Datei. Laden, anpassen, exportieren.
So funktioniert's
Drei Schritte, alles im Browser
Das Tool übernimmt die Uhr der Seite, stellt sie Bild für Bild weiter und zeichnet jedes Bild. So entsteht auf einem langsamen Laptop dasselbe Video wie auf einem schnellen.
- 01
Einfügen oder Datei ablegen
Eine ganze Seite mit CSS und JavaScript, eine .html-Datei oder ein .zip-Export mit Bildern und Schriften. Bibliotheken von einem CDN laden wie gewohnt.
- 02
Format und Größe wählen
MP4, GIF, WebM oder ein PNG-Einzelbild; 16:9, 9:16 oder 1:1; 720p bis 4K mit 24, 30 oder 60 fps. Haben die Animationen ein Ende, wird die Länge automatisch gesetzt.
- 03
Rendern und herunterladen
Jedes Bild wird auf deinem Rechner gezeichnet und kodiert, danach steht die Datei zum Download bereit. Keine Bildschirmfreigabe, kein Upload.
Was funktioniert
Alles, was der Browser animiert
Was sich in einem Browser-Tab bewegt, kann ein Video werden: Das Tool steuert die Zeit für CSS, die Web Animations API, Timer und requestAnimationFrame, die Grundlage jeder Animationsbibliothek.
CSS-Animationen und -Transitions
Keyframes, Transitions, @property und Filter, exakt so getimt wie im Code.
GSAP und anime.js
Timelines und Tweens von einem CDN; die Länge einer GSAP-Timeline wird automatisch erkannt.
SVG-Animationen
Strichzeichnungen mit stroke-dashoffset, Morphs und animierte Verläufe.
Canvas-Zeichnungen
2D-Canvas-Zeichnungen und Partikelsysteme, angetrieben von requestAnimationFrame.
Three.js und WebGL
3D-Szenen und Shader, Bild für Bild, in jeder Größe.
p5.js und Creative Coding
Generative Sketches und Creative Coding, ohne verlorene Frames exportiert.
Tailwind und UI-Mock-ups
Produkt-Heroes und App-Screens, animiert mit Klassen, Timern und der Web Animations API.
Mit KI erstellte Seiten
Animationen, Erklärseiten und Diagramme, die Claude, ChatGPT oder Gemini als eine HTML-Datei geschrieben haben.
Formate
Jedes Format aus einem Einfügen
Wähle die Datei danach, wo sie hinsoll. Dieselbe Seite lässt sich in jedes Format rendern, in jedem der drei Seitenverhältnisse.
MP4
H.264 · 720p, 1080p oder 4K · 24/30/60 fps
Für Social-Media-Posts, Präsentationen und Videoschnitt. Läuft überall.
Animiertes GIF
360p bis 720p · 10/15/25 fps · Endlosschleife
Für ein README, eine Slack-Nachricht, eine E-Mail oder eine Doku.
Transparentes WebM
VP9 mit Alphakanal · 720p bis 4K
Ohne den Hintergrund der Seite: ein Overlay für Premiere, DaVinci Resolve, Final Cut oder CapCut.
PNG-Standbild
1080p oder 4K · beliebiger Moment · transparent
Ein Bild als Standbild: ein Poster, ein Thumbnail oder ein Folienbild.
Einsatz
Wofür Leute ihre Animationen nutzen
Social Media
Posts und Storys
16:9 für X und LinkedIn, 9:16 für TikTok, Reels und Shorts, 1:1 für den Feed. Plattformen nehmen Video, kein HTML.
Präsentationen
PowerPoint, Keynote und Google Slides
Präsentationen spielen MP4 oder GIF ab, eine HTML-Animation nicht.
Schnitt
Titel und Overlays im Videoschnitt
Eine Bauchbinde oder ein Logo-Sting als transparentes WebM, direkt über dem Footage.
Doku
README-Dateien und Dokumentation
Ein GIF von einer Komponente oder einem Diagramm, genau dort, wo gelesen wird.
Portfolio
Dribbble, Behance und Case Studies
Motion-Arbeiten aus CodePen oder deinem eigenen Projekt als sauberes, scharfes Video.
Produkt
Launches und Demos
Ein Produkt-Hero oder ein App-Screen, in HTML animiert, als Clip für den Launch-Post.
Aus einem KI-Chat
Mach aus einer Animation von Claude, ChatGPT oder Gemini ein Video
- 01
Bitte um eine HTML-Datei
Bitte um „eine einzelne, eigenständige HTML-Datei mit CSS und JavaScript darin“, die das Fenster ausfüllt. Nenne die gewünschte Länge, damit die Animation ein Ende hat.
- 02
Code kopieren oder Datei herunterladen
Kopiere die ganze Seite aus dem Chat oder lade die .html-Datei herunter. Exportiert dein Tool einen Ordner oder ein .zip (wie Claude Design), nimm das .zip.
- 03
Hier einfügen oder ablegen und rendern
Die Vorschau spielt es ab; wähle MP4, GIF oder WebM und rendere. Für Änderungen frag die KI, füge die neue Version ein und rendere noch einmal.
Warum Bild für Bild
Flüssig auf jedem Rechner, und privat
Eine Bildschirmaufnahme behält, was dein Rechner gerade noch anzeigen konnte, samt verlorener Frames. Hier steht die Zeit der Seite still, bis jedes Bild gezeichnet ist.
Bildgenau
Jedes Bild wird zu seinem eigenen Zeitpunkt gezeichnet: 60 fps heißt 60 verschiedene Bilder pro Sekunde, auch auf einem langsamen Laptop.
Kein Upload
Die Seite läuft in einem abgeschotteten Frame in deinem Browser, und die Datei wird dort kodiert. Dein Code erreicht nie einen Server.
Kostenlos, ohne Wasserzeichen
Kein Konto, keine Credits, kein Logo auf deinem Video.
Wege, HTML in ein Video umzuwandeln
| Dieses Tool | Online-Konverter | Kommandozeilen-Renderer | Bildschirmaufnahme | |
|---|---|---|---|---|
| Datei wird hochgeladen | Nein | Ja | Nein | Nein |
| Konto oder Wasserzeichen | Weder noch | Oft, in Gratis-Tarifen | Weder noch | Weder noch |
| Bildgenau | Ja | Meistens | Ja | Nein: verlorene Frames bleiben |
| Länge | Bis 5 Minuten | In Gratis-Tarifen oft begrenzt | Beliebig | Beliebig |
| Transparenter Hintergrund | WebM und PNG | Manchmal, kostenpflichtig | Ja | Nein |
| Einrichtung | Keine: ein Browser | Keine | Node, Chrome und FFmpeg | Eine Aufnahme-App |
Du hast stattdessen einen Link zu einer Seite?
Mach aus einer öffentlichen Webseite ein flüssiges Scroll-Video, für einen Launch-Post oder ein Portfolio.
Über dieses Tool hinaus
Eine Animation ist ein Anfang. Ein Skill macht den ganzen Film.
Dieses Tool macht aus dem HTML, das du schon hast, ein Video. Ein Motion Skill setzt einen Schritt früher an: In Claude Code, Codex oder Cursor liest dein Agent dein Produkt oder deine Notizen, plant die Einstellungen, schreibt jede Szene, unterlegt die Musik und rendert das fertige MP4.
- ✓Aus deinem eigenen Material, nicht aus einem leeren Prompt
- ✓Mehrere Szenen, mit Musik zusammengeschnitten
- ✓Auf deinem Rechner gerendert und frei für dich nutzbar
Skills, die hier weitermachen
Jeder macht eine andere Art von Film. Der erste passt am besten zu dieser Seite.
Du machst mehr als eine Art von Film?
Starte kostenlos mit Motion Director. Ein einzelner Skill kostet $4.90; ein Abo schaltet alle Skills frei, auch die neuen, sobald sie erscheinen.
Monatlich
$9.90/ Monat
- ✓Alle Komplettfilm-Skills, Stile eingebaut
- ✓Neue Skills, sobald sie erscheinen
- ✓Updates bestehender Skills
- ✓Kommerzielle Nutzung deiner Renderings
Jährlich
34 % sparen$79/ Jahr
- ✓Alle Komplettfilm-Skills, Stile eingebaut
- ✓Neue Skills, sobald sie erscheinen
- ✓Updates bestehender Skills
- ✓Kommerzielle Nutzung deiner Renderings
Gründerpass lebenslang
Gründerangebot$169einmalig
- ✓Alle Komplettfilm-Skills, Stile eingebaut
- ✓Neue Skills, sobald sie erscheinen
- ✓Updates bestehender Skills
- ✓Kommerzielle Nutzung deiner Renderings
- ✓Einmal zahlen, keine Verlängerung
Motion Director (kostenlos) holen →Ein Skill $4.90 · Skill auswählen →
Fragen
Wird mein HTML hochgeladen?
Nein. Die Seite läuft in einem abgeschotteten Frame in deinem Browser, getrennt von dieser Website, und das Video wird auf deinem Rechner kodiert. Nichts wird an uns gesendet.
Welche Animationen funktionieren?
Alles, was die Uhr der Seite antreibt: CSS-Animationen und -Transitions, die Web Animations API, GSAP, anime.js, SVG, Canvas, Three.js und WebGL, p5.js sowie Code mit Timern oder requestAnimationFrame. In die Seite eingebettete Videos, iframes und Bilder von Websites, die das Auslesen durch andere Websites blockieren, kommen nicht mit; nutze dafür „Stattdessen in Echtzeit aufnehmen“.
Was ist der Unterschied zu einer Bildschirmaufnahme?
Eine Aufnahme spielt die Seite in Echtzeit ab und behält, was der Rechner gerade anzeigen konnte, deshalb ruckelt eine aufwendige Seite. Dieses Tool hält die Uhr der Seite an, stellt sie auf den Moment jedes Bildes und zeichnet es. So läuft das Video flüssig, egal wie schnell der Rechner ist, und hat immer genau die richtige Länge.
Wie lang und wie groß kann das Video sein?
Bis zu 5 Minuten. MP4 und WebM in 720p, 1080p oder 4K mit 24, 30 oder 60 fps; GIF von 360p bis 720p mit 10, 15 oder 25 fps. Länger und größer braucht mehr Zeit und Arbeitsspeicher.
Wie mache ich aus einer Animation von Claude oder ChatGPT ein Video?
Bitte um eine eigenständige HTML-Datei, kopiere sie (oder lade sie herunter), füge sie hier ein und rendere. Exportiert dein Tool ein .zip, wie Claude Design, leg das .zip ab: Bilder, Skripte und Schriften werden daraus gelesen.
Kann ich mit transparentem Hintergrund exportieren?
Ja, als WebM (VP9 mit Alphakanal) oder PNG: Aktiviere „Transparenter Hintergrund“, dann bleibt der Hintergrund der Seite weg. MP4 kann keine Transparenz. Schnittprogramme wie Premiere, DaVinci Resolve, Final Cut und CapCut verarbeiten transparentes WebM.
In welchen Browsern funktioniert es?
Chrome, Edge und Firefox am Computer sowie Chrome auf Android. Safari, und damit jeder Browser auf iPhone und iPad, erlaubt nicht, eine Seite auf diese Weise zu zeichnen; öffne die Seite stattdessen am Computer.
Läuft ein GIF in Schleife?
Ja, GIFs laufen endlos. Für einen nahtlosen Loop stell die Länge auf einen vollen Zyklus der Animation; läuft die Seite in Schleife, ist die angezeigte Länge genau dieser Zyklus.
Hat das Video Ton?
Nein, die Dateien sind stumm. Füge Musik in deinem Schnittprogramm hinzu, oder mach einen ganzen Film mit Musik mit Motion Director, einem kostenlosen Skill für Claude Code, Codex oder Cursor.
Ein Bild sieht anders aus als die Seite. Warum?
Einige Effekte lassen sich noch nicht Bild für Bild zeichnen, etwa fest positionierte Ebenen, die über die Seite geblendet werden. Probier „Stattdessen in Echtzeit aufnehmen“: Das nimmt den Tab beim Abspielen auf, in Chrome oder Edge am Computer.
Ist es kostenlos?
Ja: keine Anmeldung, kein Wasserzeichen, keine Begrenzung der Anzahl an Videos.
Weiter
Noch mehr machen
Noch keine Animation? Fang mit einem Prompt an
Kopiere einen Motion-Prompt, schick ihn an Claude oder ChatGPT und füge das HTML, das zurückkommt, hier ein.
Motion-Prompts ansehen →Screenshots statt Code?
Der 3D-Mockup-Video-Generator setzt Screenshots auf Smartphones, Laptops und bewegte Karten und exportiert ein Video in Endlosschleife.
Mockup-Tool öffnen →Füge dein HTML ein und rendere es
Kostenlos, im Browser, ohne Upload.