Ir al contenido principal
Llamada a la acción

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

Cierre de newsletter

motion design

El titular aparece, una dirección se escribe en el campo y el botón de suscripción entra deslizándose.

Ideal para: Cerrar un vídeo haciendo crecer tu lista.

Ajustes

Fuente
Tema
Tamaño
Ánimo

Úsala en un vídeo

Lo que puedes cambiar:titlesupportfieldbutton
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": "Subscribe",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "Newsletter end card",
        "intent": "ask the viewer to subscribe",
        "exit": "fadeOut",
        "params": [
          {
            "name": "title",
            "type": "text",
            "label": "Title",
            "default": "Get the Friday brief",
            "maxLength": 28
          },
          {
            "name": "support",
            "type": "text",
            "label": "Support line",
            "default": "Five minutes, every week, no spam.",
            "maxLength": 44
          },
          {
            "name": "field",
            "type": "text",
            "label": "Field text",
            "default": "you@company.com",
            "maxLength": 24
          },
          {
            "name": "button",
            "type": "text",
            "label": "Button",
            "default": "Subscribe",
            "maxLength": 12
          }
        ],
        "layers": [
          {
            "id": "title",
            "kind": "text",
            "text": "{{title}}",
            "role": "display",
            "align": "center",
            "maxLines": 2,
            "box": {
              "col": 0,
              "row": 0.2,
              "cols": 12,
              "rows": 3.6
            },
            "tall": {
              "col": 0,
              "row": 0.8,
              "cols": 12,
              "rows": 3.6
            },
            "enter": {
              "primitive": "wordStagger"
            }
          },
          {
            "id": "support",
            "kind": "text",
            "text": "{{support}}",
            "role": "headline",
            "color": "sub",
            "align": "center",
            "maxLines": 2,
            "box": {
              "col": 0,
              "row": 4.2,
              "cols": 12,
              "rows": 2.2
            },
            "tall": {
              "col": 0,
              "row": 4.7,
              "cols": 12,
              "rows": 2.4
            },
            "enter": {
              "primitive": "wordStagger",
              "order": 1
            }
          },
          {
            "id": "fieldBox",
            "kind": "shape",
            "shape": "rect",
            "fill": "surface",
            "stroke": "sub",
            "strokeWidth": "hair",
            "radius": "pill",
            "box": {
              "col": 0.5,
              "row": 7.4,
              "cols": 7.6,
              "rows": 3
            },
            "tall": {
              "col": 0.5,
              "row": 7.6,
              "cols": 11,
              "rows": 1.8
            },
            "enter": {
              "primitive": "slideIn",
              "from": "left",
              "distance": "nudge",
              "order": 2
            }
          },
          {
            "id": "field",
            "kind": "text",
            "text": "{{field}}",
            "role": "headline",
            "color": "sub",
            "align": "start",
            "maxLines": 1,
            "box": {
              "col": 1.1,
              "row": 7.4,
              "cols": 6.6,
              "rows": 3
            },
            "tall": {
              "col": 1.2,
              "row": 7.6,
              "cols": 9.6,
              "rows": 1.8
            },
            "enter": {
              "primitive": "typewriter",
              "order": 3
            }
          },
          {
            "id": "buttonBox",
            "kind": "shape",
            "shape": "rect",
            "fill": "c1",
            "radius": "pill",
            "elevation": 2,
            "box": {
              "col": 8.4,
              "row": 7.4,
              "cols": 3.1,
              "rows": 3
            },
            "tall": {
              "col": 2.5,
              "row": 9.9,
              "cols": 7,
              "rows": 1.8
            },
            "enter": {
              "primitive": "slideIn",
              "from": "right",
              "distance": "nudge",
              "order": 4
            }
          },
          {
            "id": "button",
            "kind": "text",
            "text": "{{button}}",
            "role": "title",
            "color": "onBrand",
            "align": "center",
            "maxLines": 1,
            "box": {
              "col": 8.4,
              "row": 7.4,
              "cols": 3.1,
              "rows": 3
            },
            "tall": {
              "col": 2.5,
              "row": 9.9,
              "cols": 7,
              "rows": 1.8
            },
            "enter": {
              "primitive": "slideIn",
              "from": "right",
              "distance": "nudge",
              "order": 4
            }
          }
        ]
      },
      "name": "Newsletter end card"
    }
  }
}

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: «Newsletter end card».

Más animaciones de Llamada a la acción