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.

Barre d'objectif

motion design

Le titre arrive mot à mot, le chiffre s'incrémente et une barre de progression avance vers l'objectif.

Idéal pour : Une levée de fonds, une liste d'attente, un objectif presque atteint.

Réglages

Police
Thème
Taille
Humeur

L'utiliser dans un film

Ce que vous pouvez changer :titlesharevaluesupport
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": "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"
    }
  }
}

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

Autres animations Données et ROI