When the motion starts. Before it, the layer holds the preset's first value.
duration
number
0.6
Seconds the preset takes.
amount
number
Per preset
Strength: px for slides, float and blur; a factor for scale and pulse; degrees for spin.
easing
easing
Per preset
A name (linear, ease, ease_in, ease_out, ease_in_out, ease_out_quart, ease_out_expo, ease_in_cubic, ease_in_out_cubic, ease_in_back, ease_out_cubic, ease_out_back) or bezier [x1, y1, x2, y2].
tracks
Record<string, keyframe[]>
—
Keyframes per property, replacing that property's keyframes. Each keyframe: t (required), value, easing, hold, spring (bounce, floor); fill_color and stroke_color take color.
text_reveal, text_exit
object
—
Text layers: words or letters in or out one after another: unit (word, letter, sentence), style (fade, slide_up, slide_down, slide_left, slide_right, pop, typewriter, scramble), stagger, duration, distance, easing.
stagger
object
—
Apply the motion to the layer's children one after another: each (required, seconds), from (first, last, center, point), point.
shapes
string[][]
—
Vector layers: outlines to morph between with a shape track.
path, auto_orient
string, boolean
—
Move along an SVG path over duration; turn to face along it.
physics
object
—
Drop or throw in under gravity: from ([0, -600]), gravity (3000), bounce (0.45), throw, from_rotation, start.
follow
object
—
Trail a moving parent on a spring: stiffness (180), damping (0.4), sway.
stretch
object
—
Squash and stretch with speed: amount (0.2), max (0.4).
wiggle
object
—
Smooth random jitter: amount (10), frequency (2), rotation, scale, ramp, seed.
motion_blur
object
—
Smear along the movement: shutter (1/60), samples (16).
clock
object
—
The layer's own clock for it and its children: start, from, speed, repeat, hold_at.
counter_format
object
—
Text with a counter track: decimals, grouping, separator, decimal_point, step.
A phrase laid out word by word by the real text engine, with motion that gives every word its own path. Seeded, so it varies per phrase but repeats exactly.
Parameter
Type
Required
Default
Description
page_id, intent
string
Yes
—
The page, and what and why.
text
string
Yes
—
The phrase.
x, y, width
number
Yes
—
Where the block sits in its parent and how wide it may be.
font_size
number
Yes
—
px.
font_family, font_style
string
No
—
The font.
color
string
No
"#111111"
Text colour.
align
string
No
"left"
Line alignment.
line_height
number | string
No
1.15
A multiple of the size, px when above 4, or a percentage like "108%".
motion
string
No
—
fly, drop, scatter, pop, wave, glitch or zoom.
start, duration, stagger
number
No
0, 0.7, 0.08
When it starts, seconds per word, seconds between words.
exit_at
number
No
—
Words fly back out in reverse at this second.
emphasis
object[]
No
—
Per word, by index or word: color, font_family, font_style, scale, rotation, highlight (a pill colour), strike_at.
Films the page's layers with a camera. The layers move into a page-sized Camera frame at the back; kinetic type and transitions stay on screen above the shot. Calling it again replaces the move.
Parameter
Type
Required
Default
Description
page_id, intent
string
Yes
—
The page, and what and why.
stops
object[]
Yes
—
Where the camera is over time: t (required), zoom (1 is the whole design), focus ([x, y] at the centre of the shot), rotation, tilt_x, tilt_y, easing (ease_in_out), spring.
Rows of UI with text and an optional value on the right. Rows spring in one after another and a highlight slides between rows at the select times; pair it with make_cursor clicks.
Parameter
Type
Required
Default
Description
page_id, intent
string
Yes
—
The page, and what and why.
items
{text, value?}[]
Yes
—
The rows; value is shown on the right ("312", "+4%").
x, y, width
number
Yes
—
Top-left of the list and its width.
select
{index, t}[]
No
—
The highlight's path: the row and when it arrives.
numbered
boolean
No
false
Number each row, for ranked lists.
static
boolean
No
false
A still list or table built as layout flows, with no motion or highlight.
row_height, gap
number
No
64, 10
Row height and the gap between rows, px.
start, stagger
number
No
0, 0.07
When rows start arriving, and the seconds between them.
fill, color
string
No
White, near-black
Row fill and text colour.
accent, accent_text
string
No
—
Highlight fill and the text colour on it.
divider
string
No
—
Static lists: a hairline under each row in this colour.
Cards on a track that step to the next card every step seconds, neighbours swung back in 3D. An animation inside one design; an Instagram carousel is one page per slide instead.
Parameter
Type
Required
Default
Description
page_id, intent
string
Yes
—
The page, and what and why.
items
{image?, title?, subtitle?}[]
Yes
—
The cards; image is an https URL.
center_x, y
number
Yes
—
Centre of the focused card, and the top of the cards.
card_width, card_height
number
No
720, 940
Card size.
radius
number
No
6% of the width
Card corner radius.
start, step, move_duration
number
No
0, 0.5, 0.35
When the first card is centred, seconds per card, seconds per move.
tilt
number
No
58
Degrees the neighbours swing back.
side_scale, side_shade
number
No
1, 0.12
Neighbours' size and how much they fade.
gap
number
No
−2% of the width
Space between a neighbour and the centre card.
enter
boolean
No
true
Slide the carousel up into place just before start.
The second a still image of the page shows, where all its content is in place. Image batches use it unless the batch gives its own. A negative value clears it.
Camera moves and morphs between layers, in their stored format.
Parameter
Type
Required
Default
Description
page_id, intent
string
Yes
—
The page, and what and why.
choreography
object
Yes
—
The stored format (read the current value with get_design and timeline); {} clears it. A flow alone (slides in order joined by transitions, under stage and steps) is compiled into the camera and morphs it plays. Validated before saving; the timeline grows to fit.
Frames evenly spaced from start to end, at most 32.
times
number[]
No
—
1 to 32 exact seconds, in place of frames.
start, end
number
No
0, the end
The range.
columns
integer
No
4
Frames per row, at most 8.
cell_width
integer
No
320
Width of each frame, at most 320 px.
Returns: One PNG of the frames, left to right and top to bottom, and the times shown. For one moment at full preview size, use render_design with time.
