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.

Chiffre de portée mondiale

motion design

Un chiffre clé s'incrémente avec deux statistiques d'appui sur des cartes à côté.

Idéal pour : Portée, échelle, couverture : le chiffre qui dit l'ampleur.

Réglages

Police
Thème
Taille
Humeur

L'utiliser dans un film

Ce que vous pouvez changer :kickervaluelabelstats
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": "Reach",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "Global reach",
        "intent": "heroNumber: one headline figure (value + what it measures), optional support line and up to 3 supporting stats",
        "stagger": "item",
        "params": [
          {
            "name": "kicker",
            "type": "text",
            "default": "Worldwide",
            "maxLength": 28,
            "label": "Eyebrow"
          },
          {
            "name": "value",
            "type": "text",
            "default": "4,200",
            "maxLength": 10,
            "label": "Figure"
          },
          {
            "name": "label",
            "type": "text",
            "default": "teams in 120 countries use it every week",
            "maxLength": 40,
            "label": "What it measures"
          },
          {
            "name": "stats",
            "type": "list",
            "default": [
              {
                "value": "38",
                "label": "languages"
              },
              {
                "value": "24/7",
                "label": "support"
              }
            ],
            "min": 1,
            "max": 3,
            "items": "record",
            "label": "Supporting stats"
          }
        ],
        "layers": [
          {
            "id": "kicker",
            "kind": "text",
            "text": "{{kicker}}",
            "role": "label",
            "uppercase": true,
            "color": "c2",
            "align": "start",
            "maxLines": 1,
            "box": {
              "col": 0,
              "row": 0.4,
              "cols": 7,
              "rows": 0.7
            },
            "tall": {
              "col": 0,
              "row": 0,
              "cols": 12,
              "rows": 0.6
            },
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge",
              "order": 0
            }
          },
          {
            "id": "value",
            "kind": "number",
            "value": "{{value}}",
            "role": "hero",
            "color": "gradient",
            "align": "start",
            "box": {
              "col": 0,
              "row": 1.4,
              "cols": 7,
              "rows": 6
            },
            "tall": {
              "col": 0,
              "row": 0.7,
              "cols": 12,
              "rows": 4
            },
            "enter": {
              "primitive": "countUp",
              "order": 1
            },
            "emphasis": {
              "primitive": "lightSweep"
            },
            "exit": {
              "primitive": "exitLift"
            }
          },
          {
            "id": "label",
            "kind": "text",
            "text": "{{label}}",
            "role": "headline",
            "align": "start",
            "maxLines": 2,
            "box": {
              "col": 0,
              "row": 7.699999999999999,
              "cols": 7,
              "rows": 2.6
            },
            "tall": {
              "col": 0,
              "row": 4.9,
              "cols": 12,
              "rows": 2
            },
            "enter": {
              "primitive": "maskReveal",
              "order": 2
            },
            "exit": {
              "primitive": "exitLift"
            }
          },
          {
            "id": "card",
            "kind": "shape",
            "shape": "rect",
            "fill": "surface",
            "radius": "lg",
            "elevation": 2,
            "repeat": {
              "param": "stats",
              "flow": "column",
              "gap": "md"
            },
            "box": {
              "col": 7.6,
              "row": 2.35,
              "cols": 4.4,
              "rows": 7.3
            },
            "tall": {
              "col": 0,
              "row": 7.2,
              "cols": 12,
              "rows": 4.8
            },
            "enter": {
              "primitive": "fadeSlide",
              "from": "right",
              "order": 2
            }
          },
          {
            "id": "stat",
            "kind": "text",
            "text": "{{item.value}}",
            "role": "headline",
            "color": "ink",
            "align": "start",
            "maxLines": 1,
            "repeat": {
              "param": "stats",
              "flow": "column",
              "gap": "lg"
            },
            "box": {
              "col": 8,
              "row": 2.5500000000000003,
              "cols": 3.7,
              "rows": 6.8999999999999995
            },
            "tall": {
              "col": 0.5,
              "row": 7.4,
              "cols": 11,
              "rows": 4.3999999999999995
            },
            "valign": "start",
            "enter": {
              "primitive": "fadeUp",
              "order": 3
            }
          },
          {
            "id": "statLabel",
            "kind": "text",
            "text": "{{item.label}}",
            "role": "body",
            "color": "sub",
            "align": "start",
            "maxLines": 2,
            "repeat": {
              "param": "stats",
              "flow": "column",
              "gap": "lg"
            },
            "box": {
              "col": 8,
              "row": 2.5500000000000003,
              "cols": 3.7,
              "rows": 6.8999999999999995
            },
            "tall": {
              "col": 0.5,
              "row": 7.4,
              "cols": 11,
              "rows": 4.3999999999999995
            },
            "valign": "end",
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge",
              "order": 3
            }
          }
        ]
      },
      "name": "Global reach"
    }
  }
}

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 : « Global reach ».

Autres animations Données et ROI