BorderBeam

Decorative component that renders a moving beam along a container border.

When to use

Use when a container needs stronger visual emphasis without introducing business state semantics.
Suitable for login panels, recommendation cards, AI modules, and key CTA blocks.
As a decorative effect, it should not replace focus rings, validation borders, or status feedback.

Examples

Basic

Basic usage. Wrap any container with BorderBeam to add a continuous decorative beam effect along its border.

Multiple beams

Use count to set the number of beams. Multiple beams are evenly distributed around the container border. It should be a positive integer, and the default value is 1.

Gradients

Display six gradient beam palettes and switch between them.

Size

Use size to control the size of the visible beam segment. The default is 100px, and numbers are treated as pixels.

Show on hover

Hide the border beam by default, and reveal it when hovering over the container.

Custom container

A custom container can also host BorderBeam. The beam layer is inserted into the child node and positioned with position: absolute along the container edge, so the host element needs to provide a positioning context. In most cases, set position: relative.

Duration

Use duration to control how many seconds the beam takes to complete one loop. The default is 6 seconds.

Line width

Use lineWidth to adjust the beam width of an individual BorderBeam. The default value is 1px, and numbers are treated as pixels.

API

BorderBeam are exported from @ceebee/ui/client.

BorderBeam

Property	Description	Type	Default	Version
`children`	Decorated content	`ReactNode`	`-`	6.4.0
`color`	Beam color configuration. Supports a single color string or gradient stops. percent uses the 0 ~ 100 input range and BorderBeam reserves tail space for the transparent fade	`string \| { color: string; percent: number }[]`	`-`	6.4.0
`count`	Number of beams	`number`	`1`	6.6.0
`duration`	Time in seconds for the beam to complete one loop	`number`	`6`	6.5.0
`lineWidth`	Width of the beam line. Numbers are treated as pixels	`number \| string`	`1px`	6.5.0
`outset`	Outset distance of the beam layer from the container edge. Set to 0 for clipped containers	`number \| string`	`-`	6.4.0
`size`	Size of the visible beam segment. Numbers are treated as pixels	`number \| string`	`100`	6.5.0