Animated Gradient Text

A vibrant background gradient animation that flows smoothly through the text path.

Preview

✨ Introducing Vibe UI Gradient

Installation

pnpm dlx vibe-ui-kit@latest add animated-gradient-text

Global Configuration (CSS Styles)

Ensure the following CSS keyframes and animations are configured in your global theme file:

@theme {
  --animate-gradient: gradient 8s linear infinite;

  @keyframes gradient {
    to {
      background-position: var(--bg-size, 300%) 0;
    }
  }
}

Usage

import { AnimatedGradientText } from "@/components/ui/animated-gradient-text"

<AnimatedGradientText speed={1.5} colorFrom="#3b82f6" colorTo="#10b981">
  Flowing Gradient Text
</AnimatedGradientText>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`""`	Text content to apply flowing gradient fills
`speed`	`number`	`1`	Speed factor multiplier of gradient cycle shifts
`colorFrom`	`string`	`"#ffaa40"`	Initial hex value representing start of linear gradient
`colorTo`	`string`	`"#9c40ff"`	Secondary hex value representing middle of linear gradient
`className`	`string?`	`""`	Additional classes for the container

This AnimatedGradientText component creates a flowing gradient visual effect mapped to typography.

Contributors

Jenish Sabhadiya