Wraps any content in a bordered panel with an animated light beam running along the border. The panel carries the surface (background, border, radius) — put plain content inside, not another card.

<.border_beam>
  <div class="p-8">
    <.h3>Sign in</.h3>
    ...
  </div>
</.border_beam>

Customise the look:

<.border_beam color_from="#38bdf8" color_to="#818cf8" duration="6s" size="200px">
  ...
</.border_beam>

Two beams chasing each other, springing around the corners:

<.border_beam beams={2} easing="spring" duration="6s">
  ...
</.border_beam>

Attributes

• color_from (:string) - start color of the beam gradient. Defaults to "#ffaa40".
• color_to (:string) - end color of the beam gradient. Defaults to "#9c40ff".
• duration (:string) - time the beam takes to travel the full border once. Defaults to "8s".
• delay (:string) - phase offset for the beam (applied as a head start). Defaults to "0s".
• size (:string) - length of the beam. Also sets how widely the beam swings through corners. Defaults to "150px".
• border_radius (:string) - border radius of the container. When unset, follows the theme radius (--pc-radius, scaled for panels). Defaults to nil.
• border_width (:string) - width of the border the beam runs along. Defaults to "1px".
• beams (:integer) - number of beams, evenly phased around the border. Defaults to 1.
• reverse (:boolean) - run the beam anticlockwise. Defaults to false.
• initial_offset (:integer) - shifts the lap seam (0-100, % of the path from the top-left corner). The spring's pause-release happens at the seam, so this sets WHERE it springs from. Defaults to 0; spring easing defaults to 25, which parks the release near the top centre on typical shapes. Defaults to nil.
• glow (:boolean) - symmetric comet (transparent -> colours -> transparent) instead of the sharp-headed beam. Glows tolerate very long sizes, so the size clamp is lifted - great for long dramatic beams. Defaults to false.
• easing (:string) - beam motion: linear for constant speed, ease-in-out for a glide, spring for a springy lap with a settle at the seam. Spring applies to a single beam; with beams > 1 motion stays linear so the chase remains even. Defaults to "linear". Must be one of "linear", "ease-in-out", or "spring".
• class (:any) - extra classes for the container. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)