Ir al contenido principal
Datos y ROI

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

Barra de objetivo

motion design

El titular llega palabra a palabra, la cifra cuenta hacia arriba y una barra de progreso avanza hacia la meta.

Ideal para: Una recaudación, una lista de espera, una meta que está cerca.

Ajustes

Fuente
Tema
Tamaño
Ánimo

Úsala en un vídeo

Lo que puedes cambiar:titlesharevaluesupport
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": "Goal",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "Goal progress",
        "intent": "how close we are to the goal",
        "camera": "pushIn",
        "exit": "mirror",
        "params": [
          {
            "name": "title",
            "type": "text",
            "label": "Title",
            "default": "Our sign-up goal, almost there",
            "maxLength": 40
          },
          {
            "name": "share",
            "type": "list",
            "items": "pair",
            "label": "Progress",
            "min": 1,
            "max": 1,
            "default": [
              {
                "label": "of 10,000 sign-ups",
                "value": 78
              }
            ]
          },
          {
            "name": "value",
            "type": "text",
            "label": "Figure",
            "default": "7,800",
            "maxLength": 10
          },
          {
            "name": "support",
            "type": "text",
            "label": "Support line",
            "default": "with two weeks still to go",
            "maxLength": 40
          }
        ],
        "layers": [
          {
            "id": "title",
            "kind": "text",
            "text": "{{title}}",
            "role": "headline",
            "align": "start",
            "maxLines": 2,
            "box": {
              "col": 0,
              "row": 0.2,
              "cols": 12,
              "rows": 2.6
            },
            "tall": {
              "col": 0,
              "row": 0.4,
              "cols": 12,
              "rows": 2.6
            },
            "enter": {
              "primitive": "wordStagger"
            },
            "emphasis": {
              "primitive": "highlightSweep"
            }
          },
          {
            "id": "value",
            "kind": "number",
            "value": "{{value}}",
            "role": "hero",
            "color": "gradient",
            "align": "start",
            "box": {
              "col": 0,
              "row": 3.2,
              "cols": 6.6,
              "rows": 4.4
            },
            "tall": {
              "col": 0,
              "row": 3.4,
              "cols": 12,
              "rows": 3
            },
            "enter": {
              "primitive": "countUp",
              "order": 1
            }
          },
          {
            "id": "support",
            "kind": "text",
            "text": "{{support}}",
            "role": "title",
            "color": "sub",
            "align": "start",
            "maxLines": 2,
            "box": {
              "col": 7,
              "row": 4.2,
              "cols": 5,
              "rows": 2.6
            },
            "tall": {
              "col": 0,
              "row": 6.7,
              "cols": 12,
              "rows": 1.4
            },
            "enter": {
              "primitive": "wordStagger",
              "order": 1
            }
          },
          {
            "id": "bar",
            "kind": "chart",
            "chart": "progress",
            "data": "{{share}}",
            "color": "gradient",
            "unit": "%",
            "showValues": true,
            "showLabels": true,
            "box": {
              "col": 0,
              "row": 8,
              "cols": 12,
              "rows": 3.6
            },
            "tall": {
              "col": 0,
              "row": 8.5,
              "cols": 12,
              "rows": 3
            },
            "enter": {
              "primitive": "lineDraw",
              "ease": "power4Out",
              "duration": "slow",
              "order": 2
            }
          }
        ]
      },
      "name": "Goal progress"
    }
  }
}

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: «Goal progress».

Más animaciones de Datos y ROI