Function LiquidChrome

components/liquid-chrome.tsx:16–209

({
  baseColor = [0.1, 0.1, 0.1],
  speed = 0.2,
  amplitude = 0.5,
  frequencyX = 3,
  frequencyY = 2,
  interactive = true,
  opacity = 1,
  ...props
})

}

export const LiquidChrome: React.FC<LiquidChromeProps> = ({
  baseColor = [0.1, 0.1, 0.1],
  speed = 0.2,
  amplitude = 0.5,
  frequencyX = 3,
  frequencyY = 2,
  interactive = true,
  opacity = 1,
  ...props
}) => {
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const container = containerRef.current;

    const canvas = document.createElement("canvas");
    const glContext =
      canvas.getContext("webgl2", {
        alpha: true,
        antialias: true,
        preserveDrawingBuffer: true,
      }) ||
      canvas.getContext("webgl", {
        alpha: true,
        antialias: true,
        preserveDrawingBuffer: true,
      });
    if (!glContext) return;

    const renderer = new Renderer({
      canvas,
      antialias: true,
      alpha: true,
      webgl: 2,
    });
    const gl = renderer.gl;
    gl.clearColor(0, 0, 0, 0);
    const opacityClamped = Math.max(0, Math.min(1, opacity));

    const vertexShader = `
      attribute vec2 position;
      attribute vec2 uv;
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = vec4(position, 0.0, 1.0);
      }
    `;

    const fragmentShader = `
      precision highp float;
      uniform float uTime;
      uniform vec3 uResolution;
      uniform vec3 uBaseColor;
      uniform float uAmplitude;
      uniform float uFrequencyX;