---
title: "MazAnimatedText"
description: "MazAnimatedText is a standalone component that animates text with a sliding blur effect. It can highlight the last word with a gradient background and supports different animation directions (up, down, left, right)."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-animated-text"
---

# MazAnimatedText

> MazAnimatedText is a standalone component that animates text with a sliding blur effect. It can highlight the last word with a gradient background and supports different animation directions (up, down, left, right).

- Package: `maz-ui`
- Import: `import MazAnimatedText from 'maz-ui/components/MazAnimatedText'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-animated-text

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

**Tip:**

This component is SSR friendly: the server renders the same markup as the client, so the text keeps its layout on hydration (no layout shift). The animation is pure CSS and starts on the first paint when the text is in the viewport, without waiting for JavaScript; below the viewport, it plays when the text enters it. With `prefers-reduced-motion: reduce`, the text is displayed without animation.

```vue
<script lang="ts" setup>
import MazAnimatedText from 'maz-ui/components/MazAnimatedText'
</script>

<template>
  <MazAnimatedText tag="h1" text="Hello" last-word="world" :delay="1000" :duration="2000" direction="up" :column-gap="0.5" :row-gap="0.5" />
</template>
```

## MazAnimatedText API

`import MazAnimatedText from 'maz-ui/components/MazAnimatedText'`

### Props

- `text` (`string`, required): The text to animate.
- `last-word` (`string`): The last word(s) to be highlighted.
- `delay` (`number`, default: `0`): The delay of the animation.
- `direction` (`"up" | "down" | "left" | "right"`, default: `"up"`): The direction of the animation.
- `tag` (`string`, default: `"span"`): The tag to use for the text.
- `word-delay` (`number`, default: `75`): The delay between each word.
- `column-gap` (`number`, default: `0.5`): The column gap between each word.
- `row-gap` (`number`, default: `0`): The row gap between each word.
- `duration` (`number`, default: `2000`): The duration of the animation.
- `once` (`boolean`, default: `true`): Play the animation only once.
- `gradient-from` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The gradient from color.
- `gradient-via` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"info"`): The gradient via color.
- `gradient-to` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"secondary"`): The gradient to color.