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.

Respuestas FAQ

motion design

Las preguntas que hacen los compradores, cada una con un icono y una respuesta de una línea.

Ideal para: Quitar las últimas objeciones justo antes de la llamada a la acción.

Ajustes

Fuente
Tema
Tamaño
Ánimo

Úsala en un vídeo

Ideal paraPreciosCierre
Lo que puedes cambiar:kickertitleitems
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": "FAQ",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "FAQ",
        "intent": "iconList: a headline and 3-5 features, each an icon, a title and an optional caption",
        "stagger": "item",
        "params": [
          {
            "name": "kicker",
            "type": "text",
            "default": "Questions we hear",
            "maxLength": 28,
            "label": "Eyebrow"
          },
          {
            "name": "title",
            "type": "text",
            "default": "What every new customer asks",
            "maxLength": 44,
            "label": "Title"
          },
          {
            "name": "items",
            "type": "list",
            "default": [
              {
                "icon": "❓",
                "title": "Do I need a card?",
                "caption": "No, the trial is free"
              },
              {
                "icon": "🔒",
                "title": "Is my data safe?",
                "caption": "Encrypted, hosted in the EU"
              },
              {
                "icon": "↩️",
                "title": "Can I cancel?",
                "caption": "Any time, in one click"
              },
              {
                "icon": "🌍",
                "title": "Which languages?",
                "caption": "Every major one"
              }
            ],
            "min": 3,
            "max": 5,
            "items": "record",
            "label": "Items"
          }
        ],
        "layers": [
          {
            "id": "kicker",
            "kind": "text",
            "text": "{{kicker}}",
            "role": "label",
            "uppercase": true,
            "color": "c2",
            "align": "start",
            "maxLines": 1,
            "box": {
              "col": 0,
              "row": 3,
              "cols": 5.6,
              "rows": 0.7
            },
            "tall": {
              "col": 0,
              "row": 0,
              "cols": 12,
              "rows": 0.6
            },
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge",
              "order": 0
            }
          },
          {
            "id": "title",
            "kind": "text",
            "text": "{{title}}",
            "role": "display",
            "align": "start",
            "maxLines": 4,
            "box": {
              "col": 0,
              "row": 4,
              "cols": 5.6,
              "rows": 5
            },
            "tall": {
              "col": 0,
              "row": 0.7,
              "cols": 12,
              "rows": 2.9
            },
            "valign": "start",
            "enter": {
              "primitive": "maskReveal",
              "order": 0
            },
            "emphasis": {
              "primitive": "underline"
            },
            "exit": {
              "primitive": "exitLift"
            }
          },
          {
            "id": "card",
            "kind": "shape",
            "shape": "rect",
            "fill": "surface",
            "radius": "lg",
            "elevation": 2,
            "repeat": {
              "param": "items",
              "flow": "column",
              "gap": "md"
            },
            "box": {
              "col": 6.1,
              "row": 0,
              "cols": 5.9,
              "rows": 12
            },
            "tall": {
              "col": 0,
              "row": 4,
              "cols": 12,
              "rows": 8
            },
            "enter": {
              "primitive": "fadeUp",
              "order": 1
            }
          },
          {
            "id": "icon",
            "kind": "icon",
            "icon": "{{item.icon}}",
            "color": "c1",
            "repeat": {
              "param": "items",
              "flow": "column",
              "gap": "md"
            },
            "box": {
              "col": 6.4,
              "row": 0,
              "cols": 1,
              "rows": 12
            },
            "tall": {
              "col": 0.4,
              "row": 4,
              "cols": 1.7,
              "rows": 8
            },
            "enter": {
              "primitive": "scaleSettle",
              "order": 2
            }
          },
          {
            "id": "itemTitle",
            "kind": "text",
            "text": "{{item.title}}",
            "role": "title",
            "align": "start",
            "maxLines": 1,
            "repeat": {
              "param": "items",
              "flow": "column",
              "gap": "lg"
            },
            "box": {
              "col": 7.7,
              "row": 0.2,
              "cols": 4,
              "rows": 11.6
            },
            "tall": {
              "col": 2.4,
              "row": 4.2,
              "cols": 9.2,
              "rows": 7.6
            },
            "valign": "start",
            "enter": {
              "primitive": "fadeSlide",
              "from": "right",
              "order": 2
            }
          },
          {
            "id": "itemCaption",
            "kind": "text",
            "text": "{{item.caption}}",
            "role": "body",
            "color": "sub",
            "align": "start",
            "maxLines": 2,
            "repeat": {
              "param": "items",
              "flow": "column",
              "gap": "lg"
            },
            "box": {
              "col": 7.7,
              "row": 0.2,
              "cols": 4,
              "rows": 11.6
            },
            "tall": {
              "col": 2.4,
              "row": 4.2,
              "cols": 9.2,
              "rows": 7.6
            },
            "valign": "end",
            "enter": {
              "primitive": "fadeSlide",
              "from": "right",
              "distance": "nudge",
              "order": 3
            }
          }
        ]
      },
      "name": "FAQ"
    }
  }
}

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

Más animaciones de Llamada a la acción