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

Tachymètre circulaire de score KPI à 270° (Master Prompt KPI Gauge)

Le prompt d'ingénierie complet pour concevoir une jauge circulaire de performance ouverte à 270 degrés avec dégradé conique, ressort de rebond et compteur tabulaire.

Débutant 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 : le titre du KPI ou de la métrique [nom de la métrique, ex: "Score d'optimisation de performance" ou "Taux de satisfaction client"], la valeur cible à afficher (ex: 98% ou 850 / 1000), les seuils d'alerte (zones rouge, ambre et verte), et la palette de marque [couleurs].

</inputs>

<direction>Direction artistique & Règles visuelles

Tachymètre de performance de niveau cockpit aéronautique / PageSpeed Insights. La jauge est ouverte à 270 degrés avec ouverture orientée vers le bas pour une dynamique sportive et moderne. L'aiguille ou la barre de progression circulaire s'élance depuis zéro avec une puissance d'accélération tangible, dépasse très légèrement la valeur finale (overshoot élastique de 2%) avant de se verrouiller fermement sur le chiffre exact. Le compteur numérique central défile à toute allure tandis que des graduations vectorielles fines s'illuminent au passage de l'indicateur. Strictement banni : cercles fermés à 360 degrés sans relief, compteurs qui montent à vitesse uniforme linéaire ennuyeuse, et couleurs d'alerte non contrastées.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Durée totale 8,0 secondes en démonstration : - 0.0s - 1.2s : Apparition du cadran à 270 degrés avec ses 24 graduations radiales fines en gris discret et ses libellés minimum (0) et maximum (100). - 1.2s - 4.2s : L'élan de progression. La barre de contour SVG se remplit avec un dégradé conique dynamique (passant de l'ambre chaud au vert menthe éclatant). Le compteur central s'affole de 0 à la valeur cible avec décélération fluide. - 4.2s - 5.5s : Le verrouillage. Rebond élastique précis sur le score cible (+98%), émission d'un anneau de validation et affichage du badge d'appréciation ("EXCELLENT"). - 5.5s - 8.0s : Stabilisation avec lueur douce continue sur le score final.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML/SVG/JavaScript pur avec fonction seek(t) horodatée. 2. Arc de cercle à 270° : calcul trigonométrique de l'angle et utilisation de stroke-dasharray / stroke-dashoffset calibrés sur la longueur exacte de l'arc de 270°. 3. Rendu 60fps Playwright pour capsules vidéo ou tableaux de bord web.

</build>

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

Pour éviter que le compteur ne paraisse trembler pendant le décompte à grande vitesse, utilisez une police à chiffres tabulaires et fixez la largeur du conteneur du chiffre pour que le symbole de pourcentage ne saute pas d'un pixel à l'autre.

</gotchas>

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

Demande-moi d'abord mon indicateur et mon score cible (<inputs>), puis calibre les graduations avant d'écrire le code.

</start>

À remplacer avant de coller : [couleurs]

Pourquoi ça marche mieux

Demande vague

« fais un compteur rond qui monte à 98% »

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.

Cinématique du tachymètre numérique : - Arc de jauge : SVG 'stroke-dasharray' calculé sur 270 degrés (ouverture vers le bas). - Animation d'élan : durée 1,6 seconde, dépassement de 3% (overshoot élastique) avant retour précis sur la valeur cible. - Dégradé conique (conic-gradient) ou SVG linear-gradient passant de l'ambre chaud au vert menthe éclatant. - Graduations : 20 tirets vectoriels discrets disposés en cercle s'illuminant au fur et à mesure de l'avancée de la jauge. - Compteur chiffré central : taille 36px en police grasse sans empattement avec unité animée en exposant.

Pour améliorer la réponse, relancez

Ajoute une comparaison dynamique avec la moyenne du secteur.
Propose une variante en barre de progression horizontale segmentée.

Conseil. Les jauges ouvertes à 270 degrés (style tableau de bord automobile ou jauge de vitesse Google PageSpeed) sont perçues comme beaucoup plus dynamiques qu'un cercle fermé à 360 degrés.

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