Créateur d'Animations JavaScript
Chaque image dessinée en code.
Vous n'avez qu'à la décrire.
Un agent basé sur Claude Opus 5.5 écrit le JavaScript qui génère chaque image
et compose la bande-son en code. Pas d'images clés, pas de timeline, pas de terminal.
Qu'est-ce que l'animation JavaScript ?
Un film écrit en code.
Rendu à neuf à chaque image.
Le mode Animation d'iArt.ai transforme une description d'une phrase en animation JavaScript : un court film dont chaque image est générée par du code qu'écrit un agent sous Claude Opus 5.5. Le texte est composé en vrai texte, les formes et les tracés sont dessinés en SVG, et une couche canvas peint tout ce qui est dessiné à la main, les particules ou les textures ; chaque image est une fonction du temps, donc le film se lit, se parcourt et s'exporte de la même façon. La musique et les effets sonores sont synthétisés en code avec la Web Audio API.
iArt.ai met cette méthode dans un onglet de navigateur. Son mode Animation est un agent basé sur Claude Opus 5.5 : vous décrivez le film, il planifie le rythme et les plans, écrit le code d'animation et la bande-son, vérifie ses propres images fixes et lit le résultat dans votre navigateur. Il n'y a pas de style par défaut. Le rendu naît du sujet et de vos mots : une explication sur les paiements et une histoire du soir pour un enfant de deux ans ne se ressemblent pas.
Pourquoi maintenant : dessiner un film entier en code repose sur le raisonnement spatial d'un modèle, sur son goût, sur sa capacité à écrire du code long et soigné, et sur sa capacité à regarder ses propres images pour les corriger. Avec Claude Opus 5.5, les films dessinés en code sont devenus assez bons pour qu'on commence à les partager, et « chaque image en JavaScript » est devenu un genre à part entière.
Pour la définition complète, voyez ce qu'est l'animation JavaScript. Pour le faire vous-même pas à pas, lisez comment créer une animation avec Claude Opus 5.5.
Claude Motion n'est pas dans votre offre ? Voici quatre façons de créer le même type d'animation sans lui.
Vitrine
Des films entièrement dessinés en code.
Chaque film a été réalisé avec le mode Animation d'iArt à partir du prompt affiché dessous, chaque image et chaque note étant écrites en code. Essayez un prompt : vous obtiendrez un film dans le même esprit, pas une copie.
“A 40-second film in two acts about how a seed becomes a tree: act one underground (the seed cracks, roots reach down), act two above ground (the shoot breaks through, seasons pass, a tree). Same character style in both acts, one continuous score.”
Essayer ce prompt →“How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.”
Essayer ce prompt →“Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.”
Essayer ce prompt →“Black-and-white ink woodcut style, rough carved lines on off-white paper. A girl folds a paper boat and sets it into the rain gutter; as it drifts through the city at night, every window it passes lights up and someone folds another boat. Short hand-lettered captions. 25 seconds, 16:9.”
Essayer ce prompt →“Paper cut-out collage style, like a children's picture book made of construction paper. A little boy at his window can't sleep, so a small friendly cloud drifts down over the rooftops, borrows a bit of moonlight and glows like a nightlight until he dozes off. 20 seconds, square 1:1.”
Essayer ce prompt →“¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.”
Essayer ce prompt →Comment ça marche
Décrire. Planifier. Dessiner. Affiner.
Voici ce qui se passe entre votre prompt et la première image.
01
Décrivez le film
Dites ce que vous voulez avec des mots simples : le sujet, le public, la durée, le ton. Choisissez 16:9, 9:16 ou 1:1. Joignez vos captures d'écran ou votre logo pour les montrer dans le film, ou une photo dont s'inspirera un personnage dessiné.
02
Il planifie le rythme et les plans
Avant d'écrire la moindre ligne de code, l'agent décide des plans : ce que chacun montre, combien de temps il dure, et où tombent les coupes et les effets sonores. Les images et la musique lisent les mêmes repères temporels, c'est pour cela que les coupes tombent sur le temps.
03
Il dessine, compose et vérifie
Il écrit le code qui génère chaque image et la bande-son en Web Audio (musique et effets sonores), puis examine ses propres images fixes et une planche contact pour repérer les textes rognés, les chevauchements et les images vides avant que vous ne voyiez quoi que ce soit.
04
Modifiez, continuez, exportez
Répondez dans le chat pour changer n'importe quoi ; il modifie le code et refait le rendu. Partagez un lien public ou, sur un forfait payant, exportez un MP4 avec la bande-son ou un WebM transparent pour les incrustations.
Deux moteurs
Quel moteur iArt choisir ?
Animation est l'une des deux façons de créer une vidéo dans iArt. C'est le bon outil quand les mots, les données et le timing doivent être exacts, pas pour des images au rendu filmé.
| Animation | AI Video | |
|---|---|---|
| Comment c'est fait | Le code génère chaque image (texte composé, SVG, une couche canvas) ; la bande-son est synthétisée en code | Un modèle vidéo génératif produit les images |
| Idéal pour | Explications, motion graphics, films illustrés, incrustations | Plans cinématographiques au rendu filmé |
| Texte à l'écran | Exact (composé en code) | Dessiné par le modèle ; l'orthographe peut dériver |
| Ressources | Aucune requise ; vos captures d'écran, logos, images et clips peuvent aussi apparaître | Séquences générées |
| Voix off | Voix off IA (choisissez une voix) | Voix off IA |
Vous réalisez une explication avec la typographie exacte de votre marque ou des graphiques de données ? Voyez les vidéos explicatives.
Lancez-le vous-même,
ou passez l'installation.
La méthode est open source. Si vous vivez dans un terminal, lancez-la avec votre propre agent de code. Si vous préférez taper une phrase dans un navigateur, utilisez le mode Animation.
Claude Code + javascript-animation-skills
Notre pack de skills open source apprend à votre agent de code la même méthode : grille rythmique et liste de plans, une bibliothèque de dessin, une bande-son Web Audio, des auto-vérifications et un rendu en MP4. Conçu et testé avec Claude Opus 5.5.
- – Gratuit et sous licence MIT ; vous utilisez votre propre forfait Claude Code ou votre propre usage de l'API
- – Fonctionne dans Claude Code et d'autres agents de code
- – Nécessite Node 18+, ffmpeg, Chrome et playwright-core
- – Le film est un fichier HTML qui vous appartient et que vous modifiez à la main
La même méthode, dans un onglet de navigateur
Rien à installer, pas de terminal. Décrivez le film, regardez-le se lire et modifiez-le en répondant dans le chat.
- ✓ Fonctionne sur app.iart.ai, dans l'onglet Animation de la page Create
- ✓ Demandez n'importe quelle durée ; les films longs sont découpés en scènes
- ✓ Montre vos captures d'écran, votre logo ou votre site, ou dessine un personnage d'après une photo
- ✓ Voix off IA en option
- ✓ Partagez un lien public ; exportez un MP4 avec la bande-son, ou un WebM transparent pour les incrustations, sur un forfait payant
FAQ
FAQ sur l'animation JavaScript
Vous ne trouvez pas ce que vous cherchez ? Contactez notre equipe.
Qu'est-ce que l'animation JavaScript ?
L'animation JavaScript, au sens d'animation générée par du code, est un film dont chaque image est produite par du code : une fonction du temps décide de ce qui est à l'écran à chaque instant, avec du texte composé, des formes SVG et du dessin sur canvas, et la musique et les effets sonores sont synthétisés avec la Web Audio API. Le mode Animation d'iArt est un générateur d'animation IA qui écrit ce code pour vous à partir d'un prompt texte.
Quel modèle utilise le mode Animation d'iArt ?
Claude Opus 5.5. L'agent planifie le rythme et les plans, écrit le code d'animation et la bande-son, et examine ses propres images fixes et sa planche contact avant de vous montrer le film. La version open source de la méthode, javascript-animation-skills, a elle aussi été conçue et testée avec Claude Opus 5.5.
Quelle durée peut avoir un film ?
Demandez la durée que vous voulez. Un film plus long est découpé en scènes dans le même projet, avec le même style et la même bande-son, et vous pouvez modifier n'importe quelle scène ensuite en répondant dans le chat. Le film de la graine qui devient un arbre, sur cette page, dure 40 secondes.
Le mode Animation ajoute-t-il une voix off ou une narration ?
Oui. Choisissez une voix dans la zone de message et le film est narré, avec l'image calée sur les mots. Sans voix, la bande-son se compose de musique et d'effets sonores synthétisés en code.
Puis-je utiliser mes propres images ou photos ?
Oui. Les captures d'écran, logos, photos de produit et courts enregistrements d'écran que vous joignez apparaissent tels quels dans le film ; une photo d'une personne ou d'un style qui vous plaît sert de référence pour un personnage dessiné ou pour le style. Vous pouvez aussi lui donner l'adresse web de votre site.
Combien ça coûte, et puis-je télécharger la vidéo ?
Les nouveaux comptes reçoivent un crédit d'inscription de $2. $2 suffisent pour un film de moins de 30 secondes. Tout film peut être partagé via un lien public. Exporter un MP4 avec la bande-son nécessite un forfait payant (Pro coûte $20/mois). Les incrustations, comme les bandeaux, s'exportent plutôt en WebM transparent.
Existe-t-il une façon gratuite et open source de le faire ?
Oui. javascript-animation-skills (github.com/iart-ai/javascript-animation-skills, MIT) est un ensemble de skills Claude Code qui apprend à votre agent de code la même méthode et rend le film en MP4 sur votre machine. Il nécessite Node 18+, ffmpeg et Chrome. Le mode Animation d'iArt, c'est la même approche sans l'installation.
Décrivez le film.
L'agent écrit chaque image.
Chaque image et la bande-son écrites en code. Commencez avec le crédit d'inscription de $2 ; exportez en MP4 sur un forfait payant.