Graphique animé, construit en code
Trois invites à partir d'une page blanche : construis-le, refais-le vérifier, exporte-le.
Avant de commencer : lis brand.md et MOTION.md s'ils existent. Sinon, lance d'abord brand-intake, ou demande des codes hexadécimaux, une police et un fichier logo. N'appelle jamais un résultat « aux couleurs de la marque » sans ces éléments.
Étape 1 : Demande les chiffres, puis attends
Le titre, les labels, les valeurs exactes, et s'il s'agit de résultats réels ou de données d'exemple. Les données d'exemple reçoivent une étiquette « Données indicatives » sur chaque image. N'arrondis jamais, ne reformate pas et n'ajoute pas de nombre.
Invite 1 : construis-le
Je veux un graphique animé pour un post LinkedIn. Construis-le en un seul fichier HTML que je puisse ouvrir dans mon navigateur.
Titre : "[TITRE]". [Si données d'exemple : garde "Données indicatives" visible.]
Valeurs : [LABEL 1 : VALEUR 1], [LABEL 2 : VALEUR 2], ...
Le mouvement comporte quatre états :
1. Départ : [à quoi ça ressemble en premier].
2. Changement : [la seule chose qui bouge]. Rien ne disparaît pour être remplacé.
3. Pause : le graphique terminé, avec [la valeur clé] étiquetée.
4. Retour : il revient en douceur au départ, pour que la boucle n'ait pas de saut.
Tempo : 8 secondes au total. Environ 2 secondes pour le changement, 4 secondes de pause, 1,5 seconde pour le retour.
Aspect : fond [FOND], texte [TEXTE], accent [ACCENT], [POLICE]. Pas de polices ni d'images externes. Pas de dégradés, pas de lueur, pas de rebonds.
Taille : 1080 x 1350 pixels.
Règles pour la construction :
- Calcule chaque image uniquement à partir du temps. Ajoute window.seek(secondes).
- Le titre, les labels et l'axe ne bougent jamais. Seul le graphique change.
- La dernière image doit correspondre exactement à la première.
Une fois construit, prends des captures d'écran à 0, 1, 2, 4 et 7 secondes. Vérifie qu'il n'y a pas de texte qui se chevauche ou d'éléments coupés. Corrige ce que tu trouves et dis-moi ce que tu as changé.
Invite 2 : refais-le vérifier
Inspecte les cinq images capturées et la limite de boucle. Vérifie que les valeurs restent les mêmes, que les labels sont lisibles, que rien ne se chevauche, et que chaque élément n'apparaît qu'au bon moment. Signale uniquement les problèmes que tu observes réellement. Corrige ceux que tu trouves, conserve la version précédente, et capture les mêmes images à nouveau. Si aucun problème n'est trouvé, dis-le et n'invente pas de révision.
Invite 3 : exporte-le
Maintenant transforme ceci en vidéo et en GIF que je peux poster. Utilise les outils déjà présents sur cet ordinateur. Si tu as besoin de quelque chose qui n'est pas installé, arrête-toi et dis-moi de quoi il s'agit avant d'installer quoi que ce soit. Donne-moi un MP4 (1080 x 1350, 8 secondes) et un GIF qui boucle à l'infini. Montre-moi ensuite trois images du GIF terminé pour que je puisse vérifier que tout est correct.