Beam

Animated light beam that slides across a 1px separator line. Configurable color, speed, and delay.

Installation

Run the CLI

$npx particleui-cli add beam

Usage

TSX

import { Beam } from "@/components/ui/beam"

export default function Example() {
  return (
    <div className="relative h-32 overflow-hidden rounded-xl border border-border">
      <Beam />
    </div>
  )
}

Props

Prop	Type	Default	Required
width	string \| number	`"100%"`	no
duration	number	`3`	no
delay	number	`0`	no
colorFrom	string	`"oklch(78% 0.17 200)"`	no
colorTo	string	`"transparent"`	no
className	string	—	no

Details

Source filecomponents/ui/beam.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—