ElectricBorder

electric-border

通电跳动的边框装饰 · SVG 湍流位移描边 + 多层模糊光晕模拟放电辉光(零依赖·token·reduced-motion)

用法

基础用法

用 ElectricBorder 包裹任意内容，即得一圈通电跳动的边框。

Electric Border

tsx

<ElectricBorder borderRadius={16}>
  <div className="px-8 py-6 text-sm font-medium">Electric Border</div>
</ElectricBorder>

速度与紊乱

speed 控制抖动快慢，chaos 控制电弧被撕扯的剧烈程度。

放电中

tsx

<ElectricBorder chaos={2} speed={2} borderRadius={20}>
  <div className="px-8 py-6 text-sm">放电中</div>
</ElectricBorder>

自定义颜色与圆角

color 吃任意 CSS 颜色（建议用 var(--color-…) token），borderRadius 设大值即成胶囊。

tsx

<ElectricBorder color="var(--color-chart-3)" borderRadius={999} thickness={2}>
  <button type="button" className="px-6 py-3 text-sm font-semibold">
    立即体验
  </button>
</ElectricBorder>

厚光晕包裹卡片

thickness 加大柔边辉光更明显，适合给重点卡片加强调。

瑚琏组件库

通电的边框 · 零依赖 SVG 湍流

tsx

<ElectricBorder thickness={3} chaos={1.4} borderRadius={14}>
  <div className="w-56 space-y-1 px-5 py-4">
    <p className="text-sm font-semibold">瑚琏组件库</p>
    <p className="text-xs opacity-60">通电的边框 · 零依赖 SVG 湍流</p>
  </div>
</ElectricBorder>

何时用

给一块内容（按钮、卡片、CTA）包一圈持续放电跳动的电弧描边，营造科技/赛博氛围。要静态柔光描边用 ShineBorder，要单点环绕流光用 BorderBeam；本组件是「整条边都在抖动放电」的强动效，最吸睛但也最重。

导入

import { ElectricBorder } from "@hulianui/ui"

Props

名称	类型	默认	说明
color	`string`	`var(--color-primary)`	电流描边颜色，吃明暗主题。任意 CSS 颜色串均可；喂 SVG stroke 的 CSS 变量须带 `--color-` 前缀才解析
speed	`number`	`1`	电流抖动速度倍率，越大跳动越快（speed=1 ≈ 2s 一轮 `<animate>`）
chaos	`number`	`1`	紊乱程度（湍流位移强度），越大描边被撕扯越剧烈，映射 `feDisplacementMap` 的 scale
thickness	`number`	`2`	边框外发光柔边的厚度（px）
borderRadius	`number`	`16`	圆角半径（px），同时应用到容器与电流描边
className	`string`	—	透传根容器额外 className
style	`CSSProperties`	—	透传根容器内联样式

Slots

插槽	类型	说明
children	`ReactNode`	被电流边框包裹的内容

禁忌 / 坑

自定义 color 用 CSS 变量时务必带 --color- 前缀（如 var(--color-chart-3)），裸 var(--primary) 喂给 SVG stroke 不解析、描边会变黑或消失，见 [[hulian-token-color-var-needs-color-prefix]]。
描边电弧需要深色底才显眼，浅色背景上辉光几乎不可见。

Playground

抖动速度紊乱程度光晕厚度 px圆角 px

Electric Border

<ElectricBorder
  speed={1}
  chaos={1}
  thickness={2}
  borderRadius={16}
>
  <div className="px-8 py-6">Electric Border</div>
</ElectricBorder>

用法

基础用法

用 ElectricBorder 包裹任意内容，即得一圈通电跳动的边框。

Electric Border

tsx

<ElectricBorder borderRadius={16}>
  <div className="px-8 py-6 text-sm font-medium">Electric Border</div>
</ElectricBorder>

速度与紊乱

speed 控制抖动快慢，chaos 控制电弧被撕扯的剧烈程度。

放电中

tsx

<ElectricBorder chaos={2} speed={2} borderRadius={20}>
  <div className="px-8 py-6 text-sm">放电中</div>
</ElectricBorder>

自定义颜色与圆角

color 吃任意 CSS 颜色（建议用 var(--color-…) token），borderRadius 设大值即成胶囊。

tsx

<ElectricBorder color="var(--color-chart-3)" borderRadius={999} thickness={2}>
  <button type="button" className="px-6 py-3 text-sm font-semibold">
    立即体验
  </button>
</ElectricBorder>

厚光晕包裹卡片

thickness 加大柔边辉光更明显，适合给重点卡片加强调。

瑚琏组件库

通电的边框 · 零依赖 SVG 湍流

tsx

<ElectricBorder thickness={3} chaos={1.4} borderRadius={14}>
  <div className="w-56 space-y-1 px-5 py-4">
    <p className="text-sm font-semibold">瑚琏组件库</p>
    <p className="text-xs opacity-60">通电的边框 · 零依赖 SVG 湍流</p>
  </div>
</ElectricBorder>

Props

名称	类型	默认	说明
color	`string`	`var(--color-primary)`	电流描边颜色，吃明暗主题。任意 CSS 颜色串均可；喂 SVG stroke 的 CSS 变量须带 `--color-` 前缀才解析
speed	`number`	`1`	电流抖动速度倍率，越大跳动越快（speed=1 ≈ 2s 一轮 `<animate>`）
chaos	`number`	`1`	紊乱程度（湍流位移强度），越大描边被撕扯越剧烈，映射 `feDisplacementMap` 的 scale
thickness	`number`	`2`	边框外发光柔边的厚度（px）
borderRadius	`number`	`16`	圆角半径（px），同时应用到容器与电流描边
className	`string`	—	透传根容器额外 className
style	`CSSProperties`	—	透传根容器内联样式

插槽

类型

说明

children

ReactNode

被电流边框包裹的内容

ElectricBorder

用法

基础用法

速度与紊乱

自定义颜色与圆角

厚光晕包裹卡片

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

ElectricBorder

用法

基础用法

速度与紊乱

自定义颜色与圆角

厚光晕包裹卡片

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground