Votre IA a écrit une animation. Récupérez-la en vidéo.

ChatGPT, Claude et Gemini vous donnent du code, alors que les réseaux sociaux, les diaporamas et les logiciels de montage demandent un fichier vidéo. Collez le code ici et téléchargez-le.

Ou partez d’un exemple :

Vous demandez le code à 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
Cadre
s

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

Obtenir de l’IA un code prêt à exporter

Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Le résultat passera au rendu sans retouche.

Du chat à la vidéo
  1. 1
    Demandez un seul fichier HTML
    Décrivez à l’assistant ce qu’il doit animer et demandez un fichier HTML unique. Ajoutez le prompt ci-dessous pour que le résultat soit prêt à exporter.
  2. 2
    Copiez le code
    Dans ChatGPT, Claude ou Gemini, utilisez le bouton de copie du bloc de code. Si l’assistant affiche un aperçu interactif à la place, passez d’abord à la vue du code.
  3. 3
    Collez et exportez
    Collez le code en haut de cette page, choisissez le cadre adapté à votre plateforme (9:16 pour Reels, Shorts et TikTok, 16:9 pour YouTube et les diaporamas), puis exportez.
Obtenir de l’IA un code prêt à exporter
Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Le résultat passera au rendu sans retouche.
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 pour un cadre 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 -->.
- Anime avec des animations CSS, la Web Animations API, GSAP, ou requestAnimationFrame en utilisant son argument timestamp. N’utilise ni vidéo, ni audio, ni iframe.
- Place 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 ?
Les enregistrements d’écran saccadent, montrent le curseur et sortent à la mauvaise taille. Les outils en ligne de commande donnent un résultat exact, mais il faut installer Node, un navigateur headless et FFmpeg. Cette page effectue le même rendu image par image, sans rien installer.
Ce que l’outil sait rendre
  • Animations et transitions CSS
  • GSAP, anime.js, Motion et d’autres bibliothèques JavaScript
  • Canvas 2D
  • SVG animé en CSS ou en JavaScript
  • WebGL et Three.js
  • La Web Animations API et requestAnimationFrame
Ce qu’il ne sait pas encore faire
  • Safari, l’iPhone et l’iPad ne permettent pas l’export. L’aperçu y fonctionne.
  • Les vidéos, le son et les iframes présents dans la page sont ignorés.
  • Les images et les polices hébergées sur des serveurs qui bloquent la lecture cross-origin manqueront.
  • Les animations qui attendent un clic, un survol ou un défilement n’avancent pas.
  • Le SVG animé avec des balises SMIL comme <animate> n’est pas capturé.
  • Les scènes WebGL très lourdes peuvent échouer sur les ordinateurs moins rapides.