HTML en vidéo
Transformez animations web, code Canvas et Three.js en MP4
Partir d’un modèle
- Fenêtre de live Fenêtre arrondie avec badge LIVE et nom ; le son de la vidéo va sur la timeline
- Média encadré Fenêtre à bord blanc lumineux avec étiquette ; apparaît en zoom et peut zoomer sur une zone
- Mur de photos Des photos verticales apparaissent côte à côte, chacune avec une légende
- Triptyque en gros plan Images côte à côte bord à bord, chacune légendée, avec numéro et titre de chapitre en bas
- Galerie avec bandeau Les vignettes du bas s'illuminent tour à tour et la grande image suit
- Storyboard et principal Colonne de vignettes à gauche, fenêtre principale étiquetée à droite
- Explication partagée Grand texte à gauche (2e ligne colorée), média à droite, repère de timeline en bas
- Titre rempli d'image Votre vidéo ou image apparaît dans des lettres géantes, avec surtitre et sous-titre
- Maquette de téléphone Votre vidéo dans un téléphone qui flotte doucement
- Badge d'angle Votre logo et votre nom restent dans un coin
- Dégradé granuleux Dégradé lent bleu-vert vers orange avec grain ; à placer tout en bas comme fond
- Titre pop Grand titre avec soulignement et sous-titre
- Mot à mot Les mots apparaissent un par un en rythme
- Croissance des données Les barres montent pendant que le chiffre défile
- Bandeau bas Bandeau nom et fonction
- Balayage lumineux Un faisceau lumineux traverse l’image
- Compte à rebours 3, 2, 1 surgissent pendant que l’anneau se vide
- Machine à écrire Tape lettre par lettre avec un curseur clignotant
- Anneau de progression L’anneau se remplit jusqu’au pourcentage, le chiffre monte
- Entourer Un cercle dessiné à la main entoure l’essentiel
- Forme 3D en rotation Un nœud métallique tourne lentement (Three.js)
- Barres musicales Les barres bondissent sur la musique de la timeline et flashent sur les temps
- Cartes de sous-titres Les sous-titres du moment apparaissent une carte chacun avec une barre d’accent ; masquez la piste pour ne garder que les cartes
- Titre surligné Une barre surligneur balaie un fond crème pendant que de grandes lettres tombent
- Mots-chocs Un mot par écran s'abat tandis que des aplats noir, jaune et crème balaient en diagonale
- Carte question Petite étiquette et deux grandes lignes, la seconde sur une bande vive
- Étiquettes autocollantes Des bandes de papier crème apparaissent de biais (séparez par |)
- Compte à rebours en aplats De grands chiffres défilent, chacun poussant un nouvel aplat de couleur
- Étiquettes pilules Grand titre, une rangée de pilules sombres qui montent une à une et une conclusion mise en avant en bas
- Cartes d’état Une colonne de cartes à gauche défile pour mettre chacune en avant ; à droite, une comparaison en grand
- Tableau de balises Un panneau sombre qui liste « balise → sens » ligne par ligne, balises en police à chasse fixe
- Carte de citation Une petite étiquette en haut à gauche et une longue citation qui apparaît ligne par ligne
Un clic ouvre l’éditeur avec l’animation déjà ajoutée. Pour les modèles avec emplacements de médias, glissez une vidéo ou une image sur la carte, ou touchez « Utiliser mes fichiers » : elle est déjà en place à l’ouverture de l’éditeur. Les fichiers restent sur votre appareil ; rien n’est envoyé.
Collez une animation web (Canvas, SVG, GSAP, Three.js) : dessinée image par image sur votre vidéo, exportée en MP4 ou GIF. Gratuit, sans filigrane, dans le navigateur.
Collez le code d’une animation web ou importez un fichier .html : il devient un clip d’animation sur la timeline, sur fond transparent, superposé à votre vidéo ou image. Comme tout autre clip, vous pouvez le déplacer, le redimensionner, régler son opacité, lui ajouter des images clés et des animations d’entrée et de sortie.
L’éditeur le dessine image par image selon le temps au lieu d’enregistrer l’écran : un même instant donne toujours la même image, donc l’aperçu correspond exactement à l’export. Math.random, Date et requestAnimationFrame sont branchés sur une horloge déterministe ; GSAP et Three.js sont intégrés, inutile d’ajouter des scripts externes.
Le code s’exécute dans un bac à sable isolé, sans accès au réseau : les images et polices externes ne se chargent pas ; au besoin, intégrez-les en URL data:. Les paramètres déclarés par l’animation (texte, couleurs, valeurs) apparaissent dans le panneau de réglages à droite, et vous pouvez exporter en MP4 ou GIF aussitôt.
Questions fréquentes
- Quelles façons d’écrire le code sont prises en charge ?
- Les quatre façons courantes fonctionnent telles quelles : définir window.__seek(t) pour dessiner l’image de la seconde t ; créer une timeline GSAP en pause et la placer dans window.__timelines ; positionner une scène Three.js selon le temps dans __seek puis en faire le rendu ; ou une simple boucle requestAnimationFrame. Si la page ne contient qu’un canevas, il est capturé directement ; sinon, toute la page (SVG, CSS, texte) est dessinée comme une image.
- Puis-je utiliser des bibliothèques depuis un CDN ?
- GSAP (avec les plugins CustomEase, MotionPath, MorphSVG, DrawSVG et SplitText) et Three.js sont intégrés, et les adresses CDN qui pointent vers eux sont remplacées automatiquement par la copie intégrée. Les autres bibliothèques externes ne peuvent pas se charger, car le bac à sable n’a pas accès au réseau.
- La vidéo exportée a-t-elle du son ?
- Les animations n’ont pas de son propre, et l’audio joué par le code n’est pas enregistré. Ajoutez séparément de la musique ou une voix off sur la timeline : elle sera exportée avec l’animation.
- Et si mon code plante ?
- Le haut de l’aperçu et le clip lui-même signalent l’erreur, et le message d’origine s’affiche dans la fenêtre du code. Cliquez sur « Demander à l’IA de corriger » : l’IA lit votre code, le corrige puis vérifie le résultat. En attendant, l’aperçu reste sur la dernière image correcte, sans effet sur les autres clips.
- Mon code est-il envoyé en ligne ?
- Non. Le code est enregistré avec le projet dans votre navigateur, et le rendu comme l’export se font sur votre appareil. Il n’est envoyé, avec le projet, que si vous choisissez d’enregistrer le projet dans le cloud.