HTML zu Video
Web-Animationen, Canvas- und Three.js-Code in MP4 verwandeln
Mit einer Vorlage starten
- Live-Erklärfenster Abgerundetes Sprecherfenster mit LIVE-Badge und Namensschild; der Ton kommt auf die Zeitleiste
- Gerahmtes Medium Fenster mit weißem Rand und Glühen, Eckbeschriftung; skaliert herein und kann einen Bereich heranzoomen
- Fotowand Hochformatfotos erscheinen nebeneinander, jedes mit Beschriftung
- Triptychon-Nahaufnahmen Bilder randlos nebeneinander, jedes beschriftet, unten Kapitelnummer und Titel
- Galerie mit Leiste Die Vorschaubilder unten leuchten nacheinander, das große Bild wechselt mit
- Storyboard + Hauptbild Links eine Spalte mit Storyboard-Bildern, rechts ein beschriftetes Hauptfenster
- Geteilte Erklärung Großer Text links (zweite Zeile in Akzentfarbe), Medium rechts, Zeitleisten-Markierung unten
- Titel mit Bildfüllung Dein Video oder Bild scheint durch riesige Buchstaben, mit Dachzeile und Untertitel
- Handy-Mockup Dein Material in einem sanft schwebenden Handyrahmen
- Eck-Badge Logo und Name bleiben in einer Ecke
- Körniger Verlauf Langsamer Verlauf von Petrol zu Orange mit Filmkorn – ganz unten als Hintergrund
- Titel-Pop Großer Titel mit Unterstrich und Untertitel
- Wort für Wort Wörter erscheinen nacheinander im Takt
- Datenwachstum Balken wachsen, die Zahl zählt hoch
- Bauchbinde Name und Funktion als Einblendung
- Lichtwisch Ein Lichtstrahl fährt über das Bild
- Countdown 3, 2, 1 springen auf, der Ring läuft ab
- Schreibmaschine Tippt Zeichen für Zeichen mit blinkendem Cursor
- Fortschrittsring Der Ring füllt sich bis zu deinem Prozentwert, die Zahl steigt
- Einkreisen Ein handgezeichneter Kreis umrandet das Wichtige
- Rotierende 3D-Form Ein metallischer Knoten dreht sich langsam (Three.js)
- Musikbalken Balken springen zur Musik in der Timeline und blitzen auf den Beats
- Untertitelkarten Gleichzeitige Untertitel erscheinen je als Karte mit Akzentbalken; Untertitelspur ausblenden, dann bleiben nur die Karten
- Markierter Titel Ein Leuchtmarker-Balken wischt über Creme, große Buchstaben fallen hinein
- Kinetic-Wörter Ein Wort pro Bild knallt herein, schwarze, gelbe und cremefarbene Flächen wischen diagonal
- Fragekarte Kleines Etikett und zwei große Zeilen, die zweite auf hellem Band
- Sticker-Etiketten Cremefarbene Papierstreifen erscheinen schräg (mit | trennen)
- Block-Countdown Riesige Zahlen zählen herunter, jede schiebt eine neue Farbfläche herein
- Pillen-Tags Großer Titel, eine Reihe dunkler Pillen-Tags, die nacheinander aufsteigen, unten ein hervorgehobenes Fazit
- Zustandskarten Links scrollt eine Kartenspalte nacheinander in den Fokus, rechts ein großer Vergleich
- Tag-Tabelle Ein dunkles Panel listet „Tag → Bedeutung“ Zeile für Zeile, Tags in Festbreitenschrift
- Zitatkarte Ein kleines Label oben links und ein langes Zitat, das Zeile für Zeile einblendet
Ein Klick öffnet den Editor, die Animation ist schon eingefügt. Bei Vorlagen mit Medienplätzen ziehen Sie ein Video oder Bild auf die Karte oder tippen auf „Meine Dateien verwenden“ – beim Öffnen des Editors ist es schon platziert. Die Dateien bleiben auf Ihrem Gerät; nichts wird hochgeladen.
Web-Animation aus Canvas, SVG, GSAP oder Three.js einfügen, Bild für Bild zeichnen, über dem Video als MP4 oder GIF exportieren. Gratis, ohne Wasserzeichen.
Fügen Sie Web-Animationscode ein oder importieren Sie eine .html-Datei – daraus wird ein Motion-Clip auf der Zeitleiste: transparenter Hintergrund, über Ihrem Video oder Bild, und wie jeder andere Clip verschiebbar, skalierbar, mit einstellbarer Deckkraft, Keyframes sowie Ein- und Ausblendanimationen.
Der Editor zeichnet sie Bild für Bild nach der Zeit, statt den Bildschirm aufzunehmen: Derselbe Zeitpunkt ergibt immer dasselbe Bild, die Vorschau entspricht also genau dem Export. Math.random, Date und requestAnimationFrame laufen über eine deterministische Uhr; GSAP und Three.js sind bereits eingebaut, externe Skripte brauchen Sie nicht.
Der Code läuft in einer isolierten Sandbox ohne Netzwerkzugriff, externe Bilder und Schriften laden daher nicht; betten Sie sie bei Bedarf als data:-Adressen ein. Parameter, die das Werk selbst deklariert (Text, Farben, Zahlen), erscheinen im Einstellungsbereich rechts – danach direkt als MP4 oder GIF exportieren.
Häufige Fragen
- Welche Schreibweisen werden unterstützt?
- Vier gängige Varianten funktionieren direkt: window.__seek(t) definieren und pro Sekundenwert ein Bild zeichnen; eine pausierte GSAP-Timeline anlegen und in window.__timelines ablegen; eine Three.js-Szene in __seek nach der Zeit ausrichten und rendern; oder eine normale requestAnimationFrame-Schleife. Besteht die Seite nur aus einem Canvas, wird dieser direkt übernommen; sonst wird die ganze Seite (SVG, CSS, Text) als ein Bild gezeichnet.
- Kann ich Bibliotheken von einem CDN nutzen?
- GSAP (mit den Plugins CustomEase, MotionPath, MorphSVG, DrawSVG und SplitText) und Three.js sind eingebaut; CDN-Adressen, die darauf zeigen, werden automatisch durch die eingebaute Version ersetzt. Andere externe Bibliotheken laden nicht, weil die Sandbox keinen Netzwerkzugriff hat.
- Hat das exportierte Video Ton?
- Motion-Clips haben keinen eigenen Ton, und Audio, das der Code abspielt, wird nicht aufgenommen. Fügen Sie Musik oder einen Sprechertext separat auf der Zeitleiste hinzu und exportieren Sie beides zusammen.
- Was tun, wenn mein Code einen Fehler wirft?
- Oben in der Vorschau und am Clip erscheint ein Fehlerhinweis, die Original-Fehlermeldung steht im Code-Dialog. Klicken Sie auf „Von KI reparieren lassen“: Die KI liest Ihren Code, korrigiert ihn und prüft das Ergebnis. Bis dahin zeigt die Vorschau das letzte fehlerfreie Bild, andere Clips sind nicht betroffen.
- Wird mein Code hochgeladen?
- Nein. Der Code wird mit dem Projekt in Ihrem Browser gespeichert und auf Ihrem Gerät gerendert und exportiert. Hochgeladen wird er nur, wenn Sie das Projekt selbst in der Cloud speichern.