BorderGlow

border-glow

指针感应发光边框卡片 · 沿光锥点亮彩色网格边框 + 外层霓虹光晕(随边缘贴近度渐变) + 可选挂载自动扫光(零依赖·token·reduced-motion)

用法

基础用法

把指针移到卡片上，边框会沿光锥跟随点亮。需深色底烘托。

瑚琏组件库

把指针移到卡片上，边框会沿光锥点亮。

tsx

<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">瑚琏组件库</p>
      <p className="mt-1.5 text-sm text-white/55">把指针移到卡片上，边框会沿光锥点亮。</p>
    </div>
  </BorderGlow>
</div>

挂载自动扫光

animated 时挂载即绕边扫一圈，无需指针；reduced-motion 下自动跳过。

自动扫光

挂载时自动绕边一圈，reduced-motion 下跳过。

tsx

<BorderGlow animated>
  <div className="w-64 p-7">
    <p className="text-base font-semibold text-white">自动扫光</p>
    <p className="mt-1.5 text-sm text-white/55">挂载时自动绕边一圈。</p>
  </div>
</BorderGlow>

自定义发光色

glowColor / colors 全走 chart token，自动吃明暗主题。

青色霓虹

发光色 / 网格色全走 chart token。

tsx

<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">青色霓虹</p>
  </div>
</BorderGlow>

高灵敏 + 强光晕

调小 edgeSensitivity 更早触发，调大 glowIntensity / coneSpread 加强高亮弧。

高能边框

更早触发、更强光晕、更宽高亮弧。

tsx

<BorderGlow
  edgeSensitivity={10}
  glowIntensity={1.6}
  coneSpread={40}
>
  <div className="w-64 p-7">
    <p className="text-base font-semibold text-white">高能边框</p>
  </div>
</BorderGlow>

何时用

需要一张内容容器，指针靠近时沿光锥点亮彩色边框 + 外层霓虹光晕的卡片时用，自带可选挂载自动扫光。要给任意现有元素加旋转边框光带用 BorderBeam 或 ShineBorder；要做悬停眩光高光用 GlareHover。BorderGlow 偏「整卡 + 指针追踪光锥」，是有内容承载的容器型。

导入

import { BorderGlow } from "@hulianui/ui"

Props

继承 <div> 属性（已 Omit 掉 color）。

名称	类型	默认	说明
className	`string`	—	透传根容器 className（合并进 `.border-glow`）
edgeSensitivity	`number`	`30`	边缘灵敏度 0–100，越小越早触发外层光晕
glowColor	`string`	`var(--color-chart-1)`	外层光晕色（box-shadow），token 须带 `--color-` 前缀
backgroundColor	`string`	深色(surface 暗调)	卡片底色，发光依赖深底对比，浅底下变弱
borderRadius	`number`	`28`	圆角半径 px
glowRadius	`number`	`40`	外层光晕溢出内边距 px，越大扩散越远
glowIntensity	`number`	`1`	光晕强度倍率 0–2
coneSpread	`number`	`25`	光锥角度宽度 0–50，越大高亮弧越宽
animated	`boolean`	`false`	挂载时自动播一圈扫光；reduced-motion 下跳过
colors	`string[]`	chart-1/3/4	彩色网格边框取色，循环映射到 7 个 radial 锚点
fillOpacity	`number`	`0.5`	边缘彩色填充层透明度 0–1
style	`CSSProperties`	—	透传根容器内联样式

Slots

插槽	类型	说明
children	`ReactNode`	卡片内容，层叠在所有发光层之上

禁忌 / 坑

发光边框依赖深色底对比，放在浅色背景上效果显著变弱；用 backgroundColor 保持深底。
glowColor/colors 喂 token 必须带 --color- 前缀（Tailwind v4 真名），裸 var(--primary) 不解析。见 [[hulian-token-color-var-needs-color-prefix]]。
指针追踪与 animated 扫光均受 reduced-motion 影响：用户偏好减少动画时自动跳过扫光（DOM 不变）。

Playground

边缘灵敏度光晕半径 px光晕强度光锥宽度圆角 px挂载扫光

瑚琏 BorderGlow

移入或开启扫光查看发光边框。

<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>

用法

基础用法

把指针移到卡片上，边框会沿光锥跟随点亮。需深色底烘托。

瑚琏组件库

把指针移到卡片上，边框会沿光锥点亮。

tsx

<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">瑚琏组件库</p>
      <p className="mt-1.5 text-sm text-white/55">把指针移到卡片上，边框会沿光锥点亮。</p>
    </div>
  </BorderGlow>
</div>

挂载自动扫光

animated 时挂载即绕边扫一圈，无需指针；reduced-motion 下自动跳过。

自动扫光

挂载时自动绕边一圈，reduced-motion 下跳过。

tsx

<BorderGlow animated>
  <div className="w-64 p-7">
    <p className="text-base font-semibold text-white">自动扫光</p>
    <p className="mt-1.5 text-sm text-white/55">挂载时自动绕边一圈。</p>
  </div>
</BorderGlow>

自定义发光色

glowColor / colors 全走 chart token，自动吃明暗主题。

青色霓虹

发光色 / 网格色全走 chart token。

tsx

<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">青色霓虹</p>
  </div>
</BorderGlow>

高灵敏 + 强光晕

调小 edgeSensitivity 更早触发，调大 glowIntensity / coneSpread 加强高亮弧。

高能边框

更早触发、更强光晕、更宽高亮弧。

tsx

<BorderGlow
  edgeSensitivity={10}
  glowIntensity={1.6}
  coneSpread={40}
>
  <div className="w-64 p-7">
    <p className="text-base font-semibold text-white">高能边框</p>
  </div>
</BorderGlow>

何时用

Props

继承 <div> 属性（已 Omit 掉 color）。

名称	类型	默认	说明
className	`string`	—	透传根容器 className（合并进 `.border-glow`）
edgeSensitivity	`number`	`30`	边缘灵敏度 0–100，越小越早触发外层光晕
glowColor	`string`	`var(--color-chart-1)`	外层光晕色（box-shadow），token 须带 `--color-` 前缀
backgroundColor	`string`	深色(surface 暗调)	卡片底色，发光依赖深底对比，浅底下变弱
borderRadius	`number`	`28`	圆角半径 px
glowRadius	`number`	`40`	外层光晕溢出内边距 px，越大扩散越远
glowIntensity	`number`	`1`	光晕强度倍率 0–2
coneSpread	`number`	`25`	光锥角度宽度 0–50，越大高亮弧越宽
animated	`boolean`	`false`	挂载时自动播一圈扫光；reduced-motion 下跳过
colors	`string[]`	chart-1/3/4	彩色网格边框取色，循环映射到 7 个 radial 锚点
fillOpacity	`number`	`0.5`	边缘彩色填充层透明度 0–1
style	`CSSProperties`	—	透传根容器内联样式

插槽

类型

说明

children

ReactNode

卡片内容，层叠在所有发光层之上

禁忌 / 坑

发光边框依赖深色底对比，放在浅色背景上效果显著变弱；用 backgroundColor 保持深底。

glowColor/colors 喂 token 必须带 --color- 前缀（Tailwind v4 真名），裸 var(--primary) 不解析。见 [[hulian-token-color-var-needs-color-prefix]]。

指针追踪与 animated 扫光均受 reduced-motion 影响：用户偏好减少动画时自动跳过扫光（DOM 不变）。

Playground

边缘灵敏度光晕半径 px光晕强度光锥宽度圆角 px挂载扫光

瑚琏 BorderGlow

移入或开启扫光查看发光边框。

<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>

BorderGlow

用法

基础用法

挂载自动扫光

自定义发光色

高灵敏 + 强光晕

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

BorderGlow

用法

基础用法

挂载自动扫光

自定义发光色

高灵敏 + 强光晕

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground