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

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

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

Props

Name	Description	Type	Required	Default	Possible values
text	The text to animate Example: "Hello"	string	Yes	undefined	-
last-word	The last word(s) to be highlighted Example: "world"	string	No	undefined	-
delay	The delay of the animation	number	No	0	-
direction	The direction of the animation	"up" | "down" | "left" | "right"	No	up	up", "down", "left", "right
tag	The tag to use for the text	string	No	span	-
word-delay	The delay between each word	number	No	75	-
column-gap	The column gap between each word	number	No	0.5	-
row-gap	The row gap between each word	number	No	0	-
duration	The duration of the animation	number	No	2000	-
once	Play the animation only once	boolean	No	true	-