Animated Gradient Text
Brand gradient sweeping continuously through text.
- 0.3 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Ship beautiful pages
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-gradient-text.jsonAdds components/velora/animated-gradient-text.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
Also accepts every <span> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The pan animation is off; the text keeps a fixed gradient (the brand-from to brand-via section).
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Children are read as normal text; the gradient is a background-clip effect and adds nothing to the accessible text.