Components/Text Animations
Text Outline Glow
An animated text hover effect with glowing outlines and cursor-following reveals.
hoverglowcursorgsap
Preview
Installation
npx shadcn@latest add https://grootstudio.vercel.app/r/text-outline-glow.jsonUsage
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| text | string | undefined | The text to display and animate. | |
| duration | number | 0 | The duration of the cursor-following gradient animation. | |
| fontSize | number | 56 | The font size of the SVG text. | |
| colors | string[] | ["#eab308", "#ef4444", "#3b82f6", "#06b6d4", "#8b5cf6"] | Array of colors for the glowing gradient outline. |
Dependencies
gsap
@gsap/react