PetalComponents.BorderBeam (petal_components v4.1.1)

An animated beam of light that travels along the border of its container. Pure CSS (offset-path animation) — no JavaScript required.

Great for drawing attention to a card, CTA or auth form on a landing page.

Summary

Wraps any content in a bordered container with an animated light beam running along the border.

Wraps any content in a bordered container with an animated light beam running along the border.

<.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>

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".
size (:string) - length of the beam. Defaults to "150px".
border_radius (:string) - border radius of the container (the beam follows it). Defaults to "0.75rem".
class (:any) - extra classes for the container. Defaults to nil.
Global attributes are accepted.