Animated Beam
A light beam that sweeps across the top and bottom edges.
npx arupui add animated-beam
Preview
Animated Beam
Light beams sweep across the edges.
Usage
animated-beam.tsx
import { AnimatedBeam } from "@/components/blocks/animated-beam"
<AnimatedBeam>
<div className="p-6">Content</div>
</AnimatedBeam>Props
| Prop | Type | Default |
|---|---|---|
beamColor | string | hsl(var(--primary)) |
beamWidth | number | 2 |
duration | number | 3 |
beamColorType:
stringDefault: hsl(var(--primary))beamWidthType:
numberDefault: 2durationType:
numberDefault: 3