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

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

TIP

This component is SSR friendly. It will display the brut text on the server side with the chosen tag, and the animated text on the client side.

Hello world

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

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

Component informations

Props

Prop name	Description	Type	Values	Default
text	The text to animate @example "Hello"	string	-
lastWord	The last word(s) to be highlighted @example "world"	string	-
delay	The delay of the animation @default 0	number	-
direction	The direction of the animation @default "up" @values "up", "down", "left", "right"	union	-
tag	The tag to use for the text @default "span"	string	-
wordDelay	The delay between each word @default 75	number	-
columnGap	The column gap between each word @default 0.5	number	-
rowGap	The row gap between each word @default 0	number	-
duration	The duration of the animation @default 2000	number	-
once	Play the animation only once @default true	boolean	-