Gradient Text

Overview

GradientText renders text with a continuously animated multi-color gradient. Supports horizontal, vertical, and diagonal directions, yoyo looping, pause-on-hover, and an optional animated gradient border container.

Features

• Multi-color gradient — pass any number of color stops
• Three directions — horizontal, vertical, diagonal
• Animated border — optional gradient border wrapper
• Pause on hover — interactive control

Usage

import GradientText from '@/components/gradient-text'

<GradientText
  colors={['#5227FF', '#FF9FFC', '#B19EEF']}
  animationSpeed={5}
  showBorder
  className="text-4xl font-bold"
>
  Animated Gradient
</GradientText>