Gradient Text
Animated gradient text with flowing motion and semantic color stops. Uses Framer Motion for a smooth, continuous sweep.
Primary Flow
Accent Energy
Spotlight Shine
Muted Glow
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/gradient-text.tsx
Installation
Using shadcn CLI
npx shadcn add gradient-text --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motionRelated Text Effects Components
Animated Text Reveal
Reveal text by letter or word as it enters the viewport.
Morph Text
Morphs between words with a smooth blur and slide transition.
Scramble Text
Scrambles characters before resolving into a crisp headline, perfect for dramatic reveals.
Scroll Reveal Text
Reveals words or characters as you scroll, creating a story-like reading flow.
Text Highlight On Scroll
Highlights words in sequence as the user scrolls.
Typewriter Text
Animates text typing character by character with configurable speed, delay, and an optional blinking cursor.