Aller au contenu principal
Fonctionnalités

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

Feuille de route maintenant / ensuite / plus tard

motion design

Un rail se trace, puis trois colonnes révèlent ce qui sort maintenant, ensuite et plus tard, pendant que la caméra panote.

Idéal pour : Une feuille de route publique, un point investisseurs, un aperçu des nouveautés.

Réglages

Police
Thème
Taille
Humeur

L'utiliser dans un film

Ce que vous pouvez changer :titlephases
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": "Roadmap",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "Roadmap",
        "intent": "what ships now, next and later",
        "camera": "panRight",
        "exit": "mirror",
        "params": [
          {
            "name": "title",
            "type": "text",
            "label": "Title",
            "default": "Where the product goes next",
            "maxLength": 30
          },
          {
            "name": "phases",
            "type": "list",
            "items": "record",
            "label": "Phases (label, title, caption)",
            "min": 3,
            "max": 3,
            "default": [
              {
                "label": "Now",
                "title": "Team workspaces",
                "caption": "Shipping this month"
              },
              {
                "label": "Next",
                "title": "Brand kits",
                "caption": "Beta in November"
              },
              {
                "label": "Later",
                "title": "Live editing",
                "caption": "Exploring for 2027"
              }
            ]
          }
        ],
        "layers": [
          {
            "id": "title",
            "kind": "text",
            "text": "{{title}}",
            "role": "display",
            "align": "start",
            "maxLines": 2,
            "box": {
              "col": 0,
              "row": 0,
              "cols": 12,
              "rows": 3.2
            },
            "tall": {
              "col": 0,
              "row": 0.2,
              "cols": 12,
              "rows": 2.8
            },
            "enter": {
              "primitive": "maskReveal"
            }
          },
          {
            "id": "rail",
            "kind": "shape",
            "shape": "line",
            "stroke": "c1",
            "strokeWidth": "bold",
            "box": {
              "col": 0,
              "row": 3.45,
              "cols": 12,
              "rows": 0.5
            },
            "tall": {
              "col": 0.15,
              "row": 3.4,
              "cols": 0.5,
              "rows": 8.4
            },
            "enter": {
              "primitive": "drawOn",
              "order": 1
            }
          },
          {
            "id": "phase",
            "kind": "text",
            "text": "{{item.label}}",
            "role": "title",
            "color": "c1",
            "uppercase": true,
            "align": "start",
            "valign": "start",
            "maxLines": 1,
            "repeat": {
              "param": "phases",
              "flow": "row",
              "gap": "md"
            },
            "box": {
              "col": 0,
              "row": 4.4,
              "cols": 12,
              "rows": 1.4
            },
            "tall": {
              "col": 0.9,
              "row": 3.4,
              "cols": 4.6,
              "rows": 8.4
            },
            "enter": {
              "primitive": "maskReveal",
              "order": 2
            }
          },
          {
            "id": "item",
            "kind": "text",
            "text": "{{item.title}}",
            "role": "headline",
            "align": "start",
            "valign": "center",
            "maxLines": 2,
            "repeat": {
              "param": "phases",
              "flow": "row",
              "gap": "md"
            },
            "box": {
              "col": 0,
              "row": 6.2,
              "cols": 12,
              "rows": 3.4
            },
            "tall": {
              "col": 5.9,
              "row": 3.4,
              "cols": 6.1,
              "rows": 8.4
            },
            "enter": {
              "primitive": "maskReveal",
              "order": 2
            }
          },
          {
            "id": "when",
            "kind": "text",
            "text": "{{item.caption}}",
            "role": "title",
            "color": "sub",
            "align": "start",
            "valign": "end",
            "maxLines": 2,
            "repeat": {
              "param": "phases",
              "flow": "row",
              "gap": "md"
            },
            "box": {
              "col": 0,
              "row": 9.9,
              "cols": 12,
              "rows": 2
            },
            "tall": {
              "col": 0.9,
              "row": 3.4,
              "cols": 4.6,
              "rows": 8.4
            },
            "enter": {
              "primitive": "maskReveal",
              "order": 2
            }
          }
        ]
      },
      "name": "Roadmap"
    }
  }
}

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

Autres animations Fonctionnalités