Gradient Text

"use client"

import { GradientText } from "@animate-ui/react/primitives/texts/gradient"

export default function GradientTextDemo({ neon = false }: { neon?: boolean }) {
  return (
    <GradientText
      className="text-4xl font-semibold"
      text="Gradient Text"
      neon={neon}
    />
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import { GradientText } from '@animate-ui/react/primitives/texts/gradient';

export function Title() {
  return <GradientText text="Gradient Text" neon />;
}

AnimationCopy Anchor Link

• The gradient sweeps across the text in a 50s linear loop, driven by one motion value: no React 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