BorderBeam provides an eye-catching animated gradient effect that travels along the border of your container. With customizable colors, sizes, and animation settings, it's perfect for highlighting important sections, call-to-action components, or adding visual interest to your marketing pages.

Basic BorderBeam

The basic BorderBeam component creates a subtle animated gradient that travels along the border of the container. Place your content inside the component for a polished, attention-grabbing effect.

Custom Colors

Customize the beam effect by changing the gradient colors. You can specify a completely different color scheme to match your brand or design.

BorderBeam with Marketing Content

Add marketing content, call-to-action buttons, or any other elements inside the BorderBeam component to create eye-catching sections for your website.

Pricing Cards with BorderBeam

Combine the BorderBeam component with pricing cards to highlight different pricing tiers. This example shows two cards with different color schemes to emphasize the featured plan.

Feature Highlight with BorderBeam

Create a standout feature section by combining the BorderBeam component with an eye-catching layout. This example showcases a featured product or service with a prominent call-to-action.

Newsletter with BorderBeam

Create an eye-catching newsletter signup section by combining the BorderBeam component with a simple form. The animated border draws attention to your call-to-action.

Properties

          
  attr :gradient_color_start, :string, default: "#ffaa40", doc: "The starting color of the beam"
  attr :gradient_color_end, :string, default: "#9c40ff", doc: "The ending color of the beam"
  attr :border_radius, :string, default: "0.5rem", doc: "The container's border radius"
  attr :border_color, :string, default: "hsl(240, 3.9%, 15.1%)", doc: "The container's border color"
  attr :animation_duration, :string, default: "12s", doc: "Duration of the beam animation"
  attr :offset_distance, :string, default: "0%", doc: "The starting position of the beam"
  attr :beam_size, :string, default: "150px", doc: "Size of the beam effect"
  attr :class, :string, default: ""
  attr :rest, :global

  slot :inner_block