Animate config format

domotion animate is driven by a JSON config validated against a published JSON Schema (schemas/animate-config.schema.json, shipped in the package). Point a JSON-Schema-aware editor at the $schema key for autocomplete and validation.

Shape

{
  "width": 1280,
  "height": 720,
  "output": "demo.svg",
  "optimize": true,
  "cursor": "auto",
  "vars": { "brand": "#6366f1" },
  "frames": [ /* … */ ]
}

A frame

{
  "input": "step1.html",
  "duration": 1500,
  "transition": { "type": "crossfade", "duration": 300 },
  "animations": [
    { "selector": ".bar", "property": "width", "from": "0%", "to": "100%",
      "duration": 1200, "easing": "cubic-bezier(0.215,0.61,0.355,1)" }
  ],
  "overlays": [
    { "kind": "typing", "selector": "input", "text": "hello", "caret": true }
  ]
}

• Frame source: input (HTML/URL), template, or cast.
• Transitions: crossfade · cut · push-left · scroll · magic-move.
• animations — per-element: opacity, transform, translateX/Y, scale, width/height, clipPath; with easing, delay, repeat, alternate, transformOrigin.
• overlays — typing / tap / svg / blink, optionally anchored to an element’s box.
• Continuous sessions — omit input or set "continue": true, then drive the page with actions and wait with waitForText / waitForGone / waitForCount.
• cursor — "auto" (derive a pointer from interactions) or an explicit { events: [...] } timeline.
• vars + ${name} — interpolated into any string field.

Every field

This page is the guided tour. For the exhaustive, always-current list of every config and frame field — including each actions verb, every overlays kind, the cursor event timeline, and intra-frame animations — see the full field reference. That page is generated directly from schemas/animate-config.schema.json at build time, so it can never drift from what the CLI actually validates. Point a JSON-Schema-aware editor at the $schema key for the same data inline, or run domotion animate --help.