Confetti
Burst of colored particles emitted on demand via an imperative Fire() method. Perfect for celebrations and success states.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Confetti />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
9 tests across 1 file. Auto-generated from the test suite.
When to Use
- Celebrate a user milestone (form submitted, goal reached, purchase complete).
- Make a "tada" moment more memorable with a single confetti burst.
- Use the imperative
Fire()method via@refto trigger programmatically.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | Content rendered inside the confetti container, positioned beneath the overlay <canvas> that the particles are drawn on. |
| ParticleCount | int | 80 | Number of confetti particles to emit per burst. |
| Spread | int | 70 | Spread angle in degrees. |
| Colors | string[]? | — | Colors to use for confetti. Defaults to a festive palette using CSS variables (resolved at runtime). |
| OriginX | double | 0.5 | Origin X position (0–1, relative to element width). Default: 0.5 (center). |
| OriginY | double | 0.5 | Origin Y position (0–1, relative to element height). Default: 0.5 (center). |
| Class | string? | — | Additional CSS classes merged onto the container div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the container div. |
Imperative API: Capture a reference with
@ref="_confettiRef"
and call await _confettiRef!.Fire() from any event handler.
Related Components
- Sparkles — Always-on decorative sparkles around content.
- AnimatedBeam — Animated SVG gradient beam between two elements.