Sparkles
Decorative sparkle particle animation.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Sparkles />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
10 tests across 1 file. Auto-generated from the test suite.
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
Drag the slider to adjust the number of sparkle particles.
Count = 5
5 sparkles!
API Reference
Sparkles
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | Content wrapped by the sparkle field, rendered on top (z-10) so the animated sparkles sit behind it. |
| Count | int | 5 | Number of sparkle particles to render. Defaults to 5. Positions are deterministically seeded so they stay stable across re-renders. |
| MinSize | int | 6 | Minimum sparkle size in pixels. Defaults to 6. |
| MaxSize | int | 14 | Maximum sparkle size in pixels. Defaults to 14. |
| Color | string | "var(--color-primary)" | CSS color of the sparkles — defaults to var(--color-primary). |
| Class | string? | — | Additional CSS classes merged onto the outer wrapper. If it includes a positioning utility (absolute, fixed, or sticky, including variant-prefixed like md:absolute), the built-in lumeo-sparkles (position: relative) marker class is omitted so the consumer's utility wins. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures unmatched attributes and applies them to the outer wrapper. |
Related Components
- ShimmerButton — Button with animated shimmer border beam.