Motion design et vidéo · Graphiques et chiffres animés

Graphique et indicateurs de données animés (Master Prompt Dataviz)

Le prompt d'ingénierie complet pour générer un graphique de données financier de niveau Apple/Bloomberg avec tracé SVG spline et compteurs tabulaires fluides.

Intermédiaire Essayé le 28 octobre 2026

Master Prompt d’ingénierie Motion Design

Prompt Master Motion Design (Architecture complète)

Prêt à copier dans Claude 3.7 Sonnet, Cursor ou votre environnement de code

<inputs>Paramètres d’entrée requis

Demande-moi d'abord : les 3 à 5 indicateurs clés ou métriques financières à afficher [données chiffrées, ex: Chiffre d'affaires, Taux de marge, Croissance mensuelle], la valeur de départ et la valeur finale cible, la palette de couleurs (fond sombre professionnel #0c0f17 ou clair #f8fafc, courbe lumineuse [couleur de courbe] et couleur de comparaison), et la durée souhaitée (10 à 15 secondes).

</inputs>

<direction>Direction artistique & Règles visuelles

Motion design financier de niveau Apple / Bloomberg Terminal. Rigueur géométrique absolue. La courbe de progression n'est pas un tracé SVG statique avec un simple trait : c'est un flux de données vivant qui se construit sous les yeux de l'observateur. L'aire sous la courbe utilise un dégradé vertical subtil (opacité 25% au sommet, 0% à la base). Les points de données cruciaux surgissent avec un cercle à double anneau pulsant, accompagnés d'infobulles d'enrichissement qui s'ouvrent en accordéon. Les compteurs numériques s'incrémentent avec un effet d'accélération puis de décélération logarithmique fluide (pas de saut saccadé). Strictement banni : courbes en escalier grossières, polices à espacement proportionnel qui font trembler les chiffres lors du défilement, arrière-plans chargés de grilles criardes, et animations de remplissage brutales sans amortissement.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Durée totale 12 secondes, séquencée en 4 temps forts : - 0.0s - 2.5s : Construction du repère. La grille millimétrique s'illumine en fondu doux avec les axes gradués (abscisses temporelles et ordonnées monétaires). Les libellés d'axes apparaissent de gauche à droite. - 2.5s - 7.0s : Le tracé de la courbe. Le chemin vectoriel SVG se dessine de gauche à droite selon une courbe de Bézier cubique lissée. Une particule pilote lumineuse guide la tête du tracé. Le compteur numérique central principal s'affole, passant de 0 à la valeur cible en synchronisation parfaite avec l'avancée de la tête de courbe. - 7.0s - 9.5s : Les jalons interactifs. Au passage de la courbe sur 3 dates clés, 3 points de données émergent en élévation 3D. Une infobulle avec ombre portée douce détaille le pourcentage de surperformance. - 9.5s - 12.0s : La synthèse globale. Un halo lumineux parcourt la courbe d'un bout à l'autre, le badge de pourcentage final (+142%) s'illumine en vert émeraude éclatant avec une coche de validation.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML/SVG autonome, format 1920x1080. Fonction de temps seek(t) pure. 2. Calcul mathématique du tracé : interpolation spline cubique (Catmull-Rom ou Monotone Cubic Spline) pour éviter tout angle brisé entre les points de données. 3. Animation du tracé par décalage de tiret vectoriel : path.getTotalLength() calculé au démarrage pour animer précisément stroke-dashoffset de length à 0 selon une courbe cubic-bezier(0.22, 1, 0.36, 1). 4. Compteurs numériques : utilisation de polices à chiffres tabulaires (font-variant-numeric: tabular-nums) avec formatage monétaire automatisé (séparateurs d'espaces fins et devise). 5. Rendu vidéo : script Playwright avec capture subframe et pipeline ffmpeg pour flou cinétique à 60fps.

</build>

<gotchas>Pièges techniques & Erreurs à éviter

Si les chiffres tremblent de gauche à droite pendant le décompte, c'est que la police n'est pas en chiffres tabulaires : appliquez impérativement 'font-feature-settings: "tnum" 1'. Veillez à fermer correctement le polygone de l'aire sous la courbe (vers l'axe zéro) pour que le dégradé ne bave pas hors du cadre.

</gotchas>

<start>Consigne d’amorçage & Démarrage

Demande-moi d'abord mes chiffres et mes jalons clés (<inputs>), puis affiche la maquette du tracé et les paliers d'accélération avant de fournir le code exécutable.

</start>

À remplacer avant de coller : [couleur de courbe]

Pourquoi ça marche mieux

Demande vague

« anime un graphique avec des chiffres qui montent »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Exemple de rendu technique produit : - Tracé SVG vectoriel responsive avec viewBox 0 0 800 400. - Courbe de Bézier cubique avec dégradé linéaire vibrant (bleu vers turquoise ou rose néon). - Déclenchement de l'animation au chargement : tracé effectué en 2,4 secondes (courbe cubic-bezier 0.25, 1, 0.5, 1). - Points de données surgissant avec effet d'onde radiale (pulse). - Compteur JavaScript incrémentiel de 0 à la valeur cible avec séparateurs de milliers et unité personnalisable. - Fond avec grille subtile en pointillés et halo lumineux doux (drop-shadow). Le code fonctionne immédiatement en double-cliquant sur le fichier .html et peut être capturé en vidéo ou intégré directement dans une application web.

Pour améliorer la réponse, relancez

Ajoute un comparatif avec une deuxième courbe d’une autre couleur représentant l’année précédente.
Transforme la courbe en graphique à barres verticales animées en cascade.

Conseil. Pour un tracé SVG parfaitement fluide, calculez la longueur exacte du chemin avec la méthode JavaScript path.getTotalLength() et assignez-la dynamiquement à stroke-dasharray et stroke-dashoffset.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite