Component basic/052
Component ID: basic/052
A horizontal sliding lower-third with a fixed section label on the left and a headline that slides in from the left. The section label stays fixed while the main text wipes in with a reveal animation. Duration adapts dynamically to text length. Clean and modern look for category tags, tickers, or labeled headlines.
| Section | Lower-third overlays typically positioned at the bottom of the video, for titles, names, or news-style banners |
|---|---|
| Animation | Headline slides in from left with clipPath reveal. Duration is dynamic: 500ms + (20ms per character). |
| Intro duration | 10 s |
Preview
Element schema
Minimal shape of a basic/052 component element:
{
"type": "component",
"component": "basic/052",
"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.
card
Container positioning.
| Property | Type | Default | Description |
|---|---|---|---|
vertical-align | string (enum) | bottom | Vertical position. Values: top, center, bottom |
horizontal-align | string (enum) | — | Horizontal position. Values: left, center, right |
section
Fixed label on the left side (e.g. category, tag).
| Property | Type | Default | Description |
|---|---|---|---|
text | string | — | Section label text (e.g. 'MUSIC', 'NEWS'). |
color | string | — | Text color. |
background-color | string | — | Label background color. |
border-radius | string | — | Corner rounding. |
padding | string | — | Inner padding. |
font-family | string | — | Google Font name. |
font-size | string | — | Font size. |
headline
Main sliding headline text.
| Property | Type | Default | Description |
|---|---|---|---|
text | string | — | Headline text. |
color | string | — | Text color. |
background-color | string | — | Headline background. |
border-radius | string | — | Corner rounding. |
padding | string | — | Inner padding. |
font-family | string | — | Google Font name. |
font-size | string | — | Font size. |