Text style 006

Style ID: 006

Letters slide in from the right side while fading in, creating a smooth reveal effect. Each letter moves horizontally from an offset position to its final place. The exponential easing creates a fast start that decelerates smoothly. Works especially well with wider letter-spacing.

Animation	Each letter translates X from 40px to 0 with fade-in, easeOutExpo easing (1200ms, 30ms stagger, 500ms initial delay).
Best for	Elegant reveals, wide-spaced uppercase text, luxury/premium branding, cinematic titles.
Intro duration	5 s

Preview

Example

{
    "type": "text",
    "style": "006",
    "text": "Reveal letters",
    "settings": {
        "font-size": "4vw",
        "font-family": "PT Sans",
        "letter-spacing": "0.5em",
        "color": "#FFFFFF"
    },
    "duration": 5
}

Default settings

The settings object of a text element using style: "006" ships with these defaults. Any property you set on the element overrides the default.

Property	Type	Default	Description
`vertical-align`	string	`center`
`font-size`	string	`4vw`	Font size. Use CSS units: px (e.g. '60px'), vw for responsive (e.g. '5vw'), or em.
`font-family`	string	`Anton`	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'.
`letter-spacing`	string	`0.5em`	Space between letters (e.g. '0.1em', '2px'). Useful for uppercase or wide-spaced designs.
`text-align`	string	`center`	Horizontal text alignment within the text box.
`text-shadow`	string	`2px 2px rgba(33,33,33,0.5)`	CSS text-shadow for readability over backgrounds (e.g. '2px 2px rgba(33,33,33,0.5)').
`color`	string	`#FFFFFF`	Text color. Hex (e.g. '#FFFFFF'), named color (e.g. 'white'), or rgba().

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).