Motion dialect
The text below is the whole guide a model gets in its prompt (the Motion entry of catalogPrompt(), about 600 tokens).
The prompt guide
Section titled “The prompt guide”Motion animation JSON (compiles to Lottie). Root: {“size”:[w,h], “duration”:ms, “fps”:60, “layers”:[…]}. Layers are listed TOP first; each draws in the composition’s pixel space (origin top-left).
Layer: {“type”:“shape”, “id”:“name”, “transform”:{…}, “shapes”:[…]}. Other types: “solid” {color, size}, “null” (a parent for others), “precomp” {asset, size} with “assets”:{“id”:{“layers”:[…]}}, “text” {text:{text, font, size, color, align}}. Optional: “parent”:“id”, “in”/“out” (ms), “blend”:“multiply”|“screen”…, “matte”:{“source”:“id”,“mode”:“alpha”|“alpha-inverted”|“luma”|“luma-inverted”}, “masks”:[{“path”:“M…Z”,“mode”:“add”|“subtract”|“intersect”,“inverted”:true}].
transform (layers and groups): anchor [x,y], position [x,y], scale [100,100] (percent), rotation (degrees, clockwise), opacity (0–100), skew, skewAxis.
shapes, drawn top first, a style paints every shape listed BEFORE it in the same group:
- geometry: {“type”:“rect”,“position”:[x,y],“size”:[w,h],“radius”:r} (position = centre), {“type”:“ellipse”,“position”,“size”}, {“type”:“star”,“points”:5,“outerRadius”,“innerRadius”}, {“type”:“polygon”,“points”,“outerRadius”}, {“type”:“path”,“d”:“M0 0 L10 0 C… Z”} (SVG path data);
- styles: {“type”:“fill”,“color”}, {“type”:“stroke”,“color”,“width”,“cap”:“round”,“join”:“round”,“dash”:[len,gap]}, {“type”:“gradient-fill”,“kind”:“linear”|“radial”,“start”:[x,y],“end”:[x,y],“stops”:[[0,“#fff”],[1,“#000”]]};
- modifiers: {“type”:“trim”,“start”:0,“end”:100,“offset”:0} (percent; draw-on lines), {“type”:“repeater”,“copies”:n,“transform”:{…}}, {“type”:“round-corners”,“radius”};
- {“type”:“group”,“shapes”:[…],“transform”:{…}} nests and transforms its own shapes. Put shapes inside a group when they need their own transform.
Colours: “#rrggbb”, “#rrggbbaa”, a theme token “$color.primary” (also foreground, muted, accent, destructive, success, warning, info, chart1…chart8) that follows light/dark mode, or {“light”:“#000”,“dark”:“#fff”}. Prefer tokens.
Animate ANY value with keys: {“keys”:[{“t”:0,“v”:[0,0],“ease”:“ease-in-out”},{“t”:600,“v”:[100,0]}]}. t in ms, v the value at t, ease (for the segment that starts at this key): linear (default), ease, ease-in, ease-out, ease-in-out, hold, or [x1,y1,x2,y2]. Paths animate too (same command count in every key). Tokens cannot be animated.
Keep it small: a few layers, round numbers, ≤ 2 s loops, start and end on the same pose for loops. Never use expressions.
Fields
Section titled “Fields”Anything else Lottie can do rides along as raw keys under lottie on the root, a layer, a transform or a shape. The dialect is lossless both ways: exponential motion decompile turns a Lottie into the dialect and exponential motion compile turns it back.
| Where | Fields |
|---|---|
| Root | size [w, h] · duration · fps (60) · start · time (“ms” | “frames”) · layers · assets {id: {layers} | {image, size}} · markers [{name, time, duration}] |
| Every layer | type · id · name · parent · in / out / start · stretch · hidden · autoOrient · blend · transform · matte {source, mode} · masks [{path, mode, inverted, opacity, expansion, feather}] |
| Layer types | shape {shapes} · solid {color, size} · image {asset} · precomp {asset, size, timeRemap} · null · text {text: {text, font, size, color, strokeColor, strokeWidth, align, tracking, lineHeight, box, animators}} |
transform |
anchor · position (or positionX / positionY) · scale % · rotation ° clockwise · opacity 0–100 · skew · skewAxis |
| Geometry | rect {position, size, radius} · ellipse {position, size} · star {points, outerRadius, innerRadius, outerRoundness, innerRoundness, rotation} · polygon · path {d} |
| Styles | fill {color, opacity, rule} · stroke {color, width, cap, join, miterLimit, dash, dashOffset} · gradient-fill / gradient-stroke {kind, start, end, stops, highlight, highlightAngle} |
| Modifiers | trim {start, end, offset, mode} · repeater {copies, offset, composite, transform} · round-corners · pucker-bloat · zig-zag · offset-path · twist · merge {mode} |
| Groups | group {shapes, transform}: a style paints every shape before it in its group |
| Values | a number, an array, a colour, path data, or {keys: [{t, v, ease, end, to, ti}]} |
ease |
linear (default) · ease · ease-in · ease-out · ease-in-out · hold · [x1, y1, x2, y2] |
| Colours | #rgb · #rrggbb · #rrggbbaa · [r, g, b, a] 0–1 · $color.<token> · {light, dark} |