Chapter 135: Text Effects (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for text effects. Each entry is implemented in one or more of vanilla JS, React, and Vue; consult the framework-specific example on motion.dev for the full runnable version.

Key Concepts

• text reveal (js): An example of revealing text on hover using flexbox and Motion's layout animations.
• typewriter (js): An example of a typewriter effect using Motion for JavaScript animation values.
• split text (js, react): Demonstrate how to use the splitText function from Motion+ to create staggered text animations.
• split text scatter (js): Demonstrate how to use the splitText function from Motion+ to create scatter text animations.
• split text wavy (js): Demonstrate how to use the splitText function from Motion+ to create wavy text animations.
• characters remaining (js): An example of creating a character counter with spring animations in Motion

Code Examples

<ul class="list">
    <li class="item">
        <span class="text">
            <span class="number-label">01</span>
            Home
        </span>
        <span class="text" aria-hidden>
            <span class="number-label">01</span>
            Home
        </span>
    </li>
    <li class="item">
        <span class="text">
            <span class="number-label">02</span>
            Photos
        </span>
        <span class="text" aria-hidden>
            <span class="number-label">02</span>
// ...

• What it demonstrates: text reveal pattern.

<div class="container">
    <h2 class="title">
        <span class="text" id="text"></span>
        <div class="cursor"></div>
    </h2>
</div>

<script type="module">
    const text = "Hello world!"
    const textElement = document.getElementById("text")
    const cursor = document.querySelector(".cursor")
</script>

<style>
    /** Copy styles from example source code */
</style>

• What it demonstrates: typewriter pattern.

Key Takeaways

1. These are recipe-level compositions of core Motion primitives (variants, gestures, layout, scroll, springs), not new APIs.
2. Most recipes exist in multiple frameworks with near-identical logic, only the component syntax differs.
3. Reach for the closest-matching recipe as a starting point, then adapt timing/easing/spring values to the design.

Connects To

• Transitions, Keyframes & Variants: recipes here compose those lower-level primitives.
• Gestures & Interaction: several recipes layer on drag/hover/press gestures.