Lumeo

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 />

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.
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

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