Packages
petal_components
4.7.0
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/shine_border.ex
defmodule PetalComponents.ShineBorder do
@moduledoc """
A subtle animated shimmer that sweeps around the border of its container.
Pure CSS — no JavaScript, and it respects `prefers-reduced-motion`.
The quieter sibling of `border_beam`: where the beam is a discrete
travelling light, the shine is an ambient shimmer on the border ring. Good
for cards, inputs and CTAs that want a hint of life without demanding
attention.
"""
use Phoenix.Component
attr :shine_color, :any,
default: "#a1a1aa",
doc: "the shimmer colour. A single CSS colour, or a list of colours to blend across the sweep"
attr :duration, :string, default: "14s", doc: "time for one full shimmer sweep"
attr :border_width, :string, default: "1px", doc: "width of the shimmering border"
attr :border_radius, :string,
default: nil,
doc:
"border radius of the container. When unset, follows the theme radius (--pc-radius, scaled for panels)"
attr :class, :any, default: nil, doc: "extra classes for the container"
attr :rest, :global
slot :inner_block, required: true
@doc """
Wraps content in a panel whose border carries a slow, ambient shimmer.
<.shine_border>
<div class="p-8">
<.h3>Upgrade to Pro</.h3>
...
</div>
</.shine_border>
Blend several colours across the sweep:
<.shine_border shine_color={["#f43f5e", "#8b5cf6", "#3b82f6"]}>
...
</.shine_border>
"""
def shine_border(assigns) do
colors =
case assigns.shine_color do
list when is_list(list) -> Enum.join(list, ", ")
color -> color
end
style =
[
"--pc-shine-colors: #{colors}",
"--pc-shine-duration: #{assigns.duration}",
"--pc-shine-border-width: #{assigns.border_width}",
assigns.border_radius && "--pc-shine-radius: #{assigns.border_radius}"
]
|> Enum.filter(& &1)
|> Enum.join("; ")
assigns = assign(assigns, :style, style)
~H"""
<div class={["pc-shine-border", @class]} style={@style} {@rest}>
<div class="pc-shine-border__shine" aria-hidden="true"></div>
{render_slot(@inner_block)}
</div>
"""
end
end