Confetti

A brief, full-screen confetti burst to celebrate a completed action. No markup — canvas-confetti draws onto its own fixed, click-through canvas. Fire it from the server with push_event/3 or from the client with Confetti.celebrate/1. Respects prefers-reduced-motion.

Preview

React preview

LiveView (HEEx)

# In app.js, once at startup:
import { setupConfetti } from "design-system/confetti"
setupConfetti()

# Client trigger — fires immediately, no round trip:
alias DesignSystem.UI.Confetti

<Buttons.button phx-click={Confetti.celebrate()}>Celebrate 🎉</Buttons.button>

# Server trigger, staying on the page:
{:noreply, push_event(socket, "confetti", %{})}

# Server trigger, then navigating away — celebrate on the destination:
{:noreply, push_navigate(socket, to: ~p"/orders/#{order}?celebrate=1")}

React (JSX)

import { celebrate } from "design-system/confetti"

<button onClick={() => celebrate()}>Celebrate 🎉</button>