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.
Summary
Functions
Wraps content in a panel whose border carries a slow, ambient shimmer.
Functions
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>Attributes
shine_color(:any) - the shimmer colour. A single CSS colour, or a list of colours to blend across the sweep. Defaults to"#a1a1aa".duration(:string) - time for one full shimmer sweep. Defaults to"14s".border_width(:string) - width of the shimmering border. Defaults to"1px".border_radius(:string) - border radius of the container. When unset, follows the theme radius (--pc-radius, scaled for panels). Defaults tonil.class(:any) - extra classes for the container. Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)