Sparkles
Decorative sparkle particle animation.
When to Use
- Add playful visual flair to headings, badges, or call-to-action text.
- Highlight a "new" or "featured" label with animated sparkle particles.
- Use
Count,MinSize, andMaxSizeto control particle density and scale.
New Feature
Pro
Primary
Amber
Violet
Magical Heading
API Reference
Sparkles
| Property | Type | Default | Description |
|---|---|---|---|
| Count | int | 5 | Number of sparkle particles to render. |
| MinSize | int | 6 | Minimum sparkle size in pixels. |
| MaxSize | int | 14 | Maximum sparkle size in pixels. |
| Color | string | "var(--color-primary)" | CSS color for all sparkle particles. Accepts any valid CSS color value. |
| ChildContent | RenderFragment? | null | The content to wrap with sparkle particles. Rendered above the particles via z-index. |
| Class | string? | null | Additional CSS classes. Pass absolute, fixed, or sticky to override the default position: relative. |
Related Components
- ShimmerButton — Button with animated shimmer border beam.
- BorderBeam — Animated gradient border beam for hero elements.
- BlurFade — Blur and fade-in motion primitive on mount.