Gradient Text

<script setup lang="ts">
import { GradientText } from '@animate-ui/vue/primitives/texts/gradient'

withDefaults(defineProps<{ neon?: boolean | string }>(), { neon: false })
</script>

<template>
  <GradientText
    class="text-4xl font-semibold"
    text="Gradient Text"
    :neon="neon === true || neon === 'true'"
  />
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

UsageCopy Anchor Link

<script setup lang="ts">
import { GradientText } from '@animate-ui/vue/primitives/texts/gradient';
</script>

<template>
  <GradientText text="Gradient Text" neon />
</template>

AnimationCopy Anchor Link

• The gradient sweeps across the text in a 50s linear loop, driven by one motion value: no Vue render per frame.
• <AnimateUIProvider :tempo> paces the default loop.
• The sweep pauses off screen and in a hidden tab, and resumes where it stopped.
• Under reduced motion, the gradient holds still.
• neon adds a blurred copy of the text as a glow. It is decorative and hidden from screen readers, which read the text once.

API ReferenceCopy Anchor Link

GradientTextCopy Anchor Link