Component shape/html

Component ID: shape/html

Renders up to 10 positioned boxes containing arbitrary HTML or SVG content, each with independent keyframe animation. Use for custom vector graphics, SVG icons, inline HTML elements, or any content that needs precise positioning and animation. Each HTML box supports font styling and flexbox alignment.

Section	Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG
Animation	Each HTML box has its own 'animate' block for position, size, rotation, and opacity keyframes.
Intro duration	0 s

Preview

Element schema

Minimal shape of a shape/html component element:

{
    "type": "component",
    "component": "shape/html",
    "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.

`html1`

First HTML box. Use html2-html10 for additional boxes.

Property	Type	Default	Description
`left`	string	—	Left position.
`top`	string	—	Top position.
`width`	string	—	Width.
`height`	string	—	Height.
`html`	string	—	HTML or SVG content string.
`font-size`	string	—	Font size.
`color`	string	—	Text color.
`text-align`	string	—	Text alignment.
`align-items`	string	—	Flexbox vertical alignment.
`font-family`	string	—	Google Font name.
`animate`	object	—	Keyframe animation for position, size, rotation.