Components
Gradient Text
A text component that applies an animated gradient effect to text and optionally adds a gradient border. It features smooth color transitions, customizable animation speeds, and an optional animated border.
Features: • Smooth gradient animations • Customizable color stops • Adjustable animation speed • Optional animated border • Responsive design • TypeScript support • Dark mode compatibility • Accessible text rendering • Custom cursor interactions • Flexible styling options
import { GradientText } from "@/components/ui/gradient-text"
export function GradientTextBorderDemo() {
return (
<div className="space-y-8">
{/* Basic example */}
<GradientText
colors={["#40ffaa", "#4079ff", "#40ffaa"]}
animationSpeed={3}
className="text-3xl font-semibold"
>
Custom Colors
</GradientText>
</div>
)
}
export function GradientTextDemo() {
return (
<div className="space-y-8">
{/* With border */}
<GradientText
colors={["#ff40aa", "#40aaff", "#ff40aa"]}
showBorder
className="text-2xl font-medium px-4 py-2"
>
With Animated Border
</GradientText>
</div>
)
}