Archived docs Get your API Key
Get started
Tutorials
Guides
Reference
Help for AI agents
🤖 AI Assistant

Text style 005

Style ID: 005

Letters bounce up from below into their final position with a springy elastic effect. Each letter starts off-screen below and jumps up with overshoot and settle. Creates a dynamic, bouncy entrance that works well with bold fonts. The elastic easing makes letters overshoot slightly before settling.

AnimationEach letter translates Y from 1.3em to 0 with easeOutElastic easing (750ms duration, 50ms stagger).
Best forBold headlines, fun/playful content, impact text, youth-oriented videos.
Intro duration5 s

Preview

Example

{
    "type": "text",
    "style": "005",
    "text": "Jumping letters",
    "settings": {
        "font-size": "8vw",
        "font-family": "Anton",
        "color": "#FFFFFF"
    },
    "duration": 5
}

Default settings

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

PropertyTypeDefaultDescription
vertical-alignstringcenter
font-sizestring4vwFont size. Use CSS units: px (e.g. '60px'), vw for responsive (e.g. '5vw'), or em.
font-familystringRobotoGoogle Fonts family name (e.g. 'Inter', 'Roboto', 'Anton', 'Bebas Neue'). Any Google Font is available.
font-weightstring400Font weight: '100' to '900', or 'normal', 'bold'.
text-alignstringcenterHorizontal text alignment within the text box.
text-shadowstring2px 2px rgba(33,33,33,0.5)CSS text-shadow for readability over backgrounds (e.g. '2px 2px rgba(33,33,33,0.5)').
colorstring#FFFFFFText 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.

PropertyTypeDefaultDescription
font-sizestring4vwFont size. Use CSS units: px (e.g. '60px'), vw for responsive (e.g. '5vw'), or em.
font-familystringInterGoogle Fonts family name (e.g. 'Inter', 'Roboto', 'Anton', 'Bebas Neue'). Any Google Font is available.
font-weightstring400Font weight: '100' to '900', or 'normal', 'bold'.
colorstring#FFFFFFText color. Hex (e.g. '#FFFFFF'), named color (e.g. 'white'), or rgba().
text-alignstring (enum)centerHorizontal text alignment within the text box. Values: left, center, right
vertical-positionstring (enum)centerVertical position of the text block within the element area. Values: top, center, bottom
horizontal-positionstring (enum)centerHorizontal position of the text block within the element area. Values: left, center, right
text-shadowstringCSS text-shadow for readability over backgrounds (e.g. '2px 2px rgba(33,33,33,0.5)').
letter-spacingstringSpace between letters (e.g. '0.1em', '2px'). Useful for uppercase or wide-spaced designs.
line-heightstringLine height for multi-line text (e.g. '1.2em', '1.5').
marginstringMargin around the text block (e.g. '3vw', '20px').
background-colorstringBackground color behind each word/line of text. Especially effective with style 011 (text block).