Sparkles Text
Twinkling stars orbiting your headline.
- 1.0 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Magic moments
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/sparkles-text.jsonAdds components/velora/sparkles-text.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
countNumber of sparkles | number | 9 |
Also accepts every <span> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- No sparkles render; only the plain text is shown.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Children are read normally; each sparkle SVG is aria-hidden.