Component shape/rectangle

Component ID: shape/rectangle

A highly versatile component that renders up to 10 independent rectangles, each with its own position, size, styling, and keyframe animation. This is the building block for many visual effects: simple shapes, colored backgrounds, gradient backgrounds, image displays, moving elements, wipe transitions, vignette effects, and more. Each rectangle supports CSS background (solid colors, gradients, images), borders, border-radius (use 50% for circles), box-shadow, and keyframe animations for position, size, rotation, and more.

Section	Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG
Animation	Each rectangle has its own 'animate' block with keyframe targets, duration, easing, and delay. Rectangles without animate blocks are static.
Intro duration	0 s

Preview

Element schema

Minimal shape of a shape/rectangle component element:

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

`rectangle1`

First rectangle (required). Use rectangle2-rectangle10 for additional rectangles with the same property structure.

Property	Type	Default	Description
`left`	string	—	Left position (e.g. '20%', '10vw').
`top`	string	—	Top position.
`width`	string	—	Width (e.g. '60%', '40vw').
`height`	string	—	Height.
`background`	string	—	CSS background: color, gradient (e.g. 'radial-gradient(...)'), or empty.
`background-color`	string	—	Background color.
`background-image`	string	—	Background image URL (use with background-size and background-position).
`background-size`	string	—	Background size (e.g. 'cover', 'contain').
`background-position`	string	—	Background position (e.g. 'center').
`border-radius`	string	—	Corner rounding. Use '50%' for circle.
`border-color`	string	—	Border color.
`border-style`	string	—	Border style (solid, dashed, etc.).
`border-width`	string	—	Border width.
`outline-style`	string	—	Outline style.
`outline-color`	string	—	Outline color.
`outline-width`	string	—	Outline width.
`box-shadow`	string	—	CSS box shadow.
`rotate`	string	—	CSS rotation (e.g. '30deg').
`transform`	string	—	CSS transform.
`opacity`	string	—	Opacity (0-1).
`animate`	object	—	Keyframe animation. Set target CSS values that the rectangle animates TO from its initial state. Properties: any CSS property as target + 'duration' (ms), 'easing' (anime.js), 'delay' (ms).