Lightning

lightning

fbm 噪声电弧/极光柱 WebGL 背景 · 距离场反比辉光 + hash 随机闪烁(ogl·token 取色·reduced-motion 静态降级)

用法

基础用法

默认蓝紫色相 230，组件自带 absolute inset-0 z-0，内容叠 z-10。

Lightning

fbm 噪声电弧背景

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-2">
    <p className="text-2xl font-bold tracking-tight text-white/90">Lightning</p>
    <p className="text-sm text-white/50">fbm 噪声电弧背景</p>
  </div>
</div>

暖橙色相（高强度）

hue=30 切暖橙，intensity / speed 调高更亮更躁。

hue = 30

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning hue={30} intensity={1.4} speed={1.3} />
</div>

吃 chart token（明暗自适应）

传 color 覆盖 hue 路径，shader 直接吃 token、跟随主题切换。

token 取色 · 明暗自适应

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning color="var(--color-chart-1)" intensity={1.2} />
</div>

细密慢电

size 调大分叉更细密，speed 调慢翻涌更舒缓。

size=1.6 · speed=0.6

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning size={1.6} speed={0.6} hue={280} />
</div>

何时用

需要纵向电弧 / 极光柱辉光背景、带随机闪烁的科技感 hero 时用。要单根稳定的体积光柱用 LightPillar；要放射状光束用 LightRays；要坠落光束用 Lightfall。

导入

import { Lightning } from "@hulianui/ui"

Props

名称	类型	默认	说明
hue	`number`	`230`	闪电色相(0–360, HSV 色环)，仅未传 `color` 时生效。例 30 暖橙 / 120 青绿 / 280 品紫
color	`string`	`undefined`	闪电主色，传入后覆盖 `hue` 路径，shader 直接吃；传 `var(--color-chart-1)` 可吃 token 明暗自适应
xOffset	`number`	`0`	水平偏移(clip-space)，正值推向右、负值推向左
speed	`number`	`1`	动画速度因子，越大闪烁/翻涌越快
intensity	`number`	`1`	辉度强度，越大越亮越粗
size	`number`	`1`	噪声尺度，越大分叉越细密、越小越宏观
className	`string`	—	透传根容器(reduced / WebGL 失败时透传 fallback div)

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时的静态替代内容，默认 token 纵向辉光渐变

禁忌 / 坑

color 与 hue 二选一：传了 color 则 hue 失效。要 token 自适应优先用 color="var(--color-chart-1)"。
ogl/WebGL 仅客户端；SSR / 无 WebGL 出 fallback（token 渐变），reduced-motion 下也降级。
color 传 CSS 变量须用 --color- 前缀 token，裸 var(--primary) shader 不解析，见 [[hulian-token-color-var-needs-color-prefix]]。
全屏背景层在 opaque 背景的非层叠上下文父级里可能被父背景盖住，见 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。

Playground

色相（0–360，留色为空时生效）速度辉度强度噪声尺度水平偏移自定义色（留空=按色相）

Lightning · WebGL 背景

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning
    hue={230}
    speed={1}
    intensity={1}
    size={1}
    xOffset={0}
  />
  <div className="relative z-10">内容</div>
</div>

用法

基础用法

默认蓝紫色相 230，组件自带 absolute inset-0 z-0，内容叠 z-10。

Lightning

fbm 噪声电弧背景

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-2">
    <p className="text-2xl font-bold tracking-tight text-white/90">Lightning</p>
    <p className="text-sm text-white/50">fbm 噪声电弧背景</p>
  </div>
</div>

暖橙色相（高强度）

hue=30 切暖橙，intensity / speed 调高更亮更躁。

hue = 30

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning hue={30} intensity={1.4} speed={1.3} />
</div>

吃 chart token（明暗自适应）

传 color 覆盖 hue 路径，shader 直接吃 token、跟随主题切换。

token 取色 · 明暗自适应

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning color="var(--color-chart-1)" intensity={1.2} />
</div>

细密慢电

size 调大分叉更细密，speed 调慢翻涌更舒缓。

size=1.6 · speed=0.6

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning size={1.6} speed={0.6} hue={280} />
</div>

Props

名称	类型	默认	说明
hue	`number`	`230`	闪电色相(0–360, HSV 色环)，仅未传 `color` 时生效。例 30 暖橙 / 120 青绿 / 280 品紫
color	`string`	`undefined`	闪电主色，传入后覆盖 `hue` 路径，shader 直接吃；传 `var(--color-chart-1)` 可吃 token 明暗自适应
xOffset	`number`	`0`	水平偏移(clip-space)，正值推向右、负值推向左
speed	`number`	`1`	动画速度因子，越大闪烁/翻涌越快
intensity	`number`	`1`	辉度强度，越大越亮越粗
size	`number`	`1`	噪声尺度，越大分叉越细密、越小越宏观
className	`string`	—	透传根容器(reduced / WebGL 失败时透传 fallback div)

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时的静态替代内容，默认 token 纵向辉光渐变

禁忌 / 坑

color 与 hue 二选一：传了 color 则 hue 失效。要 token 自适应优先用 color="var(--color-chart-1)"。

ogl/WebGL 仅客户端；SSR / 无 WebGL 出 fallback（token 渐变），reduced-motion 下也降级。

color 传 CSS 变量须用 --color- 前缀 token，裸 var(--primary) shader 不解析，见 [[hulian-token-color-var-needs-color-prefix]]。

全屏背景层在 opaque 背景的非层叠上下文父级里可能被父背景盖住，见 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。

Playground

色相（0–360，留色为空时生效）速度辉度强度噪声尺度水平偏移自定义色（留空=按色相）

Lightning · WebGL 背景

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.10 0.02 265)" }}>
  <Lightning
    hue={230}
    speed={1}
    intensity={1}
    size={1}
    xOffset={0}
  />
  <div className="relative z-10">内容</div>
</div>

Lightning

用法

基础用法

暖橙色相（高强度）

吃 chart token（明暗自适应）

细密慢电

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Lightning

用法

基础用法

暖橙色相（高强度）

吃 chart token（明暗自适应）

细密慢电

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground