Iridescence
iridescenceProduces a shifting pearlescent WebGL color field with pointer response.
Usage
Basic usage
Iridescence is the background layer of absolute inset-0, which needs to be placed in the relative + overflow-hidden container, and the content is stacked on top with absolute.
<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>Custom color
color accepts any CSS color string (hex / oklch / hsl / var(--token)); automatically read when not passed --color-chart-3 Follow the topic.
<Iridescence color="oklch(0.72 0.22 50)" speed={0.8} />RGB array color · high speed disturbance
color can also pass [r, g, b] (0–1 range) array; increase speed / amplitude to make the flow more intense.
<Iridescence color={[0.3, 0.6, 1.0]} speed={1.5} amplitude={0.2} />Wallpaper level (turn off mouse response)
mouseReact={false} Let uMouse be fixed, and with low speed it is suitable for quiet Hero background.
Tide
Hulian component library · Enterprise level · High quality
<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">Hulian component library · Enterprise level · High quality</p>
</div>
</div>When to Use
Use it when you need a continuous spectrum/oil film-like iridescent glossy background, and want pointer optical flow disturbance interaction. Based on WebGL/ogl, it has GPU overhead and does not come with WebGL fallback; it is a WebGL texture background like Silk, Silk is more silky flowing, and this component is more iridescent spectrum interference; if you don’t want to introduce WebGL, use pure CSS Aurora.
Import
import { Iridescence } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | [number, number, number] | string | --color-chart-3 | Base tint as a 0–1 RGB tuple or CSS color. When omitted, the component reads the theme chart token |
| speed | number | 1.0 | Animation speed magnification, recommended 0.1–5 |
| amplitude | number | 0.1 | Pointer offset amplitude (disturbance intensity), recommended 0.01–0.5 |
| mouseReact | boolean | true | Responds to pointer and touch through uPointer; when false, the coordinate stays at (0.5, 0.5) |
| className | string | — | Forwarded to canvas or fallback container |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static fallback content without WebGL |
Usage Guidelines
- WebGL component, which must be rendered by the client;
colorreceives both the[r,g,b]array of 0..1 and the CSS string (includingvar(--…)/oklch), which is parsed internally by the component. - ogl/WebGL is easy to step into the context reuse poison pit when double mounting in StrictMode or cleanup - when changing the source code, do not cleanup and adjust
loseContextand then reuse the same canvas (see [[webgl-canvas-loseContext-poisons-strictmode-remount]]); headless screenshots will fallback when there is no WebGL, use a real browser for visual verification. - The parent container requires
relative+overflow-hidden.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<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}
/>
{/* Content is stacked on top of 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>