Component basic/100

Component ID: basic/100

A generic animated box that morphs from one position/size to another. Specify initial and final coordinates (left, top, width, height) and the box smoothly animates between them. Useful for highlight effects, focus indicators, animated backgrounds, or any scenario needing a moving/resizing rectangle with custom easing.

Section	Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG
Animation	Box animates top, left, width, height from initial to final values. Duration 0-3000ms, customizable easing.
Intro duration	5 s

Preview

Element schema

Minimal shape of a basic/100 component element:

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

`box`

The animated box element with initial and final states.

Property	Type	Default	Description
`initial_left`	string	—	Start left position (e.g. '10%').
`initial_top`	string	—	Start top position.
`initial_width`	string	—	Start width.
`initial_height`	string	—	Start height.
`final_left`	string	—	End left position.
`final_top`	string	—	End top position.
`final_width`	string	—	End width.
`final_height`	string	—	End height.
`duration`	number	`2000`	Animation duration in ms (0-3000).
`easing`	string	`easeOutCubic`	Anime.js easing function.
`background`	string	—	Box background (color, gradient, image).
`box-shadow`	string	—	CSS box shadow.