UI Hatch

Border Beam

An animated light beam that travels around the border of any container.

Border Beam

BorderBeam adds a sleek, animated border effect to your components. It uses hardware-accelerated CSS animations for a smooth experience.

How To Use

Install

Run the following command to add this component to your project.

Import

Import the component into your project.

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

Preview

Open in
Beam

Props

PropTypeDefault
delay?
number
0
colorTo?
string
#9c40ff
colorFrom?
string
#ffaa40
borderWidth?
number
1.5
duration?
number
15
size?
number
200

✨ Features

  • Smooth CSS animations
  • Highly customizable gradients
  • Works on any container with relative positioning and overflow-hidden
  • Lightweight and dependency-free

🧠 When to Use

  • Use to draw attention to specific sections
  • Use for "Pro" or "Premium" feature cards
  • Use for loading states or interactive buttons

Spotlight Card

A high-end card component with a mouse-following spotlight glow effect.

Bento Grid

A flexible and responsive grid system for showcasing features, similar to Apple's design language.