Shine Border
A subtle animated shimmer that sweeps around the border of its container. Where
border beam
is a discrete travelling light, the shine is an ambient glow on the border ring - a hint of
life for cards, inputs and CTAs that shouldn't demand attention. Pure CSS, zero JavaScript,
and it holds still under prefers-reduced-motion.
Basic Shine Border
Wrap any content. The component renders a panel (surface, hairline border, theme radius) and
sweeps the shimmer around its ring. With no border_radius
set it follows the theme radius token.
Upgrade to Pro
Everything in Free, plus the components that ship products.
Colour Blends
shine_color
takes a single CSS colour or a list - a list blends across the sweep. Slow the lap down with
duration
and thicken the ring with border_width
when the shine is the point.
Now shipping: 4.4.0
One design system, nineteen components, zero JavaScript.
On Dark Panels
The shimmer reads best where the border is the brightest thing on screen. On a near-black panel a slow gold shine makes a quiet premium badge.
Lifetime deal
Petal Pro
Pay once. Ship forever.
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
border_radius
|
string |
nil
|
border radius of the container. When unset, follows the theme radius (--pc-radius, scaled for panels) |
border_width
|
string |
"1px"
|
width of the shimmering border |
class
|
any |
nil
|
extra classes for the container |
duration
|
string |
"14s"
|
time for one full shimmer sweep |
rest
|
global |
||
shine_color
|
any |
"#a1a1aa"
|
the shimmer colour. A single CSS colour, or a list of colours to blend across the sweep |
:inner_block
slot
|
slot |