Ir al contenido principal
Revelación

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

Cuenta atrás de lanzamiento

motion design

La fecha de lanzamiento se escribe sola y luego días, horas y minutos cuentan en tres fichas.

Ideal para: Un lanzamiento, un webinar, una oferta que termina.

Ajustes

Fuente
Tema
Tamaño
Ánimo

Úsala en un vídeo

Lo que puedes cambiar:kickerdateunits
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": "Countdown",
  "narration": "Write the sentence the voice says over this scene; its length is the scene's.",
  "data": {
    "motion": {
      "spec": {
        "version": 1,
        "name": "Launch countdown",
        "intent": "how long until the launch",
        "exit": "mirror",
        "params": [
          {
            "name": "kicker",
            "type": "text",
            "label": "Eyebrow",
            "default": "Save the date",
            "maxLength": 24
          },
          {
            "name": "date",
            "type": "text",
            "label": "Date",
            "default": "Live on 21 October",
            "maxLength": 24
          },
          {
            "name": "units",
            "type": "list",
            "items": "record",
            "label": "Units (value, label)",
            "min": 3,
            "max": 3,
            "default": [
              {
                "value": "09",
                "label": "days"
              },
              {
                "value": "14",
                "label": "hours"
              },
              {
                "value": "36",
                "label": "minutes"
              }
            ]
          }
        ],
        "layers": [
          {
            "id": "kicker",
            "kind": "text",
            "text": "{{kicker}}",
            "role": "label",
            "uppercase": true,
            "color": "c2",
            "align": "center",
            "maxLines": 1,
            "box": {
              "col": 0,
              "row": 0.1,
              "cols": 12,
              "rows": 1
            },
            "tall": {
              "col": 0,
              "row": 0.4,
              "cols": 12,
              "rows": 0.9
            },
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge"
            }
          },
          {
            "id": "date",
            "kind": "text",
            "text": "{{date}}",
            "role": "headline",
            "align": "center",
            "maxLines": 1,
            "box": {
              "col": 0,
              "row": 1.4,
              "cols": 12,
              "rows": 2.4
            },
            "tall": {
              "col": 0,
              "row": 1.6,
              "cols": 12,
              "rows": 2.2
            },
            "enter": {
              "primitive": "typewriter"
            }
          },
          {
            "id": "tile",
            "kind": "shape",
            "shape": "rect",
            "fill": "surface",
            "radius": "lg",
            "elevation": 2,
            "repeat": {
              "param": "units",
              "flow": "row",
              "gap": "lg"
            },
            "box": {
              "col": 0.6,
              "row": 4.4,
              "cols": 10.8,
              "rows": 7.4
            },
            "tall": {
              "col": 1,
              "row": 4.4,
              "cols": 10,
              "rows": 7.4
            },
            "enter": {
              "primitive": "fadeUp",
              "order": 1
            }
          },
          {
            "id": "value",
            "kind": "number",
            "value": "{{item.value}}",
            "role": "display",
            "color": "gradient",
            "align": "center",
            "repeat": {
              "param": "units",
              "flow": "row",
              "gap": "lg"
            },
            "box": {
              "col": 0.6,
              "row": 4.9,
              "cols": 10.8,
              "rows": 4.2
            },
            "tall": {
              "col": 1.3,
              "row": 4.4,
              "cols": 4.8,
              "rows": 7.4
            },
            "enter": {
              "primitive": "countUp",
              "order": 2
            }
          },
          {
            "id": "unit",
            "kind": "text",
            "text": "{{item.label}}",
            "role": "title",
            "color": "sub",
            "align": "center",
            "uppercase": true,
            "maxLines": 1,
            "repeat": {
              "param": "units",
              "flow": "row",
              "gap": "lg"
            },
            "box": {
              "col": 0.6,
              "row": 9.4,
              "cols": 10.8,
              "rows": 1.8
            },
            "tall": {
              "col": 6.4,
              "row": 4.4,
              "cols": 4.3,
              "rows": 7.4
            },
            "enter": {
              "primitive": "fadeUp",
              "distance": "nudge",
              "order": 2
            }
          }
        ]
      },
      "name": "Launch countdown"
    }
  }
}

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

Más animaciones de Revelación