> ## Documentation Index
> Fetch the complete documentation index at: https://motionly.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Motion language overview

> Overview of the .motion language, Motionly's readable source format for describing canvas settings, elements, tracks, clips, audio, and animations.

# Motion Language Reference

`.motion` is Motionly's source format. The editor should create and update it visually, but agents and contributors need to keep the syntax clean.

## Canvas

```motion theme={null}
canvas {
  size 1920x1080
  fps 60
  duration 5s
  background #020308
}
```

## Text

```motion theme={null}
text title {
  value "Motion graphics"
  center
  x 0
  y 0
  size 72
  color #ffffff
  opacity 1
}
```

Use `size`, not `fontSize`.

## Asset

```motion theme={null}
import "./assets/logo.svg" as logo

logo {
  center
  width 240
  opacity 1
}
```

`import` accepts PNG/JPEG, static or animated SVG, GIF, MP4, WebM, MOV/M4V, and `.lottie`. Animated assets use the same editable layer transforms and timeline `clip` syntax as images.

## Animation

```motion theme={null}
animate title {
  from {
    opacity 0
    y 80
    blur 10
  }

  to {
    opacity 1
    y 0
    blur 0
  }

  duration 1.2s
  delay 0s
  easing power3.out
}
```

Use `easing`, not `ease`.

## Useful Properties

* `x`
* `y`
* `width`
* `height`
* `scale`
* `rotation`
* `originX` / `originY` (normalized transform origin)
* `skewX` / `skewY`
* `opacity`
* `blur`
* `brightness`
* `shadow`
* `size`
* `color`
* `fill`, `stroke`, `strokeWidth` (simple path SVG overrides)
* `center`
* `layer`

## Audio

```motion theme={null}
audio "/assets/my-project/background.mp3" {
  start 0s
}
```

Audio files persist in `.motion`, play during preview, remain on the bottom track, and export with MP4. Dragging audio horizontally updates `start`.

## Timeline Tracks and Clips

```motion theme={null}
track main {
  label "Main Track"
  role main
  content primary
  order 0
}

track titles {
  label "Text Overlay"
  role overlay
  content text
  hidden false
  order 1
}

import "/assets/my-project/video.mp4" as bgVideo

clip bgVideo {
  track main
  start 0s
  duration 5s
  trimIn 0s
  trimOut 0s
}

text title {
  value "Editable title"
  track titles
  start 1s
  duration 3s
}
```

Track roles are `main`, `overlay`, and `audio`. Track content records legacy/purpose metadata (`primary`, `video`, `image`, `text`, `effect`, or `audio`). Visual roles and content do not restrict editing: every visual track behaves as a simple layer, accepts any visual content, and allows gaps or overlaps. `hidden` suppresses a visual track, `muted` disables track audio, and `order` persists layer stacking. Audio remains bottom-only.

Media clips use `start`, `duration`, `trimIn`, and `trimOut`. Regular text/image/overlay/effect elements use `start` and `duration` as a non-destructive visibility window, so trimming and splitting do not rewrite authored animations. Existing numeric clip tracks remain backward compatible.

## Easing

Preferred:

* `power3.out`
* `smooth`
* `soft`
* `ease-out`
* `linear`

## Product Rule

Do not make `.motion` authoring the main user workflow. Keep it readable because it is the source of truth, but build UI controls first.