Langue: Français

Transformez en vidéo l’animation HTML créée par votre IA

ChatGPT, Claude et Gemini vous livrent du code, mais les réseaux sociaux, les présentations et les logiciels de montage attendent un fichier vidéo. Collez le code ici et téléchargez la vidéo.

Ou partez d’un exemple :

Le code vient d’une IA ?

Aperçu

Votre animation s’affiche ici dès que vous la collez.

Gardez cet onglet au premier plan pendant le rendu.

Télécharger
Format
Proportions
s

Tout se passe sur votre appareil : votre fichier n’est jamais envoyé.

Demander à l’IA un HTML prêt à exporter

Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Vous mettez ainsi toutes les chances de votre côté pour un rendu propre.

De la conversation à la vidéo
  1. 1
    Demandez un seul fichier HTML
    Décrivez à l’assistant ce que vous voulez animer et demandez-lui un seul fichier HTML. Ajoutez le prompt ci-dessous pour obtenir un résultat prêt à exporter.
  2. 2
    Copiez le code
    Dans ChatGPT, Claude ou Gemini, cliquez sur le bouton de copie du bloc de code. Si l’assistant affiche plutôt un aperçu interactif, passez d’abord à l’affichage du code.
  3. 3
    Collez et exportez
    Collez-le en haut de cette page, choisissez les proportions adaptées à votre plateforme (9:16 pour Reels, Shorts et TikTok, 16:9 pour YouTube et les présentations), puis exportez.
Demander à l’IA un HTML prêt à exporter
Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Vous mettez ainsi toutes les chances de votre côté pour un rendu propre.
Réécris cette animation sous la forme d’un seul fichier HTML autonome, que je puisse exporter en vidéo avec htmlto.video :
- Conçois-la aux proportions 16:9. Elle doit remplir exactement la fenêtre du navigateur (100vw sur 100vh, sans défilement). Exprime toutes les dimensions en vw et en vh pour qu’elle s’adapte à n’importe quelle résolution.
- Elle démarre toute seule au chargement de la page et ne demande ni souris, ni clavier, ni défilement.
- Elle a une durée fixe. Indique cette durée dans un commentaire sur la première ligne, par exemple <!-- duration: 8s -->.
- Utilise des animations CSS, la Web Animations API, GSAP, ou requestAnimationFrame avec son argument timestamp. N’utilise ni vidéo, ni audio, ni iframe.
- Mets tout le CSS et tout le JavaScript dans le fichier. Intègre les images en SVG inline ou en data URL. Les polices et les bibliothèques ne peuvent venir que d’un CDN qui autorise le chargement cross-origin, comme Google Fonts, cdnjs ou jsDelivr.
- Réponds avec le HTML complet dans un seul bloc de code.
Pourquoi ne pas enregistrer l’écran ou passer par la ligne de commande ?
Un enregistrement d’écran saccade, affiche le curseur et sort à la mauvaise taille. Les outils en ligne de commande donnent un résultat exact, mais demandent d’installer Node, un navigateur headless et FFmpeg. Cette page fait le même rendu image par image, sans rien installer.
Ce que l’outil peut convertir
  • Animations et transitions CSS
  • GSAP, anime.js, Motion et autres bibliothèques JavaScript
  • Canvas 2D
  • SVG animé en CSS ou en JavaScript
  • WebGL et Three.js
  • Web Animations API et requestAnimationFrame
Ce qui ne marche pas encore
  • Pas d’export sur Safari, iPhone ni iPad (l’aperçu y fonctionne).
  • Les vidéos, le son et les iframes de la page sont ignorés.
  • Les images et polices hébergées sur des serveurs qui bloquent la lecture cross-origin n’apparaîtront pas.
  • Les animations déclenchées par un clic, un survol ou un défilement restent figées.
  • Le SVG animé avec des balises SMIL comme <animate> n’est pas capturé.
  • Les scènes WebGL très lourdes peuvent échouer sur un ordinateur peu puissant.