LiquidChrome

liquid-chrome

液态铬背景 · WebGL/ogl 金属流动反光 + 鼠标涟漪 + chart token 基色 + 静态金属渐变 fallback

用法

基础用法

LiquidChrome 自身 absolute inset-0 铺满，需放在 relative + overflow-hidden 容器内；默认读 --color-chart-2 跟随主题。

tsx

<div className="relative h-48 overflow-hidden rounded-xl">
  <LiquidChrome />
</div>

自定义金属色

baseColor 可传 [r,g,b]（0–1）数组或 CSS 颜色字符串，调出深蓝/暗铜等金属质感。

tsx

<LiquidChrome baseColor={[0.18, 0.1, 0.03]} speed={0.25} amplitude={0.7} />

高振幅快速 · 非交互

interactive={false} 关闭鼠标涟漪；提高 amplitude / speed 让液面更剧烈。

tsx

<LiquidChrome interactive={false} amplitude={0.9} speed={0.45} frequencyX={3.5} frequencyY={2.5} />

作为 Hero 背景层

拉高容器，内容用 z-10 叠在液态背景上。

Liquid Chrome

WebGL 液态铬金属流动背景

tsx

<div className="relative h-72 overflow-hidden rounded-xl">
  <LiquidChrome speed={0.18} amplitude={0.55} />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
    <p className="text-2xl font-bold text-white drop-shadow-md">Liquid Chrome</p>
    <p className="text-sm text-white/70 drop-shadow">WebGL 液态铬金属流动背景</p>
  </div>
</div>

何时用

需要一层铺满区域、缓慢流动的液态金属/铬反光背景（hero、登录页、卡片底）时用。它 absolute inset-0 铺满父容器，是背景层而非焦点元素。若要的是聚焦视线、随指针交互的发光能量球用 Orb；只要静态、零成本的几何底纹用 DotPattern / GridPattern / StripedPattern。

导入

import { LiquidChrome } from "@hulianui/ui"

Props

名称	类型	默认	说明
baseColor	`[number, number, number] \| string`	`var(--color-chart-2)`	液态铬基础色。`[r,g,b]` 为 0..1 浮点数组（兼容 react-bits 原版），或任意 CSS 颜色串；默认读 chart-2 token 跟随明暗主题
speed	`number`	`0.2`	流动速度乘子，越大越快
amplitude	`number`	`0.6`	波形振幅（0 平静 → 1 强烈），控制液面扭曲幅度
frequencyX	`number`	`2.5`	X 方向空间频率
frequencyY	`number`	`1.5`	Y 方向空间频率
interactive	`boolean`	`true`	是否响应鼠标 / 触摸推动液面涟漪
className	`string`	—	透传到 canvas（正常）或 fallback div（降级）的 className

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时叠加在金属渐变背景上的静态内容

禁忌 / 坑

WebGL 组件，须客户端渲染；SSR / 无 WebGL / reduced-motion 时降级为静态金属渐变 fallback，注意首屏视觉差异。
cleanup 别调 loseContext 毒化 canvas，否则 StrictMode 双挂载复用 canvas 会崩成空白——参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]，每次挂载新建 canvas。
自身 absolute inset-0，父容器必须 position:relative 且有确定高度，否则不可见；内容叠加层记得加 relative z-10。
传 baseColor 字符串走 CSS 颜色解析，喂裸 var(--primary) 可能不解析，token 需带 --color- 前缀——参见 [[hulian-token-color-var-needs-color-prefix]]。

Playground

speedamplitudefrequencyXfrequencyYinteractive

<div className="relative h-64 overflow-hidden rounded-xl">
  <LiquidChrome
    speed={0.2}
    amplitude={0.6}
    frequencyX={2.5}
    frequencyY={1.5}
    interactive={true}
  />
  {/* 内容层（z-10 叠加在背景上）*/}
  <div className="relative z-10 flex h-full items-center justify-center">
    <p className="text-white text-xl font-bold">Your Content</p>
  </div>
</div>

用法

基础用法

LiquidChrome 自身 absolute inset-0 铺满，需放在 relative + overflow-hidden 容器内；默认读 --color-chart-2 跟随主题。

tsx

<div className="relative h-48 overflow-hidden rounded-xl">
  <LiquidChrome />
</div>

自定义金属色

baseColor 可传 [r,g,b]（0–1）数组或 CSS 颜色字符串，调出深蓝/暗铜等金属质感。

tsx

<LiquidChrome baseColor={[0.18, 0.1, 0.03]} speed={0.25} amplitude={0.7} />

高振幅快速 · 非交互

interactive={false} 关闭鼠标涟漪；提高 amplitude / speed 让液面更剧烈。

tsx

<LiquidChrome interactive={false} amplitude={0.9} speed={0.45} frequencyX={3.5} frequencyY={2.5} />

作为 Hero 背景层

拉高容器，内容用 z-10 叠在液态背景上。

Liquid Chrome

WebGL 液态铬金属流动背景

tsx

<div className="relative h-72 overflow-hidden rounded-xl">
  <LiquidChrome speed={0.18} amplitude={0.55} />
  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
    <p className="text-2xl font-bold text-white drop-shadow-md">Liquid Chrome</p>
    <p className="text-sm text-white/70 drop-shadow">WebGL 液态铬金属流动背景</p>
  </div>
</div>

何时用

Props

名称	类型	默认	说明
baseColor	`[number, number, number] \| string`	`var(--color-chart-2)`	液态铬基础色。`[r,g,b]` 为 0..1 浮点数组（兼容 react-bits 原版），或任意 CSS 颜色串；默认读 chart-2 token 跟随明暗主题
speed	`number`	`0.2`	流动速度乘子，越大越快
amplitude	`number`	`0.6`	波形振幅（0 平静 → 1 强烈），控制液面扭曲幅度
frequencyX	`number`	`2.5`	X 方向空间频率
frequencyY	`number`	`1.5`	Y 方向空间频率
interactive	`boolean`	`true`	是否响应鼠标 / 触摸推动液面涟漪
className	`string`	—	透传到 canvas（正常）或 fallback div（降级）的 className

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时叠加在金属渐变背景上的静态内容

禁忌 / 坑

WebGL 组件，须客户端渲染；SSR / 无 WebGL / reduced-motion 时降级为静态金属渐变 fallback，注意首屏视觉差异。

cleanup 别调 loseContext 毒化 canvas，否则 StrictMode 双挂载复用 canvas 会崩成空白——参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]，每次挂载新建 canvas。

自身 absolute inset-0，父容器必须 position:relative 且有确定高度，否则不可见；内容叠加层记得加 relative z-10。

传 baseColor 字符串走 CSS 颜色解析，喂裸 var(--primary) 可能不解析，token 需带 --color- 前缀——参见 [[hulian-token-color-var-needs-color-prefix]]。

Playground

speedamplitudefrequencyXfrequencyYinteractive

<div className="relative h-64 overflow-hidden rounded-xl">
  <LiquidChrome
    speed={0.2}
    amplitude={0.6}
    frequencyX={2.5}
    frequencyY={1.5}
    interactive={true}
  />
  {/* 内容层（z-10 叠加在背景上）*/}
  <div className="relative z-10 flex h-full items-center justify-center">
    <p className="text-white text-xl font-bold">Your Content</p>
  </div>
</div>

LiquidChrome

用法

基础用法

自定义金属色

高振幅快速 · 非交互

作为 Hero 背景层

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

LiquidChrome

用法

基础用法

自定义金属色

高振幅快速 · 非交互

作为 Hero 背景层

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground