Border Beam Component Demo

Animated border component that creates a beautiful beam effect around elements. Perfect for highlighting important content or creating engaging visual effects.

Basic Border Beam Demo

Border Beam

SalesMetrix Branded Demo

SalesMetrix Analytics

Dashboard analytics terdepan untuk seller Shopee Indonesia

Real-time Data Processing

Border Beam Variations

Basic Border Beam

Default orange to purple gradient

Brand Colors

SalesMetrix blue to purple

Fast Animation

Quick 6-second cycle

Slow Animation

Relaxed 20-second cycle

How to Use Border Beam

1. Import the Component

import { BorderBeam } from "@/components/ui/border-beam";

2. Basic Usage

<div className="relative rounded-lg border p-8">
  <h2>Your Content</h2>
  <BorderBeam />
</div>

3. Customization Options

<BorderBeam 
  size={250}           // Size of the beam (default: 200)
  duration={12}        // Animation duration in seconds (default: 15)
  colorFrom="#005cdf"  // Start color (default: "#ffaa40")
  colorTo="#7c3aed"    // End color (default: "#9c40ff")
  borderWidth={2}      // Border thickness (default: 1.5)
  delay={2}            // Animation delay in seconds (default: 0)
  anchor={90}          // Position anchor (default: 90)
/>

4. Important Notes

  • The parent element must have position: relative
  • Use rounded-[inherit] to match parent border radius
  • The component uses CSS custom properties for dynamic values
  • Perfect for hero sections, cards, and call-to-action elements

Integration Examples for SalesMetrix

Hero Section

Hero Content

CTA Button

Feature Card

Analytics DashboardFeature highlight

Pricing Card

Premium Plan
WhatsApp