Packages
petal_components
2.9.2
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.
Retired package: Deprecated - Tailwind introduces breaking changes
Current section
Files
Jump to
Current section
Files
lib/petal_components/marquee.ex
defmodule PetalComponents.Marquee do
use Phoenix.Component
attr(:pause_on_hover, :boolean,
default: false,
doc: "Pause the marquee when the user hovers over the cards"
)
attr(:repeat, :integer, default: 4, doc: "Number of times to repeat the content")
attr(:vertical, :boolean, default: false, doc: "Display the marquee vertically")
attr(:reverse, :boolean, default: false, doc: "Reverse the direction of the marquee")
attr(:duration, :string, default: "30s", doc: "Animation duration")
attr(:gap, :string, default: "1rem", doc: "Gap between items")
attr(:overlay_gradient, :boolean, default: true, doc: "Add gradient overlay at edges")
attr(:max_width, :string,
default: "none",
values: ["sm", "md", "lg", "xl", "2xl", "none"],
doc: "Maximum width of the marquee container"
)
attr(:max_height, :string,
default: "none",
values: ["sm", "md", "lg", "xl", "2xl", "none"],
doc: "Maximum height of the marquee container"
)
attr(:class, :string, default: "", doc: "CSS class for parent div")
attr(:rest, :global)
slot(:inner_block, required: true)
def marquee(assigns) do
~H"""
<div class="relative overflow-hidden">
<div
:if={@repeat > 0}
class={[
"pc-marquee-container group",
@vertical && "pc-vertical",
@class
]}
max-width={@max_width}
max-height={@max_height}
style={"--duration: #{@duration}; --gap: #{@gap};"}
{@rest}
>
<%= for _ <- 0..(@repeat - 1) do %>
<div
class={[
"pc-marquee-content",
@vertical && "pc-marquee-vertical",
!@vertical && "pc-marquee-horizontal",
@pause_on_hover && "pc-pause-on-hover"
]}
style={@reverse && "animation-direction: reverse;"}
>
{render_slot(@inner_block)}
</div>
<% end %>
</div>
<%= if @overlay_gradient do %>
<%= if @vertical do %>
<div class="pc-gradient-overlay-top"></div>
<div class="pc-gradient-overlay-bottom"></div>
<% else %>
<div class="pc-gradient-overlay-left"></div>
<div class="pc-gradient-overlay-right"></div>
<% end %>
<% end %>
</div>
"""
end
end