Component advanced/100

Component ID: advanced/100

Displays an image with smart content-aware cropping that automatically detects the focal point (faces, interesting areas), then animates from an initial size/position to a final size/position. Uses AI-powered smartcrop algorithm to find the best crop region. Great for hero images, product showcases, or zoom-to-detail effects.

Section	Interactive or data-driven elements: buttons, counters, ratings, images, tables
Animation	Image smoothly transitions from initial to final position/size. Duration 0-3 seconds, customizable easing.
Intro duration	5 s

Preview

Element schema

Minimal shape of a advanced/100 component element:

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

`image`

Image source and animation.

Property	Type	Default	Description
`src`	string	—	URL to image.
`initial_left`	string	`0%`	Start left position (e.g. '0%').
`initial_top`	string	`0%`	Start top position.
`initial_width`	string	`100%`	Start width.
`initial_height`	string	`100%`	Start height.
`final_left`	string	`50%`	End left position.
`final_top`	string	`0%`	End top position.
`final_width`	string	`50%`	End width.
`final_height`	string	`100%`	End height.
`duration`	number	`1`	Animation duration in seconds (0-3).
`easing`	string	`easeOutCubic`	Anime.js easing function.
`border`	string	—	CSS border (e.g. '2px solid white').
`border-radius`	string	—	Corner rounding.