Packages
petal_components
4.2.1
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/confetti.ex
defmodule PetalComponents.Confetti do
@moduledoc """
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.
"""
use Phoenix.Component
attr :id, :string, required: true
attr :particle_count, :integer,
default: 100,
doc: "default number of particles per burst"
attr :spread, :integer, default: 70, doc: "default spread of a burst, in degrees"
attr :colors, :list,
default: [],
doc: ~s|default particle colors as hex strings, e.g. ["#26ccff", "#a25afd"]|
attr :rest, :global
@doc """
Mounts an (invisible) confetti cannon on the page.
<.confetti id="confetti" />
"""
def confetti(assigns) do
~H"""
<span
id={@id}
class="pc-confetti"
phx-hook="PetalConfetti"
data-particle-count={@particle_count}
data-spread={@spread}
data-colors={if @colors != [], do: Phoenix.json_library().encode!(@colors)}
{@rest}
>
</span>
"""
end
end