A confetti cannon for celebration moments — completed onboarding, first payment, level up. Rendered as an invisible mount point; bursts are drawn on a temporary full-screen canvas with zero dependencies.
Requires the PetalConfetti hook from the JS bundle.
Firing confetti
From the server (e.g. after a successful form submit):
{:noreply, push_event(socket, "pc-confetti", %{})}Target a specific mount when a page has several:
{:noreply, push_event(socket, "pc-confetti", %{id: "my-confetti", particle_count: 150})}From the client, without a round trip:
<.button phx-click={Phoenix.LiveView.JS.dispatch("pc:confetti", to: "#my-confetti")} label="Celebrate" />Both paths accept options: particle_count, spread, angle, velocity,
colors, and origin (%{x: 0..1, y: 0..1} in viewport coordinates).
Respects prefers-reduced-motion — bursts are skipped for users who opt
out of animation.
Summary
Functions
Mounts an (invisible) confetti cannon on the page.
Functions
Mounts an (invisible) confetti cannon on the page.
<.confetti id="confetti" />Attributes
id(:string) (required)particle_count(:integer) - default number of particles per burst. Defaults to100.spread(:integer) - default spread of a burst, in degrees. Defaults to70.colors(:list) - default particle colors as hex strings, e.g. ["#26ccff", "#a25afd"]. Defaults to[].- Global attributes are accepted.