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.

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.

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.

Properties

          
  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