Iridescence

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

Iridescence

全状态

Iridescence

default（深色底 · 默认参数）

浅色底

自定义色（暖橙 CSS 字符串）

自定义色（RGB 数组 · 冷蓝）

speed=3 · amplitude=0.4

高速 · 强鼠标扰动

潮汐 Tide

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

低速 · 关闭鼠标（壁纸级）

静态降级（无 WebGL / reduced-motion）

reduced-motion fallback（静态虹彩渐变）

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>