Overview
The AnimatedGradientText component uses CSS background-clip: text combined with framer-motion to continuously pan a gradient background across your text. This creates a mesmerizing, iridescent shimmer effect that is heavily featured on modern SaaS landing pages and AI product announcements.
Usage
import { AnimatedGradientText } from "@/components/creative/animated-gradient-text"
export default function Hero() {
return (
<h1 className="text-6xl font-bold text-white">
The future of {" "}
<AnimatedGradientText
colors={["#ffaa40", "#9c40ff", "#ffaa40"]}
animationSpeed={5}
>
Artificial Intelligence
</AnimatedGradientText>
</h1>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { AnimatedGradientText } from "@/components/creative/animated-gradient-text";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { AnimatedGradientText } from "@/components/creative/animated-gradient-text";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<AnimatedGradientText
text="example"
colors="example"
animationSpeed{10}
>
<div>Content goes here</div>
</AnimatedGradientText>
</div>
);
}