Automotion docs

Image element

Places an image on the canvas — either a URL you host (`src`) or an AI-generated image (`generate`). Provide exactly one of the two.

Places an image on the canvas — either a URL you host (src) or an AI-generated image (generate). Provide exactly one of the two.

Properties

PropertyTypeDefaultDescription
id *string (non-empty)Stable identifier, unique across the whole movie. Used by editor selection sync and error paths.
startnumber (≥ 0)0When the element appears, in seconds relative to its scene (or to the movie for movie-level elements).
durationnumber (> 0)How long the element is active, in seconds. Defaults to the remainder of its scene.
positionobject | "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right""center"Where to place the element: absolute {x, y} pixels or a named anchor.
widthnumber (> 0)Element box width in output pixels. Defaults to an element-specific intrinsic size.
heightnumber (> 0)Element box height in output pixels. Defaults to an element-specific intrinsic size.
opacitynumber (0–1)1Element opacity from 0 (invisible) to 1 (fully opaque).
rotationnumber0Rotation around the element's center, in degrees (clockwise).
animationobjectEntrance animation applied when the element appears.
type *"image"A static image from a URL or generated by AI.
srcstring (non-empty)Image source URL. Provide exactly one of "src" or "generate".
generateobjectAI image generation request, used instead of a source URL.
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.

position object

Absolute pixel position of the element's center.

PropertyTypeDefaultDescription
x *numberHorizontal position of the element's center, in output pixels from the left edge.
y *numberVertical position of the element's center, in output pixels from the top edge.

animation object

Entrance animation applied when the element appears.

PropertyTypeDefaultDescription
preset *"none" | "fade" | "slide-in-left" | "slide-in-right" | "slide-in-up" | "slide-in-down" | "zoom-in" | "zoom-out"Entrance animation preset applied when the element appears.
easing"linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out""ease"Easing curve applied to the animation.
durationnumber (> 0)0.5Animation duration in seconds.

generate object

AI image generation request, used instead of a source URL.

PropertyTypeDefaultDescription
prompt *string (non-empty)Prompt for AI image generation. May contain {{variable}} placeholders.
stylestring (non-empty)Optional style hint passed to the image model, e.g. "photographic".
seedinteger (≥ 0)Seed for reproducible generations. Identical requests are served from cache.

Example

Image: a URL image plus an AI-generated background:

movie.json
{
  "schema": "v1",
  "preset": "1:1",
  "scenes": [
    {
      "id": "product",
      "duration": 5,
      "elements": [
        {
          "id": "product-bg",
          "type": "image",
          "generate": {
            "prompt": "soft gradient studio backdrop, warm tones",
            "style": "photographic",
            "seed": 7
          },
          "fit": "cover"
        },
        {
          "id": "product-shot",
          "type": "image",
          "src": "https://assets.example.com/products/sneaker.png",
          "width": 640,
          "height": 640,
          "fit": "contain",
          "animation": {
            "preset": "zoom-in",
            "duration": 0.6
          }
        }
      ]
    }
  ]
}

▶ Try it in the playground

On this page