Component textbox/simple

Component ID: textbox/simple

Renders up to 10 independent positioned text boxes, each with its own background, border, rotation, and keyframe animation. Supports auto font-sizing to fit text within the box. Each textbox is a styled container with text content, useful for creating card layouts, callouts, labels, or any positioned text with backgrounds and animations.

Section	Positioned text boxes with backgrounds, borders, and animations
Animation	Each textbox has its own 'animate' block for position, size, rotation keyframes.
Intro duration	0 s

Preview

Element schema

Minimal shape of a textbox/simple component element:

{
    "type": "component",
    "component": "textbox/simple",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`textbox1`

First textbox. Use textbox2-textbox10 for additional textboxes.

Property	Type	Default	Description
`left`	string	—	Left position.
`top`	string	—	Top position.
`width`	string	—	Width.
`height`	string	—	Height.
`text`	string	—	Text content.
`font-size`	string	—	Font size. Use 'auto' for auto-fit.
`max-font-size`	string	—	Max font size for auto-fit.
`min-font-size`	string	—	Min font size for auto-fit.
`color`	string	—	Text color.
`font-family`	string	—	Google Font name.
`text-align`	string	—	Text alignment.
`align-items`	string	—	Vertical alignment (flexbox).
`background`	string	—	Box background color.
`border-radius`	string	—	Corner rounding.
`box-shadow`	string	—	CSS box shadow.
`rotate`	string	—	Rotation (e.g. '-15deg').
`animate`	object	—	Keyframe animation for position, size, rotation.