Iridescence

iridescence

虹彩光泽背景 · WebGL/ogl shader 连续光谱干涉 + 鼠标光流扰动 + chart token + 静态 fallback

用法

基础用法

Iridescence 是 absolute inset-0 背景层，需放在 relative + overflow-hidden 容器内，内容用 absolute 叠在上方。

Iridescence

tsx

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 265)" }}>
  <Iridescence />
  <div className="absolute inset-0 flex items-center justify-center">
    <span className="text-sm font-medium text-white/80">Iridescence</span>
  </div>
</div>

自定义颜色

color 接受任意 CSS 颜色字符串（hex / oklch / hsl / var(--token)）；不传时自动读 --color-chart-3 跟随主题。

tsx

<Iridescence color="oklch(0.72 0.22 50)" speed={0.8} />

RGB 数组色 · 高速扰动

color 也可传 [r, g, b]（0–1 范围）数组；提高 speed / amplitude 让流动更剧烈。

tsx

<Iridescence color={[0.3, 0.6, 1.0]} speed={1.5} amplitude={0.2} />

壁纸级（关闭鼠标响应）

mouseReact={false} 让 uMouse 固定，配合低 speed 适合做静谧 Hero 背景。

潮汐 Tide

瑚琏组件库 · 企业级 · 高质量

tsx

<div className="relative h-72 overflow-hidden rounded-xl">
  <Iridescence speed={0.3} mouseReact={false} />
  <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
    <p className="text-lg font-semibold text-white">潮汐 Tide</p>
    <p className="text-xs text-white/50">瑚琏组件库 · 企业级 · 高质量</p>
  </div>
</div>

何时用

需要连续光谱/油膜般的虹彩光泽背景，且想要鼠标光流扰动交互时用。基于 WebGL/ogl，有 GPU 开销，自带无 WebGL fallback；与 Silk 同为 WebGL 质感背景，Silk 偏丝绸流动、本组件偏虹彩光谱干涉；不愿引入 WebGL 则用纯 CSS 的 Aurora。

导入

import { Iridescence } from "@hulianui/ui"

Props

名称	类型	默认	说明
color	`[number, number, number] \| string`	`--color-chart-3`	基础色调。RGB 数组每分量 0..1，或任意 CSS 颜色字符串（hex/oklch/hsl/var）。不传则读主题 token 随明暗切换
speed	number	1.0	动画速度倍率，建议 0.1–5
amplitude	number	0.1	鼠标偏移幅度（扰动强度），建议 0.01–0.5
mouseReact	boolean	true	是否响应鼠标/触摸（驱动 uMouse）。关闭后固定 (0.5,0.5)，效果保持但不随指针
className	string	—	透传到 canvas 或 fallback 容器

Slots

插槽	类型	说明
fallback	ReactNode	reduced-motion / 无 WebGL 时的静态降级内容

禁忌 / 坑

WebGL 组件，须客户端渲染；color 既收 0..1 的 [r,g,b] 数组也收 CSS 字符串（含 var(--…)/oklch），由组件内部解析。
ogl/WebGL 在 StrictMode 双挂载或 cleanup 时易踩 context 复用毒化坑——改源码时勿 cleanup 调 loseContext 后复用同一 canvas（参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]）；headless 截图无 WebGL 时会走 fallback，视觉验证用真实浏览器。
父容器需 relative + overflow-hidden。

Playground

速度倍率鼠标偏移幅度响应鼠标

Iridescence

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 265)" }}>
  <Iridescence
    speed={1}
    amplitude={0.1}
    mouseReact={true}
  />
  {/* 内容叠在 WebGL canvas 上方 */}
  <div className="absolute inset-0 flex items-center justify-center">
    <h2 className="text-2xl font-bold text-white">Hero Title</h2>
  </div>
</div>

用法

基础用法

Iridescence 是 absolute inset-0 背景层，需放在 relative + overflow-hidden 容器内，内容用 absolute 叠在上方。

Iridescence

tsx

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 265)" }}>
  <Iridescence />
  <div className="absolute inset-0 flex items-center justify-center">
    <span className="text-sm font-medium text-white/80">Iridescence</span>
  </div>
</div>

自定义颜色

color 接受任意 CSS 颜色字符串（hex / oklch / hsl / var(--token)）；不传时自动读 --color-chart-3 跟随主题。

tsx

<Iridescence color="oklch(0.72 0.22 50)" speed={0.8} />

RGB 数组色 · 高速扰动

color 也可传 [r, g, b]（0–1 范围）数组；提高 speed / amplitude 让流动更剧烈。

tsx

<Iridescence color={[0.3, 0.6, 1.0]} speed={1.5} amplitude={0.2} />

壁纸级（关闭鼠标响应）

mouseReact={false} 让 uMouse 固定，配合低 speed 适合做静谧 Hero 背景。

潮汐 Tide

瑚琏组件库 · 企业级 · 高质量

tsx

<div className="relative h-72 overflow-hidden rounded-xl">
  <Iridescence speed={0.3} mouseReact={false} />
  <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
    <p className="text-lg font-semibold text-white">潮汐 Tide</p>
    <p className="text-xs text-white/50">瑚琏组件库 · 企业级 · 高质量</p>
  </div>
</div>

Props

名称	类型	默认	说明
color	`[number, number, number] \| string`	`--color-chart-3`	基础色调。RGB 数组每分量 0..1，或任意 CSS 颜色字符串（hex/oklch/hsl/var）。不传则读主题 token 随明暗切换
speed	number	1.0	动画速度倍率，建议 0.1–5
amplitude	number	0.1	鼠标偏移幅度（扰动强度），建议 0.01–0.5
mouseReact	boolean	true	是否响应鼠标/触摸（驱动 uMouse）。关闭后固定 (0.5,0.5)，效果保持但不随指针
className	string	—	透传到 canvas 或 fallback 容器

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时的静态降级内容

禁忌 / 坑

WebGL 组件，须客户端渲染；color 既收 0..1 的 [r,g,b] 数组也收 CSS 字符串（含 var(--…)/oklch），由组件内部解析。

ogl/WebGL 在 StrictMode 双挂载或 cleanup 时易踩 context 复用毒化坑——改源码时勿 cleanup 调 loseContext 后复用同一 canvas（参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]）；headless 截图无 WebGL 时会走 fallback，视觉验证用真实浏览器。

父容器需 relative + overflow-hidden。

Playground

速度倍率鼠标偏移幅度响应鼠标

Iridescence

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 265)" }}>
  <Iridescence
    speed={1}
    amplitude={0.1}
    mouseReact={true}
  />
  {/* 内容叠在 WebGL canvas 上方 */}
  <div className="absolute inset-0 flex items-center justify-center">
    <h2 className="text-2xl font-bold text-white">Hero Title</h2>
  </div>
</div>

Iridescence

用法

基础用法

自定义颜色

RGB 数组色 · 高速扰动

壁纸级（关闭鼠标响应）

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Iridescence

用法

基础用法

自定义颜色

RGB 数组色 · 高速扰动

壁纸级（关闭鼠标响应）

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground