Text element
Draws styled text on the canvas. Fonts come from the bundled Google Fonts set; every visual field (position, size, animation) applies.
Draws styled text on the canvas. Fonts come from the bundled Google Fonts set; every visual field (position, size, animation) applies.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id * | string (non-empty) | — | Stable identifier, unique across the whole movie. Used by editor selection sync and error paths. |
start | number (≥ 0) | 0 | When the element appears, in seconds relative to its scene (or to the movie for movie-level elements). |
duration | number (> 0) | — | How long the element is active, in seconds. Defaults to the remainder of its scene. |
position | object | "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. |
width | number (> 0) | — | Element box width in output pixels. Defaults to an element-specific intrinsic size. |
height | number (> 0) | — | Element box height in output pixels. Defaults to an element-specific intrinsic size. |
opacity | number (0–1) | 1 | Element opacity from 0 (invisible) to 1 (fully opaque). |
rotation | number | 0 | Rotation around the element's center, in degrees (clockwise). |
animation | object | — | Entrance animation applied when the element appears. |
type * | "text" | — | A styled text overlay. |
text * | string (non-empty) | — | The text to display. May contain {{variable}} placeholders. |
font | "Inter" | "Roboto" | "Open Sans" | "Montserrat" | "Poppins" | "Lato" | "Oswald" | "Raleway" | "Nunito" | "Work Sans" | "DM Sans" | "Space Grotesk" | "Source Sans 3" | "Merriweather" | "Playfair Display" | "Lora" | "Bebas Neue" | "Anton" | "Pacifico" | "Caveat" | "Inter" | Font family from the curated Google Fonts set bundled with the renderer. |
fontSize | number (> 0) | 64 | Font size in output pixels. |
fontWeight | integer (100–900, multiple of 100) | 400 | Font weight from 100 (thin) to 900 (black), in steps of 100. |
color | string (non-empty) | "#ffffff" | Text color as a CSS color value, e.g. "#ffffff". May contain {{variable}} placeholders. |
background | string (non-empty) | — | Background color drawn behind the text block. Omit for no background. |
align | "left" | "center" | "right" | "center" | Horizontal text alignment within the text box. |
padding | number (≥ 0) | 0 | Padding around the text in output pixels (visible with a background color). |
lineHeight | number (> 0) | 1.2 | Line height as a multiplier of the font size. |
position object
Absolute pixel position of the element's center.
| Property | Type | Default | Description |
|---|---|---|---|
x * | number | — | Horizontal position of the element's center, in output pixels from the left edge. |
y * | number | — | Vertical position of the element's center, in output pixels from the top edge. |
animation object
Entrance animation applied when the element appears.
| Property | Type | Default | Description |
|---|---|---|---|
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. |
duration | number (> 0) | 0.5 | Animation duration in seconds. |
Example
Text: styled, positioned and animated: