Automotion docs

Scene settings

Scenes play in order; each has a duration, an optional background and transition, and a list of elements.

A movie is a sequence of scenes. Each scene owns its elements; duration may be a number of seconds, "longest" (span the longest element) or "voice" (span the scene's voiceover). The transition animates the entry from the previous scene.

Properties

PropertyTypeDefaultDescription
id *string (non-empty)Stable identifier, unique across the whole movie. Used by editor selection sync and error paths.
durationnumber (> 0) | "longest" | "voice"Scene duration: seconds, or "longest" (longest element) or "voice" (voiceover length). Defaults to "longest".
backgroundstring (non-empty) | objectScene background: a CSS color string, or a media reference object.
transitionobjectTransition from the previous scene into this one.
elements *array of (object | object | object | object | object | object | object)Elements rendered in this scene.

background object

Reference to background media (image or video).

PropertyTypeDefaultDescription
src *string (non-empty)Image source URL. Provide exactly one of "src" or "generate".
fit"cover" | "contain" | "fill""cover"How the media scales to its box: cover crops to fill it, contain letterboxes inside it, fill stretches to it.

transition object

Transition from the previous scene into this one.

PropertyTypeDefaultDescription
type *"cut" | "fade" | "wipe" | "slide"Transition style used to enter this scene from the previous one.
durationnumber (≥ 0)0.5Transition duration in seconds (use 0 or type "cut" for an instant switch).

Example

Scene settings: explicit duration, image background, wipe transition:

movie.json
{
  "schema": "v1",
  "preset": "16:9",
  "resolution": "1080p",
  "scenes": [
    {
      "id": "opening",
      "duration": 4,
      "background": "#111827",
      "elements": [
        {
          "id": "opening-text",
          "type": "text",
          "text": "Scene one",
          "fontSize": 72
        }
      ]
    },
    {
      "id": "detail",
      "duration": "longest",
      "background": {
        "src": "https://assets.example.com/backgrounds/office.jpg",
        "fit": "cover"
      },
      "transition": {
        "type": "wipe",
        "duration": 0.4
      },
      "elements": [
        {
          "id": "detail-text",
          "type": "text",
          "text": "Scene two wipes in over an image background",
          "fontSize": 48,
          "position": "bottom-center"
        }
      ]
    }
  ]
}

▶ Try it in the playground

On this page