BorderBeam
border-beamMoves a luminous beam along the border of a positioned element.
Usage
Basic usage
BorderBeam is the overlay of absolute inset-0. When placed in the relative + rounded + overflow-hidden container, a beam of light will be routed along the border. Default primary→chart-2 gradient.
<div className="relative h-40 w-72 overflow-hidden rounded-xl border border-border bg-surface">
<div className="grid h-full place-items-center text-sm text-muted">Border Beam</div>
<BorderBeam />
</div>Reverse · Slow down
reverse makes the beam go around in the reverse direction, duration adjusts the seconds of one revolution, and size adjusts the length of the beam square.
<BorderBeam reverse duration={10} size={80} />Custom color
colorFrom / colorTo can be replaced with any CSS color or token, showing the brand color beam.
<BorderBeam colorFrom="var(--color-chart-3)" colorTo="var(--color-chart-5)" borderWidth={2} />When to Use
Use it to run a compact colored highlight around a card or container border for emphasis, loading, or an active AI state. It is an absolutely positioned overlay and needs a relative container. Use ShineBorder for a continuous gradient around the whole border, AnimatedBeam to connect two elements, or GlareHover for a diagonal hover reflection.
Import
import { BorderBeam } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | 50 | Beam square side length px (default demonstration uses 60) |
| duration | number | 6 | Number of seconds for one round |
| delay | number | 0 | Start delay seconds |
| colorFrom | string | var(--color-primary) | Beam start color |
| colorTo | string | var(--color-chart-2) | Beam stop color |
| reverse | boolean | false | Move around the border in reverse |
| initialOffset | number | 0 | Starting offset 0–100 |
| borderWidth | number | 1 | border width px |
| className | string | — | Class name forwarded to the overlay |
| style | CSSProperties | — | Inline style forwarded to the overlay |
Usage Guidelines
- It must be placed in a
position:relativecontainer, and the container is generallyoverflow-hidden, otherwise the beam will go around the rounded corners and overflow. - The color prop needs to be prefixed with
--color-when feeding the token (the default value is already included). The barevar(--primary)does not resolve - see [[hulian-token-color-var-needs-color-prefix]]. - Motion-based animations should be expected to be weakened/stopped with reduced-motion preferences.
Related
ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
<div className="relative">
...content
<BorderBeam duration={6} size={60} />
</div>