Components/Text Animations

Gradient Background Text

Text component featuring an animated background orb field and engraved depth effect.

textgradient3d

Preview

Installation

npx shadcn@latest add @grootstudio/gradient-background-text

Usage

1

Import the component

2

Use like this

Props

PropTypeDefaultRequiredDescription
children
ReactNode
-Inner text content
colors
string
#cc0066|#1aff53|#004d99|#f5f56b|#a600e6
Gradient colors for background animation
className
string
-Styling classes

Dependencies

motion/react