syahdestiny/javascript-animation

Animation JavaScript (chaque image dessinée en code)

Réalisez de courts films d'animation où chaque pixel est calculé : pas d'images, pas de polices à charger, pas de bibliothèques. Un seul fichier HTML contient l'œuvre entière ; un navigateur sans tête la parcourt image par image pour produire un MP4.

Modèle

Développé et testé avec Claude Opus 5.5 ; la qualité du dessin dépend fortement du modèle. L'auto-vérification ci-dessous nécessite une entrée image : si le modèle actuel ne peut pas voir les images, indiquez-le à l'utilisateur et considérez la vérification visuelle comme non effectuée. Les autres modèles ne sont pas testés ; si le résultat semble grossier, dites qu'un modèle plus puissant aidera probablement, plutôt que de prétendre que c'est le meilleur possible.

Flux par défaut : ne pas s'arrêter pour demander

Exécutez directement. Choisissez des valeurs par défaut raisonnables et mentionnez les alternatives lors de la livraison. Ne demandez avant de commencer que s'il n'y a aucun sujet du tout (par exemple "fais une animation", rien d'autre).

1. Lisez le brief. Déduisez la forme (histoire, explainer, poème, boucle, page interactive), la durée (par défaut 15-20 s ; plus long uniquement si le sujet ne peut pas être raconté dans ce temps) et le format (par défaut 1920×1080) de ce que l'utilisateur a dit. Le texte à l'écran est dans la langue du brief de l'utilisateur ; rendez-le bilingue seulement s'il le demande ou si le public l'est clairement. references/forms.md contient une structure courte pour chaque forme.
2. Planifiez l'apparence et le son à partir du sujet et du public, avec vos propres mots : ce qu'est le film, à quoi il ressemble et sonne, et pourquoi cela correspond à ce sujet et ce public. Il n'y a pas de liste à remplir ; references/techniques.md contient des ingrédients, et les valeurs de départ sont des placeholders, pas un style de maison. Ne réutilisez jamais l'apparence ou le son d'une œuvre précédente par défaut : deux sujets différents ne doivent pas se ressembler visuellement ou sonorement. Si l'utilisateur pointe vers l'œuvre de quelqu'un d'autre ("comme cette vidéo virale"), empruntez ses techniques, jamais ses personnages, son histoire ou ses compositions.
3. Grille de beats, storyboard et blocking, sous forme de données (references/storyboard.md). D'abord le tempo et les sections ; ensuite une liste de plans avec un rythme adapté à la forme (tableau de rythme dans references/storyboard.md ; chaque plan avec cadrage, mouvement de caméra, action, le beat sur lequel il tombe, son son, sa transition) ; puis le blocking (pour une histoire ou un explainer, les pistes d'un monde continu). Ces éléments sont intégrés dans la page sous forme de BPM, SECTIONS, SHOTS, EVENTS : les scènes, la caméra et la bande son les lisent tous, donc l'image et le son sont alignés par construction. Pour une histoire ou un explainer, vérifiez la logique : chaque beat est causé par le précédent, la métaphore est visible dans l'image.
4. Construisez à partir de templates/starter.html. Il est déjà piloté par storyboard : un monde dessiné en coordonnées mondiales, withCamera par plan, claim() pour chaque texte et chaque objet clé. Remplacez la palette placeholder et le monde de démonstration. Conservez le contrat : draw(frame) est une fonction pure du numéro d'image. Utilisez rng(seed) / hash2(), jamais Math.random ou Date.
5. Auto-vérification, puis rendu (section suivante). Corrigez et revérifiez jusqu'à ce que ce soit propre.
6. Livraison : le MP4 et le HTML (il s'exécute en direct dans un navigateur ; cliquer démarre le son). Ensuite, en une ou deux lignes, proposez ce qui peut être modifié : un autre style, une musique IA au lieu de synthétisée, une durée différente.

Pour la musique, utilisez la compétence soundtrack (par défaut : synthétisée dans la page avec Web Audio, aucune clé nécessaire).

Auto-vérification (l'agent fait ceci ; l'utilisateur ne le voit jamais)

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # une image par seconde, en évitant les coupes
node scripts/render.mjs piece.html shot --stills 90,300,610   # moments spécifiques
node scripts/render.mjs piece.html piece.mp4                  # rendu complet (+ bande son si la page en a une)
node scripts/asset-audit.mjs piece.html                       # prouve zéro ressource : exit 1 si quoi que ce soit est chargé ou intégré
node scripts/layout-check.mjs piece.html                      # texte qui entre en collision avec du texte, ou chevauche un objet déclaré
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # coupes sur le beat, pas de surprise

Ensuite deux passages visuels, tous deux dans references/qc.md :

1. Conformité au storyboard : un arrêt sur image au beat d'action de chaque plan, lu par rapport à sa ligne (l'acteur est-il là où le blocking le dit, fait-il ce que la ligne indique ?).
2. Passage réalisateur : la planche contact à 2 images par seconde (--sheet .5), notée sur le rythme par rapport à la forme, la variété des cadrages, les images mortes, si chaque action a son son, et si l'apparence correspond au public. Faites au moins deux rondes. Rendez les images fixes des images que vous modifiez plutôt que de refaire tout le film à chaque fois.

Uniquement si déclenché

Quand	Faire
Un personnage apparaît dans plus d'une scène	Avant les scènes, rendez le personnage seul (expressions + poses) et vérifiez-le vous-même par rapport à references/character.md. Les personnages exposent des points d'ancrage (bouche, mains) pour que les accessoires s'y attachent.
L'utilisateur a fourni des photos de vraies personnes, animaux ou lieux	Construisez le personnage à partir des photos avec la méthode d'extraction dans references/character.md. Les photos restent locales : ne les téléchargez jamais et ne les placez dans rien de publié.
Il s'agit d'une œuvre avec des personnes réelles et l'utilisateur est présent	Lors de la livraison (pas avant), proposez d'utiliser des photos d'accessoires ou de personnes clés pour la rendre plus personnelle.
Du texte ou une bulle de parole suit un personnage en mouvement	Placez-le avec placeFree(w, h, [above, right, left, below]) pour qu'il s'écarte de tout ce qui est déjà déclaré.
Le texte à l'écran n'est pas latin (chinois, japonais…)	Utilisez une pile de polices CJK ; vérifiez que chaque glyphe s'affiche correctement (les polices monospace remplacent silencieusement les glyphes manquants, par ex. ≈ devient =).
La page sera publiée en tant que page web	Livrez le HTML ; conservez la boucle de prévisualisation en direct et l'audio déclenché par clic.

Règles qui évitent les échecs courants

• Fonction pure du temps. Pas d'état requestAnimationFrame, pas d'animations CSS, pas de physique accumulée : calculez chaque image à partir de t uniquement, sinon le rendu et l'aperçu divergent.
• Un trait dessiné à la main ondule, il ne tremble pas. Quand un film définit LOOK.wobble, changez la graine d'ondulation toutes les 4 images (LOOK.boil: 4), pas à chaque image. Chaque image est lue comme du bruit ; ~7,5 changements par seconde sont lus comme un dessin à la main.
• Formes arrondies pour les corps. Construisez les figures à partir d'ellipses et de rectangles arrondis. Les polygones bruts avec peu de points sont lus comme des signes (une main pentagonale, un torse en boîte).
• Choisissez l'angle qui fait lire la pose. Un corps long avec des membres trapus vu de côté est lu comme une chenille ; la même pose de face (en raccourci) est lue comme un bébé sur le ventre.
• Dessinez de l'arrière vers l'avant, explicitement. Cheveux arrière, puis corps, puis cou, puis visage, puis cheveux avant. La plupart des bugs "quelque chose couvre le visage" sont dus à l'ordre de dessin.
• Points de frappe sur les coupes et les actions. Chaque coupe et chaque action visible est dans EVENTS/CUES ; la bande son tombe dessus (voir soundtrack).
• Le texte n'entre jamais en collision. Déclarez chaque zone de texte et chaque objet clé ; layout-check doit afficher CLEAN. Une légende chevauchant un bord de moniteur ou un visage semble négligée, et des yeux sur une planche contact la manquent.

Fichiers

• templates/starter.html : bibliothèque de dessin (encre, illustration, primitives flat/blueprint, étiquettes, papier, calques filtrés), withCamera, claim/placeFree, et un squelette de deux plans piloté par storyboard.
• scripts/render.mjs : MP4 / images fixes / planche contact. window.CUES et window.SCORE sont optionnels : lors d'un rendu complet, il écrit <out>.cues.json et multiplexe la bande son SCORE (pas de SCORE = MP4 silencieux). Nécessite une taille de canvas paire.
• scripts/asset-audit.mjs : analyse statique + vérification réseau en direct pour tout ce qui est chargé ou intégré.
• scripts/layout-check.mjs : lit window.LAYOUT sur tout le film et liste les collisions de texte avec leurs instants.
• references/storyboard.md : grille de beats, liste de plans, blocking, continuité et logique narrative.
• references/techniques.md : techniques de dessin testées (encre, impression en couleur limitée, gravure au trait, mots comme formes, remplissage au marqueur, formes d'illustration).
• references/forms.md : notes de structure par forme.
• references/character.md : uniquement quand il y a un personnage.
• references/qc.md : la liste d'auto-vérification.

Prérequis : Node 18+, ffmpeg, Chrome (ou npx playwright install chromium), et npm i playwright-core dans le dossier où vous exécutez les scripts (votre projet, pas le dossier de la compétence).