> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framelane.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Word Animation Examples

> Request bodies for word-level animations.

Word animations require a `word_animation` object (with `style` and `words[]`) on a text element. Only fields that differ from their defaults are shown.

<Warning>
  `duration` is **required** on text elements. `word_animation.words` must be non-empty — the API returns `422` if the array is missing or empty.
</Warning>

Set `time`, `duration`, `x`, and `y` on the text element to control when and where the text appears. Word timestamps in `words[]` are **absolute timeline seconds** — if your text element starts at `time: 5`, the first word's `start` should also be around `5`, not `0`.

## Box highlight (CapCut style)

White text, colored box behind the active word only. No permanent background. This is the combination for CapCut / TikTok-style animated captions.

`background_color` is read by the box highlight renderer as the box color. Leave `background` unset (or `false`) so no permanent background box is drawn behind the full text.

```json theme={null}
{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "captions1",
      "text": "What are we all thinking",
      "font_family": "Arimo",
      "font_size": 72,
      "font_style": "bold",
      "text_color": "#ffffff",
      "background_color": "#8B2FC9",
      "time": 0,
      "duration": 6,
      "x": "50%",
      "y": "75%",
      "width": "80%",
      "z_index": 1,
      "word_animation": {
        "style": "box",
        "words": [
          { "text": "What",    "start": 0.0, "end": 0.3 },
          { "text": "are",     "start": 0.3, "end": 0.5 },
          { "text": "we",      "start": 0.5, "end": 0.7 },
          { "text": "all",     "start": 0.7, "end": 0.9 },
          { "text": "thinking","start": 0.9, "end": 1.5 }
        ]
      }
    }
  ]
}
```

## Glow highlight

Active word glows at full opacity; unspoken words appear dimmed.

```json theme={null}
{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "captions1",
      "text": "Hello world today",
      "font_size": 48,
      "font_style": "bold",
      "text_color": "#ffffff",
      "time": 0,
      "duration": 6,
      "x": "50%",
      "y": "85%",
      "width": "80%",
      "z_index": 1,
      "word_animation": {
        "style": "glow",
        "words": [
          { "text": "Hello", "start": 0.0, "end": 0.8 },
          { "text": "world", "start": 0.8, "end": 1.6 },
          { "text": "today", "start": 1.6, "end": 2.4 }
        ]
      }
    }
  ]
}
```

## Scale pop

Each word scales in hard on its timestamp. Good for high-energy music or hype content.

```json theme={null}
{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "captions1",
      "text": "Big news today",
      "font_size": 56,
      "font_style": "bold",
      "text_color": "#ffffff",
      "time": 1,
      "duration": 4,
      "x": "50%",
      "y": "45%",
      "width": "70%",
      "z_index": 1,
      "word_animation": {
        "style": "scale_pop",
        "words": [
          { "text": "Big",   "start": 1.0, "end": 1.5 },
          { "text": "news",  "start": 1.5, "end": 2.0 },
          { "text": "today", "start": 2.0, "end": 2.8 }
        ]
      }
    }
  ]
}
```

## All word animation styles

| Value       | Description                                                                |
| ----------- | -------------------------------------------------------------------------- |
| `glow`      | Active word at full opacity; others dimmed                                 |
| `box`       | Colored box behind active word — set `background_color` for the box color  |
| `scale_pop` | Active word scales in on its timestamp                                     |
| `slide_up`  | Words slide up from below as they are spoken                               |
| `fly_in`    | Words fly in from above                                                    |
| `color`     | Active word changes color — set `background_color` for the highlight color |