LiquidChrome

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

全状态

default（chart-2 token · 鼠标互动）

baseColor 数组 · 深蓝金属

baseColor 数组 · 暗铜金

高振幅 · 快速（amplitude=0.9, speed=0.45）

非交互（interactive=false）

Liquid Chrome

WebGL 液态铬金属流动背景

tall hero（做 demo 背景层）

静态金属渐变 fallback

reduced-motion fallback（静态渐变）

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>