## Overview [#overview]
`BorderBeam` draws an animated light traveling around a container border. It recalculates the path on resize so the effect stays aligned with the component.
## Usage [#usage]
```tsx
import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";
```
```tsx
```
## Examples [#examples]
### Custom Colors [#custom-colors]
Use the `lightColor` prop with Tailwind CSS variables to change the beam color.
```tsx
import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
### Duration [#duration]
Control the animation speed with the `duration` prop (in seconds).
```tsx
import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
### Border Width [#border-width]
Adjust the beam thickness with the `borderWidth` prop.
```tsx
import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
### Light Width [#light-width]
Control the trail length with the `lightWidth` prop (in pixels).
```tsx
import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
### Layered Beams [#layered-beams]
Stack multiple `BorderBeam` components with different colors and speeds for a richer effect.
```tsx
import { BorderBeam } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
);
}
```
***
## API Reference [#api-reference]
### BorderBeam [#borderbeam]
The root component. Place it as the **first child** inside a container with `position: relative` and `overflow: hidden`.
| Prop | Type | Default | Description |
| -------------- | --------- | ----------- | -------------------------------------------------------- |
| `lightWidth` | `number` | `200` | Width of the light gradient in pixels |
| `duration` | `number` | `10` | Animation duration in seconds for one full loop |
| `lightColor` | `string` | `"#FAFAFA"` | CSS color value for the beam |
| `borderWidth` | `number` | `1` | Thickness of the border beam in pixels |
| `cornerRadius` | `number` | - | Border radius for the beam path (clamped to max) |
| `reduceMotion` | `boolean` | `false` | Renders a deterministic static beam instead of animating |
| `className` | `string` | - | Additional CSS classes |