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>