Aller au contenu principal
Données et ROI

Sortie en direct du vrai moteur de rendu — modifiez les réglages et elle se met à jour instantanément.

Jauge de score

motion design

Un anneau se trace jusqu'au score, puis ce que le score signifie et comment il a évolué.

Idéal pour : NPS, score de satisfaction, note d'audit.

Réglages

Police
Thème
Taille
Humeur

L'utiliser dans un film

Ce que vous pouvez changer :kickerscoretitlesupport
Pour les développeurs (MCP et JSON)

Voici la scène exacte à envoyer à create_animation (MCP) : gardez la structure, changez les mots et écrivez la narration — c'est la voix qui fixe la durée de la scène. Collez-la dans update_storyboard avec set_data pour modifier un film déjà fait.

{
  "visual": "motion",
  "heading": "Score",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "Score gauge",
        "intent": "one score out of a hundred, and what it means",
        "exit": "mirror",
        "params": [
          {
            "name": "kicker",
            "type": "text",
            "label": "Eyebrow",
            "default": "Net Promoter Score",
            "maxLength": 24
          },
          {
            "name": "score",
            "type": "list",
            "items": "pair",
            "label": "Score",
            "min": 1,
            "max": 1,
            "default": [
              {
                "label": "NPS",
                "value": 72
              }
            ]
          },
          {
            "name": "title",
            "type": "text",
            "label": "What it means",
            "default": "Would recommend us",
            "maxLength": 28
          },
          {
            "name": "support",
            "type": "text",
            "label": "Support line",
            "default": "Up from 41 a year ago",
            "maxLength": 36
          }
        ],
        "layers": [
          {
            "id": "ring",
            "kind": "chart",
            "chart": "donut",
            "data": "{{score}}",
            "color": "gradient",
            "max": 100,
            "showValues": true,
            "showLabels": false,
            "box": {
              "col": 0.8,
              "row": 0.6,
              "cols": 4.2,
              "rows": 10.8
            },
            "tall": {
              "col": 1.5,
              "row": 0.2,
              "cols": 9,
              "rows": 5.4
            },
            "enter": {
              "primitive": "strokeDraw",
              "ease": "power4Out",
              "duration": "slow"
            }
          },
          {
            "id": "kicker",
            "kind": "text",
            "text": "{{kicker}}",
            "role": "label",
            "uppercase": true,
            "color": "c2",
            "align": "start",
            "maxLines": 1,
            "box": {
              "col": 5.6,
              "row": 1.4,
              "cols": 6.4,
              "rows": 1
            },
            "tall": {
              "col": 0,
              "row": 6,
              "cols": 12,
              "rows": 0.9
            },
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge",
              "order": 1
            }
          },
          {
            "id": "title",
            "kind": "text",
            "text": "{{title}}",
            "role": "display",
            "align": "start",
            "maxLines": 2,
            "box": {
              "col": 5.6,
              "row": 2.8,
              "cols": 6.4,
              "rows": 5
            },
            "tall": {
              "col": 0,
              "row": 7.1,
              "cols": 12,
              "rows": 2.9
            },
            "enter": {
              "primitive": "maskReveal",
              "order": 1
            }
          },
          {
            "id": "support",
            "kind": "text",
            "text": "{{support}}",
            "role": "headline",
            "color": "sub",
            "align": "start",
            "maxLines": 2,
            "box": {
              "col": 5.6,
              "row": 8.2,
              "cols": 6.4,
              "rows": 3
            },
            "tall": {
              "col": 0,
              "row": 10.2,
              "cols": 12,
              "rows": 1.5
            },
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge",
              "order": 2
            }
          }
        ]
      },
      "name": "Score gauge"
    }
  }
}

Réutilisez-la : enregistrez data.motion.spec une fois avec save_motion_spec (vérifiée comme avec validate_motion_spec), puis toute scène peut utiliser le visuel « motion » avec data.motion.specId et ses propres paramètres. Nom de la spec : « Score gauge ».

Autres animations Données et ROI