Components/Text Animations
Gradient Text
High-impact text component with moving color orbs and 3D depth.
textgradientmotion
Preview
Installation
npx shadcn@latest add @grootstudio/gradient-text-fillUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | Text or elements to animate | |
| colors | string | #cc0066|#1aff53|#004d99|#f5f56b|#a600e6 | Comma-separated hex colors for the orbs | |
| as | ElementType | span | The HTML tag to render as | |
| className | string | - | Typography and positioning classes |
Dependencies
motion/react