Sparkles Text
Twinkling sparkles continuously generated around the text, adding a lively touch of magic.
Four-pointed sparkles are randomly spawned and recycled above the text, forming a constantly twinkling layer of light — well suited to headings and brand wordmarks.
Loading preview…
npx shadcn@latest add https://webberui.com/r/sparkles-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
10
550
<SparklesText />
Installation
npx shadcn@latest add https://webberui.com/r/sparkles-text.jsonOr, once registries are configured in components.json, install it as @webberui/sparkles-text.
Usage
import { SparklesText } from "@/components/ui/sparkles-text";
<SparklesText text="WebberUI" className="text-5xl font-bold" />Custom colors and density:
<SparklesText
text="Sparkles Text"
colors={{ first: "#fbbf24", second: "#f472b6" }}
sparklesCount={14}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to decorate |
colors | { first: string; second: string } | { first: "#a78bfa", second: "#38bdf8" } | Two-color scheme, alternated at random |
sparklesCount | number | 10 | How many sparkles exist at once |
interval | number | 550 | How often each sparkle respawns (milliseconds); smaller is livelier |
className | string | — | forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, static text is rendered and no sparkles are generated at all
- The outer element carries an
aria-labeland the sparkle layer is hidden from assistive technology (aria-hidden), so only the text itself is announced - Sparkles are only generated after mount, avoiding SSR hydration mismatches