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.

  <.shine_border>
    <div class="p-8 text-center">
      <h3 class="text-lg font-semibold">Upgrade to Pro</h3>
      <p class="mt-2 text-sm text-gray-500">Everything in Free, plus the components that ship products.</p>
    </div>
  </.shine_border>

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.

  <.shine_border shine_color={["#f43f5e", "#8b5cf6", "#3b82f6"]} border_width="2px" duration="10s">
    <div class="p-8 text-center">
      <h3 class="text-lg font-semibold">Now shipping: 4.4.0</h3>
      <p class="mt-2 text-sm text-gray-500">One design system, nineteen components, zero JavaScript.</p>
    </div>
  </.shine_border>

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.

  <.shine_border shine_color="#fbbf24" class="bg-gray-950">
    <div class="p-8 text-center">
      <p class="text-xs font-medium uppercase tracking-widest text-amber-400">Lifetime deal</p>
      <h3 class="mt-2 text-xl font-bold text-white">Petal Pro</h3>
      <p class="mt-2 text-sm text-gray-400">Pay once. Ship forever.</p>
    </div>
  </.shine_border>

Properties