RizzyUI

Confetti

RzConfetti is an SSR-first behavioral wrapper that decorates child content with client-side confetti effects powered by Alpine and canvas-confetti.

It is decorative only and should be paired with explicit success messaging, status text, or navigation feedback.

Why this exists in SSR RizzyUI

RizzyUI components render stable HTML on the server. RzConfetti follows that model by emitting deterministic markup, then attaching optional Alpine behavior in the browser with no Blazor event callbacks.

Basic click example

Source
<RzConfetti>
    <RzButton>Celebrate</RzButton>
</RzConfetti>

Load trigger example

Payment complete

Your receipt has been emailed.

Source
<RzConfetti Trigger="ConfettiTrigger.Load" Preset="ConfettiPreset.Victory" BurstCount="3">
    <RzCard class="p-6">
        <CardTitle>Payment complete</CardTitle>
        <CardDescription>Your receipt has been emailed.</CardDescription>
    </RzCard>
</RzConfetti>

Custom browser event example

Trigger the custom browser event to fire confetti.

Source
<RzConfetti Trigger="ConfettiTrigger.CustomEvent" EventName="order:success" Preset="ConfettiPreset.DualCannons">
    <RzButton type="button">Wait for order event</RzButton>
</RzConfetti>

<script>
window.dispatchEvent(new CustomEvent('order:success'));
</script>

Scoped card-level confetti

Hover this card

Confetti stays inside this region.

Source
<RzConfetti Mode="ConfettiMode.Scoped" Trigger="ConfettiTrigger.Hover" Preset="ConfettiPreset.Subtle">
    <RzCard class="p-6">
        <CardTitle>Hover this card</CardTitle>
        <CardDescription>Confetti stays inside this region.</CardDescription>
    </RzCard>
</RzConfetti>

Preset examples

Available presets: DefaultBurst, CannonLeft, CannonRight, DualCannons, Victory, Subtle, and Stars.

Source
<RzConfetti Preset="ConfettiPreset.CannonLeft" />
<RzConfetti Preset="ConfettiPreset.CannonRight" />
<RzConfetti Preset="ConfettiPreset.DualCannons" BurstCount="2" />
<RzConfetti Preset="ConfettiPreset.Victory" BurstCount="4" BurstIntervalMs="120" />

Accessibility and reduced motion

Confetti canvases are rendered as decorative surfaces with aria-hidden="true". The wrapper does not move focus and does not replace semantic success feedback.

Reduced-motion support is enabled by default with DisableForReducedMotion="true".

Installation and assets

RzConfetti resolves scripts through logical asset keys via ComponentAssetKeys. This keeps asset URLs centralized in RizzyUI configuration instead of hardcoded in component markup.

API reference

PropertyTypeNotes
TriggerConfettiTriggerClick, hover, load, visible, custom-event, or manual orchestration.
ModeConfettiModeOverlay, scoped, or element-origin launch behavior.
PresetConfettiPresetHigh-level preset mapped to stable option bundles.
Disabled, Once, CooldownMsbool, bool, intControl trigger behavior and rate limits.
BurstCount, BurstIntervalMsint, intDefines burst sequence depth and cadence.
ParticleCount, Spread, Angle, etc.Nullable numbers/bools/arraysOptional fine-grained overrides merged with the chosen preset.
DisableForReducedMotionboolDefaults to true.
ComponentAssetKeysstring[]Defaults to ["CanvasConfetti"].