Generators, shapes & text
Generated from project.v1.schema.json at the documented engine version. The schema checks shape only; the engine’s validation also checks ranges, limits, references and keyframe order.
Dash
A dash pattern.
| Field | Type | Description |
|---|---|---|
offset | Animated_float | How far into the pattern the stroke starts. Default: |
patternrequired | Animated_float[] | Alternating dash and gap lengths, as fractions of the shorter side: one to |
FillRule
Which regions of a path are inside it.
"nonzero"Where the outline winds around a point at all."evenodd"Where it winds around a point an odd number of times.
Generator
The picture of a generated source.
A generated picture has the canvas's size and aspect. Positions are normalized, (0, 0) top-left to (1, 1) bottom-right, and lengths are fractions of the shorter side, so the picture is the same at any render resolution. A fill never changes over time; text changes only through its style's animators; shapes and layouts may change.
One of:
type: "fill"
Paint over the whole picture.
| Field | Type | Description |
|---|---|---|
paintrequired | Paint | What covers the picture. |
type: "shapes"
Shapes drawn from an ordered content tree, as an After Effects or Lottie shape layer draws them. Every value in the tree may be keyframed in picture time.
type: "text"
Text on a transparent picture, laid out and placed by its style as caption cues are, and drawn with the host's registered fonts.
| Field | Type | Description |
|---|---|---|
style | TextStyle | How it looks and where it lies. The font size is at most Default: |
textrequired | TextContent | The text, a string or runs; |
type: "layout"
Boxes laid out by CSS flexbox around their text and shapes, with the engine's fonts. Any value in the tree may be keyframed in picture time. See LayoutNode.
| Field | Type | Description |
|---|---|---|
rootrequired | LayoutNode | The root box: the whole picture. |
GradientStop
One color of a gradient.
| Field | Type | Description |
|---|---|---|
colorrequired | Rgba | Color at that position. |
offsetrequired | number (float) | Position along the gradient, in |
LineCap
How an open stroke ends.
"butt"Flat at the end point."round"A half circle past the end point."square"A half square past the end point.
LineJoin
How stroke segments meet at a vertex.
"miter"Extended edges meeting at a point, up to the miter limit."round"A circular arc."bevel"A straight cut across the corner.
Paint
A color or gradient.
Gradients interpolate premultiplied stops in linear light, so a gradient between two colors passes through their physical mix and a stop fading to transparent does not darken its neighbour. A bare color is read as a solid paint; paints are written back tagged.
One of:
type: "linear_gradient"
Colors along the line from start to end, constant across it.
| Field | Type | Description |
|---|---|---|
endrequired | Vec2 | Where offset 1 lies. Distinct from |
spread | Spread | What lies beyond the first and last offsets. Default: |
startrequired | Vec2 | Where offset 0 lies. |
stopsrequired | GradientStop[] | Two to |
type: "radial_gradient"
Colors along the radius of a circle.
| Field | Type | Description |
|---|---|---|
centerrequired | Vec2 | Where offset 0 lies. |
radiusrequired | number (float) | The distance of offset 1 from the centre, as a fraction of the picture's shorter side. Positive. |
spread | Spread | What lies beyond the first and last offsets. Default: |
stopsrequired | GradientStop[] | Two to |
type: "conic_gradient"
Colors around a point: offsets 0 to 1 are one clockwise turn.
| Field | Type | Description |
|---|---|---|
angle_degrees | number (float) | Where offset 0 lies, in degrees clockwise from straight up. Default: |
centerrequired | Vec2 | The point the gradient turns around. |
stopsrequired | GradientStop[] | Two to |
<a href="/reference/project-schema/animation/#rgba">Rgba</a>
Path
One or more subpaths.
| Field | Type | Description |
|---|---|---|
subpathsrequired | Subpath[] | The subpaths, at most |
PathVertex
A path vertex and its tangents. The segment from a to b is the cubic Bezier through a.point, a.point + a.out_tangent, b.point + b.in_tangent and b.point; zero tangents make it straight.
PolystarKind
What kind of figure a polystar is.
"star"Points joined by inner corners."polygon"Points joined by straight sides.
RangeShape
How selection rises and falls across a Range selector's range.
"square"Fully selected inside the range, partly at fractional ends."ramp_up"Rising from the start to the end."ramp_down"Falling from the start to the end."triangle"Rising to the middle, falling after it."round"A half circle over the range."smooth"The triangle eased by smoothstep.
RangeUnits
What a Range selector's start, end and offset count in.
"percent"Percents of the units."index"Unit indices.
RunState
Which runs a Timing selector selects.
"upcoming"Runs whose time has not started."active"Runs whose time holds the current time."spoken"Runs whose time has ended.
RunTime
A run's time span.
ShapeGeometry
A geometry alone, as a mask's outline is.
One of:
type: "rectangle"
A rectangle, optionally with rounded corners.
| Field | Type | Description |
|---|---|---|
centerrequired | AnimatedPoint | Centre. |
corner_radius | Animated_float | Corner radius, as a fraction of the shorter side. Non-negative; capped at half the rectangle. Default: |
rotation_degrees | Animated_float | Clockwise rotation about the centre, in degrees. Default: |
sizerequired | Animated_Vec2 | Full width and height before rotation: x a fraction of the picture's width, y of its height. Non-negative. |
type: "ellipse"
An ellipse.
| Field | Type | Description |
|---|---|---|
centerrequired | AnimatedPoint | Centre. |
rotation_degrees | Animated_float | Clockwise rotation about the centre, in degrees. Default: |
sizerequired | Animated_Vec2 | Full width and height before rotation: x a fraction of the picture's width, y of its height. Non-negative. |
type: "polystar"
A regular polygon or star.
| Field | Type | Description |
|---|---|---|
centerrequired | AnimatedPoint | Centre. |
inner_radius | Animated_float | A star's distance of its inner corners from the centre. Non-negative. Default: |
inner_roundness | Animated_float | How round a star's inner corners are, in Default: |
kindrequired | PolystarKind | A polygon or a star. |
outer_radiusrequired | Animated_float | Distance of the points from the centre, as a fraction of the shorter side. Non-negative. |
outer_roundness | Animated_float | How round the outer corners are, in Default: |
pointsrequired | Animated_float | Number of points (polygon corners or star tips), from |
rotation_degrees | Animated_float | Clockwise rotation about the centre, in degrees. Default: |
ShapeItem
One entry of a shapes generator's content tree.
A group is read front to back. Geometry accumulates in its group; a fill or stroke paints the geometry listed before it in the same group (nested groups included), and a trim cuts and replaces that geometry. Earlier paints draw on top of later ones, as in After Effects and Lottie.
One of:
type: "group"
Items drawn together through one transform and opacity. Their geometry also counts as the enclosing group's for paints and trims after the group.
| Field | Type | Description |
|---|---|---|
itemsrequired | ShapeItem[] | The group's items, front first. |
transform | ShapeTransform | Where the group lies, and how opaque it is. Default: |
type: "rectangle"
A rectangle, optionally with rounded corners.
| Field | Type | Description |
|---|---|---|
centerrequired | AnimatedPoint | Centre. |
corner_radius | Animated_float | Corner radius, as a fraction of the shorter side. Non-negative; capped at half the rectangle. Default: |
rotation_degrees | Animated_float | Clockwise rotation about the centre, in degrees. Default: |
sizerequired | Animated_Vec2 | Full width and height before rotation: x a fraction of the picture's width, y of its height. Non-negative. |
type: "ellipse"
An ellipse.
| Field | Type | Description |
|---|---|---|
centerrequired | AnimatedPoint | Centre. |
rotation_degrees | Animated_float | Clockwise rotation about the centre, in degrees. Default: |
sizerequired | Animated_Vec2 | Full width and height before rotation: x a fraction of the picture's width, y of its height. Non-negative. |
type: "polystar"
A regular polygon or star.
| Field | Type | Description |
|---|---|---|
centerrequired | AnimatedPoint | Centre. |
inner_radius | Animated_float | A star's distance of its inner corners from the centre. Non-negative. Default: |
inner_roundness | Animated_float | How round a star's inner corners are, in Default: |
kindrequired | PolystarKind | A polygon or a star. |
outer_radiusrequired | Animated_float | Distance of the points from the centre, as a fraction of the shorter side. Non-negative. |
outer_roundness | Animated_float | How round the outer corners are, in Default: |
pointsrequired | Animated_float | Number of points (polygon corners or star tips), from |
rotation_degrees | Animated_float | Clockwise rotation about the centre, in degrees. Default: |
type: "fill"
Paints the inside of the geometry listed before it in its group, as one compound path under rule. Open paths are closed for it.
| Field | Type | Description |
|---|---|---|
opacity | Animated_float | Opacity in Default: |
paintrequired | Animated_Paint | What covers it. |
rule | FillRule | Which regions of the compound path are inside. Default: |
type: "stroke"
Strokes the geometry listed before it in its group.
| Field | Type | Description |
|---|---|---|
cap | LineCap | How open ends look. Default: |
dash | Dash | null | Dashes, or a solid stroke when absent. Default: |
join | LineJoin | How segments meet. Default: |
miter_limit | number (float) | Longest a miter join reaches, as a multiple of half the width, before it is beveled. At least 1. Default: |
opacity | Animated_float | Opacity in Default: |
paintrequired | Animated_Paint | What covers the stroke. |
widthrequired | Animated_float | Full width, as a fraction of the shorter side. Non-negative; zero draws nothing. |
type: "trim"
Keeps part of the geometry listed before it in its group, by length.
| Field | Type | Description |
|---|---|---|
endrequired | Animated_float | Where it ends, in |
mode | TrimMode | Whether the span is of all the geometry together or of each part. Default: |
offset | Animated_float | Turns the span is shifted by; it wraps around a closed path. Default: |
startrequired | Animated_float | Where the kept span starts, as a fraction of the length, in |
ShapeMask
A shape that limits where a clip is visible.
Geometry is in the clip's source space before its transform, so the mask moves with the clip: (0, 0) is the source's top-left, (1, 1) its bottom-right. Distances (feather, corner_radius, polystar radii) are fractions of that space's shorter side.
| Field | Type | Description |
|---|---|---|
feather | Animated_float | Edge softness, non-negative; zero is the outline's antialiased edge. Coverage is blurred by a Gaussian with standard deviation Default: |
fill_rule | FillRule | Which regions of the outline are inside it. Default: |
invert | boolean | Whether the mask keeps the outside of the shape instead of its inside. Default: |
mode | MaskMode | How this mask combines with the ones before it. Default: |
shaperequired | ShapeGeometry | The shape's outline, as a shapes generator's geometry. |
ShapeTransform
A group's placement. In pixel space: translate by position, rotate, scale, then translate by minus anchor, so anchor lands on position. The default is identity.
| Field | Type | Description |
|---|---|---|
anchor | Animated_Vec2 | The point of the items that is placed at Default: |
opacity | Animated_float | Opacity of the group as a whole, in Default: |
position | AnimatedPoint | Where Default: |
rotation_degrees | Animated_float | Clockwise rotation, in degrees. Default: |
scale | Animated_Vec2 | Per-axis scale; 1 leaves the items unscaled. Stroke widths scale with it. Default: |
Spread
What a linear or radial gradient shows outside its first and last stops.
"pad"The end colors continue."repeat"The gradient starts again."reflect"The gradient runs back and forth.
Subpath
A run of vertices joined by cubic Bezier segments.
| Field | Type | Description |
|---|---|---|
closed | boolean | Whether a segment joins the last vertex back to the first. Default: |
verticesrequired | PathVertex[] | The vertices, in order. |
TextAlign
How lines of text align within it.
"start"Left."center"Centred."end"Right.
TextAnimator
One animator: what it selects, and what it does to what it selects.
| Field | Type | Description |
|---|---|---|
properties | TextAnimatorProperties | Applied to each character in proportion to its selection. Default: |
selectorrequired | TextSelector | Gives each character its selection, in |
TextAnimatorProperties
What an animator does to each character, in proportion to its selection. A property left out does nothing.
| Field | Type | Description |
|---|---|---|
fill | Animated_Rgba | null | The fill color a fully selected character takes; a gradient fill is mixed toward it. |
offset | Animated_Vec2 | null | Moves the character, in font sizes, +y down. |
opacity | Animated_float | null | The opacity a fully selected character takes, in |
rotation_degrees | Animated_float | null | Turns the character about its centre, clockwise degrees. |
scale | Animated_Vec2 | null | Scales the character about its centre; 1 is none. Each axis in |
stroke | Animated_Rgba | null | The color every stroke of a fully selected character takes. |
tracking | Animated_float | null | Space added after the character, in font sizes, in |
TextBackground
A box behind each line of text.
| Field | Type | Description |
|---|---|---|
colorrequired | Rgba | Box color. |
padding | number (float) | Space between the text and the box edge, as a fraction of the font size, in Default: |
TextContent
A text: one string, or runs whose texts joined are the text.
Written as "Hello" or [{ "text": "Hel" }, { "text": "lo", "class": ["key"] }].
One of:
string
One string; \n starts a line.
<a href="#textrun">TextRun</a>[]
Runs in order; their texts joined are the text.
TextRun
A piece of a text that animators' Class and Timing selectors can pick.
| Field | Type | Description |
|---|---|---|
class | string[] | Names Class selectors match, each 1 to 64 bytes of |
textrequired | string | Non-empty; |
time | RunTime | null | When the run is said, from the holder's start (a caption cue's start, or a text generator's picture time zero). |
TextSelector
How an animator selects characters.
One of:
type: "range"
A range over the text's units, shaped at its ends, like After Effects' range selector.
| Field | Type | Description |
|---|---|---|
amount | Animated_float | The selection's scale, in Default: |
based_on | TextUnit | What the range counts: characters (the default), non-space characters, words, or lines. Default: |
end | Animated_float | Where it ends, in the same range. Default 100. Default: |
offset | Animated_float | Added to start and end, in the same range. Default 0. Default: |
shape | RangeShape | How selection rises and falls across the range. Default: |
start | Animated_float | Where the range starts: Default: |
units | RangeUnits | Whether start, end and offset are percents of the units (the default) or unit indices. Default: |
type: "timing"
Characters of timed runs, by the run's time against the current time.
| Field | Type | Description |
|---|---|---|
ramp | MediaTime | How long the state takes to fade in and out; zero switches. Default: |
staterequired | RunState | Which runs it selects: those not yet said, being said, or said. |
sweep | boolean | Splits each run's span over its characters in order, sweeping the run character by character. Default: |
type: "class"
Characters of runs that carry a class.
| Field | Type | Description |
|---|---|---|
classrequired | string | The class name. |
TextShadow
A shadow of a text's glyphs and strokes, behind them.
| Field | Type | Description |
|---|---|---|
blur | number (float) | Blur radius in font sizes, as CSS Default: |
colorrequired | Rgba | Shadow color. |
offset | Vec2 | Offset in font sizes, +x right, +y down; each component in Default: |
TextStroke
A band around the glyphs and the strokes listed before it, drawn behind them.
| Field | Type | Description |
|---|---|---|
colorrequired | Rgba | Band color. |
widthrequired | number (float) | Band width as a fraction of the font size, positive; a text's strokes sum to at most |
TextStyle
How text looks and where it lies, for caption cues or a text Generator.
The font size is a fraction of the canvas's shorter side, the wrapping width a fraction of the canvas width, and strokes, shadows and padding fractions of the font size. The engine draws with its host's registered fonts, font_family first, then the rest in fallback order.
Painting is bottom to top as in CSS: background boxes, shadows (last listed lowest), strokes (outermost lowest), fill, then color glyphs.
| Field | Type | Description |
|---|---|---|
align | TextAlign | How lines align within the text. Default: |
anchor | Vec2 | The point of the text, background included, placed at Default: |
animators | TextAnimator[] | Per-character motion and color, applied in order, at most |
background | TextBackground | null | A box behind each line. Default: |
fill | Paint | What paints the glyphs; a color reads as a solid paint. Gradient positions are in the text's layout box, Default: |
font_family | string | null | The family, as the font's name table gives it (typographic family, else family), matched ASCII case-insensitively. Missing glyphs and unknown families fall back to the other fonts in order; |
font_size | number (float) | Font size as a fraction of the canvas's shorter side: positive, at most Default: |
font_weight | integer (uint16) | The weight in Default: |
letter_spacing | number (float) | Space after each character, as a fraction of the font size, in Default: |
line_height | number (float) | Baseline-to-baseline distance in font sizes, in Default: |
max_width | number (float) | Width text wraps at, as a fraction of the canvas width, in Default: |
position | Vec2 | Where on the canvas the text's anchor lies, Default: |
shadows | TextShadow[] | Shadows of the glyphs and strokes, the first on top, as CSS |
strokes | TextStroke[] | Bands around the glyphs, innermost first, each outside the one before. At most |
TextStylePatch
Changes to a TextStyle. Each field set replaces the base's whole value (lists are not merged); a field left out keeps the base's.
| Field | Type | Description |
|---|---|---|
align | TextAlign | null | See |
anchor | Vec2 | null | See |
animators | array | null | See |
background | TextBackground | null | The box behind each line; |
fill | Paint | null | See |
font_family | string | null | The family; |
font_size | number | null | See |
font_weight | integer | null | See |
letter_spacing | number | null | See |
line_height | number | null | See |
max_width | number | null | See |
position | Vec2 | null | See |
shadows | array | null | See |
strokes | array | null | See |
TextUnit
The units a Range selector counts.
"characters"Grapheme clusters, spaces included."characters_excluding_spaces"Grapheme clusters that are not white space."words"UAX #29 words that hold a letter or digit; a CJK ideograph is a word."lines"Laid-out lines.
TrimMode
What a trim measures.
"together"One span over the length of every subpath end to end, in order."individually"A span of each subpath alone.