Liquid Chrome

/**
 * ============================================================================
 * LIQUID CHROME COMPONENT
 * ============================================================================
 *
 * Interactive metallic surface with dynamic wave distortions.
 * Perfect for hero sections and landing pages.
 *
 * INSTALLATION:
 * 1. Create file: components/LiquidChrome.tsx
 * 2. Paste this entire code block
 * 3. Import: const LiquidChrome = dynamic(() => import("@/components/LiquidChrome"), { ssr: false })
 *
 * ============================================================================
 * PROPS REFERENCE
 * ============================================================================
 *
 * | Prop             | Type    | Default | Description                      |
 * |------------------|---------|---------|----------------------------------|
 * | textureUrl       | string  | gradient| Background image/gradient URL    |
 * | chromeIntensity  | number  | 0.8     | Metallic look (0-1)              |
 * | surfaceSmoothness| number  | 0.2     | Surface polish (0=shiny, 1=matte)|
 * | waveIntensity    | number  | 6       | Ripple strength (1-15)           |
 * | enableRipples    | boolean | false   | Rain drop effect                 |
 * | className        | string  | ""      | Additional CSS classes           |
 *
 * ============================================================================
 * COMMON CUSTOMIZATIONS
 * ============================================================================
 *
 * // More metallic/shiny
 * <LiquidChrome chromeIntensity={0.95} surfaceSmoothness={0.1} />
 *
 * // Matte liquid
 * <LiquidChrome chromeIntensity={0.4} surfaceSmoothness={0.7} />
 *
 * // Stronger waves
 * <LiquidChrome waveIntensity={12} />
 *
 * // With rain effect
 * <LiquidChrome enableRipples={true} />
 *
 * // Custom texture
 * <LiquidChrome textureUrl="/my-gradient.jpg" />
 *
 * // Full screen hero
 * <div className="h-screen relative">
 *   <LiquidChrome className="absolute inset-0" />
 *   <div className="relative z-10">Your content</div>
 * </div>
 *
 * ============================================================================
 * SOURCE CODE
 * ============================================================================
 */

"use client";

import React, { useEffect, useRef } from "react";

export interface LiquidChromeProps {
  textureUrl?: string;
  chromeIntensity?: number;
  surfaceSmoothness?: number;
  waveIntensity?: number;
  enableRipples?: boolean;
  className?: string;
}

const DEFAULT_TEXTURE =
  "https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1200&q=80";

const CDN_URL =
  "https://cdn.jsdelivr.net/npm/threejs-components@0.0.27/build/backgrounds/liquid1.min.js";

export default function LiquidChrome({
  textureUrl = DEFAULT_TEXTURE,
  chromeIntensity = 0.8,
  surfaceSmoothness = 0.2,
  waveIntensity = 6,
  enableRipples = false,
  className = "",
}: LiquidChromeProps) {
  const canvasElement = useRef<HTMLCanvasElement>(null);
  const liquidEngine = useRef<any>(null);
  const isInitialized = useRef(false);

  useEffect(() => {
    const canvas = canvasElement.current;
    if (!canvas || isInitialized.current) return;

    const loadAndInit = async () => {
      try {
        const module = await (Function(
          'return import("' + CDN_URL + '")'
        )() as Promise<any>);

        const LiquidEngine = module.default;
        const engine = LiquidEngine(canvas);
        liquidEngine.current = engine;
        isInitialized.current = true;

        engine.loadImage(textureUrl);
        engine.liquidPlane.material.metalness = chromeIntensity;
        engine.liquidPlane.material.roughness = surfaceSmoothness;
        engine.liquidPlane.uniforms.displacementScale.value = waveIntensity;
        engine.setRain(enableRipples);
      } catch (error) {
        console.error("LiquidChrome: Failed to initialize", error);
      }
    };

    loadAndInit();

    return () => {
      if (liquidEngine.current?.dispose) {
        liquidEngine.current.dispose();
        liquidEngine.current = null;
        isInitialized.current = false;
      }
    };
  }, [textureUrl, chromeIntensity, surfaceSmoothness, waveIntensity, enableRipples]);

  return (
    <div
      className={`liquid-chrome-container ${className}`}
      style={{ position: "relative", width: "100%", height: "100%" }}
    >
      <canvas
        ref={canvasElement}
        className="liquid-chrome-canvas"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          touchAction: "none",
        }}
      />
    </div>
  );
}

export { LiquidChrome };

// ============================================================================
// USAGE EXAMPLES
// ============================================================================

// Example 1: Full screen hero
// <div className="relative h-screen" style={{ backgroundColor: "#0a1628" }}>
//   <LiquidChrome className="absolute inset-0" />
//   <div className="relative z-10 flex items-center justify-center h-full">
//     <h1 className="text-6xl font-bold text-white">Welcome</h1>
//   </div>
// </div>

// Example 2: Card background
// <div className="w-[400px] h-[300px] rounded-xl overflow-hidden">
//   <LiquidChrome chromeIntensity={0.9} waveIntensity={8} />
// </div>

// Example 3: With rain effect
// <LiquidChrome enableRipples={true} />