Langue: Français

Transformez une animation HTML en GIF animé

Pour un README, une pull request, une documentation, une messagerie… partout où une vidéo ne passe pas. Collez le code, choisissez la taille, téléchargez le GIF.

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.

En trois étapes
  1. 1
    Coller
    Collez le HTML, ou déposez un fichier .html ou .zip. L’aperçu démarre aussitôt.
  2. 2
    Vérifier
    Choisissez les proportions selon l’endroit où la vidéo sera diffusée. L’outil détecte la durée de l’animation, et vous pouvez la modifier.
  3. 3
    Exporter
    Choisissez MP4, GIF, WebM transparent ou une image PNG, puis téléchargez le fichier.
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.
Réussir votre GIF
Faites court
Un GIF prend vite du poids. Pour un README ou un message, trois à huit secondes en 480p suffisent généralement.
Des boucles sans à-coup
Les animations en boucle sont coupées pile sur un cycle : le GIF se répète sans saut.
Préférez les aplats
Un GIF est limité à 256 couleurs par image. Les aplats et le texte restent nets ; les dégradés doux et les photos font apparaître des bandes.
Besoin de plus de qualité ?
Exportez en MP4 à partir du même code : c’est plus net et bien plus léger, partout où la vidéo est acceptée.
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.