BorderGlow
border-glowLights a card border and outer glow according to pointer proximity.
Usage
Basic usage
Move the pointer over the card, and the border will light up along the light cone. A dark background is required.
Hulian component library
Move the pointer over the card and the border will light up along the light cone.
<div
className="rounded-xl p-12"
style={{ background: "oklch(0.13 0.02 280)" }}
>
<BorderGlow>
<div className="w-64 p-7">
<p className="text-base font-semibold text-white">Hulian Component Library</p>
<p className="mt-1.5 text-sm text-white/55">Move the pointer over the card, and the border will light up along the light cone. </p>
</div>
</BorderGlow>
</div>Mount automatic scanning
When animated is mounted, it will scan around the edge without a pointer; when reduced-motion is used, it will be skipped automatically.
Automatic scanning
Automatically circle the edge when mounting, skipping under reduced-motion.
<BorderGlow animated>
<div className="w-64 p-7">
<p className="text-base font-semibold text-white">Automatic scanning</p>
<p className="mt-1.5 text-sm text-white/55">Automatically wrap around the edge when mounting. </p>
</div>
</BorderGlow>Customized glow color
glowColor / colors all go to chart token, automatically take the light and dark theme.
Cyan neon
Glow color/Grid color full range chart token.
<BorderGlow
glowColor="var(--color-chart-2)"
colors={[
"var(--color-chart-2)",
"var(--color-chart-4)",
"var(--color-chart-5)",
]}
glowRadius={56}
>
<div className="w-64 p-7">
<p className="text-base font-semibold text-white">Cyan neon</p>
</div>
</BorderGlow>High sensitivity + strong halo
Turn down edgeSensitivity to trigger earlier, turn up glowIntensity / coneSpread to strengthen the highlight arc.
High energy frame
Earlier trigger, stronger halo, wider highlight arc.
<BorderGlow
edgeSensitivity={10}
glowIntensity={1.6}
coneSpread={40}
>
<div className="w-64 p-7">
<p className="text-base font-semibold text-white">High energy frame</p>
</div>
</BorderGlow>When to Use
Use it for a content card whose colored edge and outer neon halo follow the nearby pointer. It can also play one automatic sweep after mounting. Use BorderBeam or ShineBorder to decorate an existing element, and GlareHover for a hover reflection. BorderGlow owns the whole card and its pointer-tracking cone.
Import
import { BorderGlow } from "@hulianui/ui"Props
Extends <div> attributes, with the native color attribute omitted.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | — | Transparent root container className (merged into .border-glow) |
| edgeSensitivity | number | 30 | Edge sensitivity 0–100, the smaller it is, the earlier the outer halo is triggered |
| glowColor | string | var(--color-chart-1) | Outer halo color (box-shadow), token must be prefixed with --color- |
| backgroundColor | string | oklch(0.16 0.02 280) | Card background; the glow relies on dark contrast and is weaker on light surfaces |
| borderRadius | number | 28 | corner radius px |
| glowRadius | number | 40 | The outer halo overflows the inner margin px, the larger it is, the farther it spreads |
| glowIntensity | number | 1 | Glow intensity magnification 0–2 |
| coneSpread | number | 25 | Light cone angle width 0–50, the larger the width, the wider the highlight arc |
| animated | boolean | false | Automatically play a circle of sweeping light when mounted; skip under reduced-motion |
| colors | string[] | chart-1/3/4 | Color grid border selection, circularly mapped to 7 radial anchor points |
| fillOpacity | number | 0.5 | Edge color fill layer transparency 0–1 |
| style | CSSProperties | — | Inline styles forwarded to the root container |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Card content, layered on top of all glowing layers |
Usage Guidelines
- The luminous border relies on dark background contrast, and the effect is significantly weaker when placed on a light background; use
backgroundColorto maintain a dark background. glowColor/colorsfeed token must be prefixed with--color-(Tailwind v4 real name), and barevar(--primary)does not resolve. See [[hulian-token-color-var-needs-color-prefix]].- Both pointer tracking and
animatedsweeping are affected by reduced-motion: users prefer to automatically skip sweeping when reducing the animation (the DOM remains unchanged).
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
Hulian BorderGlow
Move in or turn on scanning to view the luminous border.
<div className="rounded-xl p-12" style={{ background: "oklch(0.13 0.02 280)" }}>
<BorderGlow
edgeSensitivity={30}
glowRadius={40}
glowIntensity={1}
coneSpread={25}
borderRadius={28}
animated={false}
>
<div className="w-64 p-7">…</div>
</BorderGlow>
</div>