Component basic/051

Component ID: basic/051

A lower-third with a circular image (like a profile photo or logo) on the left and a headline text on the right. The image has an animated rotating circular border. The headline slides in with a wipe effect. Great for speaker identification, social media profiles, or testimonial overlays.

Section	Lower-third overlays typically positioned at the bottom of the video, for titles, names, or news-style banners
Animation	1) Image fades in (1000ms). 2) Headline wipes open left-to-right (800ms). 3) Text slides up (300ms). 4) Circular border rotates 360deg with elastic easing (2500ms).
Intro duration	10 s

Preview

Element schema

Minimal shape of a basic/051 component element:

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

`headline`

Text displayed next to the image.

Property	Type	Default	Description
`text`	string	—	Headline text.
`font-size`	string	`auto`	'auto' to fit, or CSS units.
`font-family`	string	`Inter`	Google Font name.
`font-weight`	string	`700`	Font weight.
`color`	string	—	Text color.
`background`	string	—	Background behind text.
`padding`	string	—	Text padding.
`border-top-right-radius`	string	—	Top-right corner radius of text area.

`image`

Circular image displayed on the left.

Property	Type	Default	Description
`src`	string	—	URL to image (displayed as circle).
`size`	string	`8vw`	Image diameter in vw units (e.g. '8vw').

`bar`

Rotating circular border around the image.

Property	Type	Default	Description
`color`	string	`red`	Border color.