Text style 011
Style ID: 011
Displays text as a static block with optional background color behind each line. No animation is applied. Unlike style 001, this style wraps each word in its own span element, allowing the background-color setting to highlight individual words/lines rather than the entire text area. Ideal for highlighted/boxed text overlays.
| Animation | None. Text appears immediately as a styled block. |
|---|---|
| Best for | Highlighted text, boxed captions, text with colored background per line, news-style text overlays. |
| Intro duration | 5 s |
Preview
Example
{
"type": "text",
"style": "011",
"text": "The hills are alive with the sound of music",
"settings": {
"font-size": "6vw",
"font-family": "Inter",
"font-weight": "700",
"text-align": "left",
"background-color": "#000000"
},
"width": 450,
"x": 50,
"duration": 5
}Default settings
The settings object of a text element using style: "011" ships with these defaults. Any property you set on the element overrides the default.
| Property | Type | Default | Description |
|---|---|---|---|
vertical-position | string | center | Vertical position of the text block within the element area. |
horizontal-position | string | center | Horizontal position of the text block within the element area. |
font-size | string | 6vw | Font size. Use CSS units: px (e.g. '60px'), vw for responsive (e.g. '5vw'), or em. |
font-family | string | Inter | Google Fonts family name (e.g. 'Inter', 'Roboto', 'Anton', 'Bebas Neue'). Any Google Font is available. |
font-weight | string | 700 | Font weight: '100' to '900', or 'normal', 'bold'. |
text-align | string | left | Horizontal text alignment within the text box. |
color | string | #FFFFFF | Text color. Hex (e.g. '#FFFFFF'), named color (e.g. 'white'), or rgba(). |
background-color | string | #000000 | Background color behind each word/line of text. Especially effective with style 011 (text block). |
Common text style settings
All text styles accept the same CSS-like settings; only the entry animation differs. The properties below are common to every style.
| Property | Type | Default | Description |
|---|---|---|---|
font-size | string | 4vw | Font size. Use CSS units: px (e.g. '60px'), vw for responsive (e.g. '5vw'), or em. |
font-family | string | Inter | Google Fonts family name (e.g. 'Inter', 'Roboto', 'Anton', 'Bebas Neue'). Any Google Font is available. |
font-weight | string | 400 | Font weight: '100' to '900', or 'normal', 'bold'. |
color | string | #FFFFFF | Text color. Hex (e.g. '#FFFFFF'), named color (e.g. 'white'), or rgba(). |
text-align | string (enum) | center | Horizontal text alignment within the text box. Values: left, center, right |
vertical-position | string (enum) | center | Vertical position of the text block within the element area. Values: top, center, bottom |
horizontal-position | string (enum) | center | Horizontal position of the text block within the element area. Values: left, center, right |
text-shadow | string | — | CSS text-shadow for readability over backgrounds (e.g. '2px 2px rgba(33,33,33,0.5)'). |
letter-spacing | string | — | Space between letters (e.g. '0.1em', '2px'). Useful for uppercase or wide-spaced designs. |
line-height | string | — | Line height for multi-line text (e.g. '1.2em', '1.5'). |
margin | string | — | Margin around the text block (e.g. '3vw', '20px'). |
background-color | string | — | Background color behind each word/line of text. Especially effective with style 011 (text block). |