Border Beam

Docs

Border Beam

An animated beam of light which travels along the border of its container.

Zenix Access

Secure login to your Zenix account

Installation

Zenix Music

Digital Dreams - Zenix Sound

2:458:02

Zenix Portal

Welcome back! Please sign in to continue

14-day free trial. No credit card required.

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

<div className="relative h-[500px] w-full overflow-hidden">
  <BorderBeam />
</div>

Prop	Type	Default	Description
`className`	`string`	`-`	Custom class to apply to the component
`size`	`number`	`50`	Size of the beam
`duration`	`number`	`6`	Duration of the animation in seconds
`delay`	`number`	`0`	Delay before the animation starts
`colorFrom`	`string`	`#ffaa40`	Start color of the beam gradient
`colorTo`	`string`	`#9c40ff`	End color of the beam gradient
`transition`	`Transition`	`-`	Custom motion transition configuration
`style`	`React.CSSProperties`	`-`	Custom CSS styles to apply
`reverse`	`boolean`	`false`	Whether to reverse animation direction
`initialOffset`	`number`	`0`	Initial offset position (0-100)

Contribute