Convertir du HTML en vidéo, image par image dans le navigateur
Collez le HTML écrit par Claude, ChatGPT, Gemini ou vous-même, ou déposez un fichier .html ou .zip, et enregistrez-le en MP4, GIF ou WebM transparent. Chaque image est dessinée sur votre ordinateur : la vidéo est fluide et rien n'est envoyé.
- ✓Gratuit, sans filigrane ni inscription
- ✓Rien ne quitte votre navigateur
- ✓Précis à l'image près, jusqu'à 4K à 60 fps
- ✓MP4, GIF, WebM et PNG
MP4 en 1920×1080, dessiné image par image sur votre ordinateur : fluide quelle que soit sa vitesse, et rien n’est envoyé.
Ou partez d'un exemple
Chacun est un seul fichier HTML. Chargez-le, modifiez-le, exportez-le.
Fonctionnement
Trois étapes, tout dans le navigateur
L'outil prend la main sur l'horloge de la page, l'avance d'une image à la fois et dessine chaque image : un ordinateur portable lent produit la même vidéo qu'une machine rapide.
- 01
Collez, ou déposez un fichier
Une page complète avec son CSS et son JavaScript, un fichier .html, ou un export .zip avec ses images et ses polices. Les bibliothèques chargées depuis un CDN fonctionnent normalement.
- 02
Choisissez le format et la taille
MP4, GIF, WebM ou une image PNG ; 16:9, 9:16 ou 1:1 ; de 720p à 4K à 24, 30 ou 60 fps. Quand les animations ont une fin, la durée est réglée automatiquement.
- 03
Lancez le rendu et téléchargez
Chaque image est dessinée et encodée sur votre ordinateur, puis le fichier est prêt à télécharger. Pas de partage d'écran, pas d'envoi.
Compatibilité
Tout ce que le navigateur anime
Si ça bouge dans un onglet, ça peut devenir une vidéo : l'outil contrôle le temps pour le CSS, la Web Animations API, les minuteurs et requestAnimationFrame, sur lesquels reposent toutes les bibliothèques d'animation.
Animations et transitions CSS
Keyframes, transitions, @property et filtres, avec le timing exact du code.
GSAP et anime.js
Timelines et tweens chargés depuis un CDN ; la durée d'une timeline GSAP est détectée automatiquement.
Animations SVG
Tracés animés avec stroke-dashoffset, morphings et dégradés animés.
Dessin sur Canvas
Dessin sur canvas 2D et systèmes de particules pilotés par requestAnimationFrame.
Three.js et WebGL
Scènes 3D et shaders, image par image, à toutes les tailles.
p5.js et creative coding
Sketchs génératifs et creative coding, exportés sans image perdue.
Tailwind et maquettes d'interface
Sections hero et écrans d'app animés avec des classes, des minuteurs et la Web Animations API.
Pages créées par IA
Animations, explications et graphiques que Claude, ChatGPT ou Gemini ont écrits en un seul fichier HTML.
Formats
Tous les formats à partir d'un seul collage
Choisissez le fichier selon sa destination. La même page peut être rendue dans chacun d'eux, dans les trois formats d'image.
MP4
H.264 · 720p, 1080p ou 4K · 24/30/60 fps
Pour les réseaux sociaux, les présentations et les logiciels de montage. Se lit partout.
GIF animé
De 360p à 720p · 10/15/25 fps · en boucle
Pour un README, un message Slack, un e-mail ou une documentation.
WebM transparent
VP9 avec couche alpha · de 720p à 4K
Sans le fond de la page : une incrustation pour Premiere, DaVinci Resolve, Final Cut ou CapCut.
Image PNG
1080p ou 4K · n'importe quel instant · transparent
Une image fixe : une affiche, une miniature ou une illustration de diapo.
Usages
Où vont les animations
Réseaux
Posts et stories
16:9 pour X et LinkedIn, 9:16 pour TikTok, Reels et Shorts, 1:1 pour le fil. Les plateformes acceptent la vidéo, pas le HTML.
Présentations
PowerPoint, Keynote et Google Slides
Une présentation lit un MP4 ou un GIF ; une animation HTML, non.
Montage
Titres et incrustations dans un logiciel de montage
Un bandeau-titre ou un jingle logo en WebM transparent, posé au-dessus des rushes.
Documentation
Fichiers README et documentation
Le GIF d'un composant ou d'un graphique, là où on lit.
Portfolio
Dribbble, Behance et études de cas
Vos créations motion sur CodePen ou dans vos projets, en vidéo propre et nette.
Produit
Lancements et démos
Une section hero ou un écran d'app animé en HTML, en clip pour le post de lancement.
Depuis un chat IA
Transformer une animation de Claude, ChatGPT ou Gemini en vidéo
- 01
Demandez un seul fichier HTML
Demandez « un seul fichier HTML autonome avec le CSS et le JavaScript à l'intérieur », qui remplit la fenêtre. Précisez la durée voulue, pour que l'animation ait une fin.
- 02
Copiez le code ou téléchargez le fichier
Copiez toute la page depuis le chat, ou téléchargez le fichier .html. Si votre outil exporte un dossier ou un .zip (c'est le cas de Claude Design), gardez le .zip.
- 03
Collez-le ou déposez-le ici, puis lancez le rendu
L'aperçu le lit ; choisissez MP4, GIF ou WebM et lancez le rendu. Pour modifier quelque chose, demandez à l'IA, collez la nouvelle version et relancez le rendu.
Pourquoi image par image
Fluide sur tout ordinateur, et privé
Un enregistrement d'écran garde ce que votre ordinateur a réussi à afficher, images perdues comprises. Ici, le temps de la page s'arrête jusqu'à ce que chaque image soit dessinée.
Précis à l'image près
Chaque image est dessinée à son propre instant : 60 fps, ce sont 60 images différentes par seconde, même sur un portable lent.
Aucun envoi
La page tourne dans un cadre isolé de votre navigateur et le fichier y est encodé. Votre code n'atteint jamais un serveur.
Gratuit, sans filigrane
Pas de compte, pas de crédits, pas de logo sur votre vidéo.
Les façons de convertir du HTML en vidéo
| Cet outil | Convertisseurs en ligne | Rendu en ligne de commande | Enregistrement d'écran | |
|---|---|---|---|---|
| Votre fichier est envoyé | Non | Oui | Non | Non |
| Compte ou filigrane | Ni l'un ni l'autre | Souvent, en offre gratuite | Ni l'un ni l'autre | Ni l'un ni l'autre |
| Précis à l'image près | Oui | En général | Oui | Non : les images perdues restent |
| Durée | Jusqu'à 5 minutes | Souvent limitée en offre gratuite | Illimitée | Illimitée |
| Fond transparent | WebM et PNG | Parfois, payant | Oui | Non |
| Installation | Aucune : un navigateur | Aucune | Node, Chrome et FFmpeg | Une app d'enregistrement |
Vous avez plutôt le lien d'une page ?
Transformez une page web publique en vidéo de défilement fluide, pour une annonce de lancement ou un portfolio.
Au-delà de cet outil
Une animation, c'est un début. Un skill réalise le film entier.
Cet outil transforme en vidéo le HTML que vous avez déjà. Un Motion Skill intervient une étape plus tôt : dans Claude Code, Codex ou Cursor, votre agent lit votre produit ou vos notes, prévoit les plans, écrit chaque scène, compose la musique et rend le MP4 final.
- ✓À partir de votre propre matière, pas d'un prompt vide
- ✓Plusieurs scènes, montées en musique
- ✓Rendu sur votre ordinateur, libre à vous de l'utiliser
Les skills qui prennent le relais
Chacun réalise un type de film différent. Le premier est le plus proche de cette page.
Vous réalisez plus d'un type de film ?
Commencez gratuitement avec Motion Director. Un skill coûte $4.90 ; un abonnement débloque tous les skills, ainsi que les nouveaux dès leur sortie.
Mensuel
$9.90/ mois
- ✓Tous les skills film complet, styles intégrés
- ✓Les nouveaux skills dès leur sortie
- ✓Les mises à jour des skills existants
- ✓Usage commercial de vos rendus
Annuel
−34 %$79/ an
- ✓Tous les skills film complet, styles intégrés
- ✓Les nouveaux skills dès leur sortie
- ✓Les mises à jour des skills existants
- ✓Usage commercial de vos rendus
Fondateur à vie
Offre fondateur$169paiement unique
- ✓Tous les skills film complet, styles intégrés
- ✓Les nouveaux skills dès leur sortie
- ✓Les mises à jour des skills existants
- ✓Usage commercial de vos rendus
- ✓Un seul paiement, sans renouvellement
Obtenir Motion Director (gratuit) →Un seul skill $4.90 · Choisir un skill →
Questions fréquentes
Mon HTML est-il envoyé ?
Non. La page tourne dans un cadre isolé de votre navigateur, coupé de ce site, et la vidéo est encodée sur votre ordinateur. Rien ne nous est transmis.
Quelles animations fonctionnent ?
Tout ce qui suit l'horloge de la page : animations et transitions CSS, Web Animations API, GSAP, anime.js, SVG, Canvas, Three.js et WebGL, p5.js, et le code qui utilise des minuteurs ou requestAnimationFrame. Les vidéos intégrées à la page, les iframes et les images de sites qui bloquent la lecture par d'autres sites ne passent pas ; dans ces cas, utilisez « Enregistrer en temps réel ».
Quelle différence avec un enregistrement d'écran ?
Un enregistrement lit la page en temps réel et garde ce que l'ordinateur a réussi à afficher : une page chargée saccade. Cet outil arrête l'horloge de la page, l'amène à l'instant de chaque image et la dessine. La vidéo est donc fluide quelle que soit la vitesse de l'ordinateur, et toujours exactement de la bonne durée.
Quelle durée et quelle taille maximum ?
Jusqu'à 5 minutes. MP4 et WebM en 720p, 1080p ou 4K à 24, 30 ou 60 fps ; GIF de 360p à 720p à 10, 15 ou 25 fps. Plus c'est long et grand, plus il faut de temps et de mémoire.
Comment transformer une animation Claude ou ChatGPT en vidéo ?
Demandez un seul fichier HTML autonome, copiez-le (ou téléchargez-le), collez-le ici et lancez le rendu. Si votre outil exporte un .zip, comme Claude Design, déposez le .zip : ses images, scripts et polices y sont lus.
Peut-on exporter avec un fond transparent ?
Oui, en WebM (VP9 avec couche alpha) ou en PNG : cochez « Fond transparent » et le fond de la page est retiré. Le MP4 ne gère pas la transparence. Les logiciels de montage comme Premiere, DaVinci Resolve, Final Cut et CapCut acceptent le WebM transparent.
Avec quels navigateurs ça fonctionne ?
Chrome, Edge et Firefox sur ordinateur, et Chrome sur Android. Safari, et donc tous les navigateurs sur iPhone et iPad, ne permet pas de dessiner une page de cette façon ; ouvrez plutôt la page sur un ordinateur.
Un GIF tourne-t-il en boucle ?
Oui, les GIF bouclent à l'infini. Pour une boucle sans raccord visible, réglez la durée sur un cycle complet de l'animation ; quand la page boucle, la durée affichée correspond à ce cycle.
La vidéo a-t-elle du son ?
Non, les fichiers sont muets. Ajoutez de la musique dans votre logiciel de montage, ou créez un film complet avec musique grâce à Motion Director, un skill gratuit pour Claude Code, Codex ou Cursor.
Une image est différente de la page. Pourquoi ?
Quelques effets ne peuvent pas encore être dessinés image par image, comme des calques en position fixe fusionnés par-dessus la page. Essayez « Enregistrer en temps réel », qui capture l'onglet pendant la lecture, dans Chrome ou Edge sur ordinateur.
C'est gratuit ?
Oui : sans inscription, sans filigrane, sans limite de nombre de vidéos.
Ensuite
Aller plus loin
Pas encore d'animation ? Partez d'un prompt
Copiez un prompt d'animation, envoyez-le à Claude ou ChatGPT, puis collez ici le HTML obtenu.
Voir les prompts d'animation →Des captures d'écran plutôt que du code ?
Le générateur de vidéos mockup 3D place vos captures sur des téléphones, des portables et des cartes en mouvement, et exporte une vidéo en boucle.
Ouvrir l'outil mockup →Collez votre HTML et lancez le rendu
Gratuit, dans votre navigateur, sans envoi.