PetalComponents.Confetti (petal_components v4.1.1)

Copy Markdown View Source

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

confetti(assigns)

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 to 100.
  • spread (:integer) - default spread of a burst, in degrees. Defaults to 70.
  • colors (:list) - default particle colors as hex strings, e.g. ["#26ccff", "#a25afd"]. Defaults to [].
  • Global attributes are accepted.