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 @grootstudio/text-outline-glowUsage
1
Import the component
2
Use like this
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 | colorArray[]|string | #eab308|#ef4444|#3b82f6|#06b6d4|#8b5cf6 | Array of colors for the glowing gradient outline. |
Dependencies
gsap
@gsap/react