Ir al contenido principal
Datos y ROI

Salida en vivo del motor de render real — edita los ajustes y se actualiza al instante.

Indicador de puntuación

motion design

Un anillo se dibuja hasta la puntuación y luego lo que significa y cómo ha cambiado.

Ideal para: NPS, puntuación de satisfacción, nota de auditoría.

Ajustes

Fuente
Tema
Tamaño
Ánimo

Úsala en un vídeo

Lo que puedes cambiar:kickerscoretitlesupport
Para desarrolladores (MCP y JSON)

Esta es la escena exacta para enviar a create_animation (MCP): mantén la estructura, cambia las palabras y escribe la narración — la voz fija cuánto dura la escena. Pégala en update_storyboard con set_data para cambiar un vídeo que ya hiciste.

{
  "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"
    }
  }
}

Reutilízala: guarda data.motion.spec una vez con save_motion_spec (se comprueba como con validate_motion_spec) y cualquier escena podrá usar el visual «motion» con data.motion.specId y sus propios parámetros. Nombre de la spec: «Score gauge».

Más animaciones de Datos y ROI