Component advanced/050

Component ID: advanced/050

An animated button that appears with an elastic expand effect. The button starts as a small circle and expands to full size with a bouncy elastic animation, then the text letters slide up from below. Use for CTAs, promotional buttons, or interactive-looking elements in videos.

Section	Interactive or data-driven elements: buttons, counters, ratings, images, tables
Animation	1) Button appears and grows from circle (200ms). 2) Button expands with elastic bounce (1000ms). 3) Text letters slide up with reverse stagger (1000ms, easeInOutElastic).
Intro duration	10 s

Preview

Element schema

Minimal shape of a advanced/050 component element:

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

`button`

Button styling and text.

Property	Type	Default	Description
`text`	string	—	Button label text.
`background`	string	—	Button background color or gradient.
`color`	string	`white`	Text color.
`font-size`	string	`3vw`	Font size.
`font-family`	string	`Roboto`	Google Font name.
`padding`	string	—	Button padding (e.g. '1vw 2vw').
`border-radius`	string	—	Corner rounding (e.g. '1.5vw' for rounded, '50%' for pill).
`box-shadow`	string	—	CSS box shadow.
`vertical-align`	string (enum)	`center`	Vertical position. Values: `top`, `center`, `bottom`
`horizontal-align`	string (enum)	`center`	Horizontal position. Values: `left`, `center`, `right`
`text-align`	string	`center`	Text alignment.