Component advanced/051

Component ID: advanced/051

Simulates a realistic mouse cursor clicking a button. A cursor pointer moves toward the button, the button depresses on click (scale down), then releases (scale up), and the cursor fades out. Perfect for demonstrating UI interactions, app tutorials, or adding a human-touch click effect to CTAs.

Section	Interactive or data-driven elements: buttons, counters, ratings, images, tables
Animation	1) Cursor moves to button center (1500ms, easeOutCirc). 2) Button scales down to 0.9 (200ms). 3) Button scales back to 1 (100ms). 4) Cursor fades out (200ms).
Intro duration	10 s

Preview

Element schema

Minimal shape of a advanced/051 component element:

{
    "type": "component",
    "component": "advanced/051",
    "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`	string	`white`	Text color.
`font-size`	string	`3vw`	Font size.
`font-family`	string	`Roboto`	Google Font name.
`padding`	string	`1vw 2vw`	Button padding.
`border-radius`	string	`1.5vw`	Corner rounding.
`vertical-align`	string (enum)	`center`	Vertical position. Values: `top`, `center`, `bottom`
`horizontal-align`	string (enum)	`center`	Horizontal position. Values: `left`, `center`, `right`

`cursor`

Mouse cursor appearance.

Property	Type	Default	Description
`width`	string	`8vw`	Cursor size.
`height`	string	`8vw`	Cursor size.