# Sparkles

Source: https://lumeo.nativ.sh/components/sparkles

# 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`, and `MaxSize` to control particle density and scale.

Preview Code

Text Wrap

New Feature

Pro

Copy Code

Preview Code

Custom Color

Primary Amber Violet

Copy Code

Preview Code

Dense Sparkles

## Magical Heading

Copy Code

Preview Code

Subtle (Few Sparkles)

Upgrade Star

Copy Code

## 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](/components/shimmer-button) — Button with animated shimmer border beam.
-   [BorderBeam](/components/border-beam) — Animated gradient border beam for hero elements.
-   [BlurFade](/components/blur-fade) — Blur and fade-in motion primitive on mount.