"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { Color, type ShaderMaterial } from "three";
import { cn } from "@/lib/utils";

const VERTEX = [
  "varying vec3 vNormal;",
  "varying vec3 vPosition;",
  "uniform float uTime;",
  "uniform float uAmplitude;",
  "",
  "float hash(vec3 p) {",
  "  return fract(sin(dot(p, vec3(12.9898, 78.233, 37.719))) * 43758.5453);",
  "}",
  "",
  "float noise(vec3 p) {",
  "  vec3 i = floor(p);",
  "  vec3 f = fract(p);",
  "  f = f * f * (3.0 - 2.0 * f);",
  "  float n = mix(",
  "    mix(mix(hash(i), hash(i + vec3(1,0,0)), f.x), mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),",
  "    mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x), mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y),",
  "    f.z",
  "  );",
  "  return n;",
  "}",
  "",
  "void main() {",
  "  vNormal = normalize(normalMatrix * normal);",
  "  float displacement = noise(position * 1.8 + uTime * 0.35) * uAmplitude;",
  "  vec3 displaced = position + normal * displacement;",
  "  vPosition = displaced;",
  "  gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);",
  "}",
].join("\n");

const FRAGMENT = [
  "precision highp float;",
  "varying vec3 vNormal;",
  "varying vec3 vPosition;",
  "uniform vec3 uTint;",
  "uniform float uTime;",
  "",
  "void main() {",
  "  vec3 normal = normalize(vNormal);",
  "  vec3 viewDir = normalize(-vPosition);",
  "",
  "  // Fresnel rim keeps the silhouette bright without an environment map.",
  "  float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 2.4);",
  "",
  "  vec3 light = normalize(vec3(0.6, 0.9, 0.7));",
  "  float diffuse = max(dot(normal, light), 0.0);",
  "  float spec = pow(max(dot(reflect(-light, normal), viewDir), 0.0), 48.0);",
  "",
  "  // Fake anisotropic banding for a liquid-chrome read.",
  "  float bands = sin(normal.y * 14.0 + uTime * 0.8) * 0.5 + 0.5;",
  "",
  "  vec3 color = mix(uTint * 0.16, uTint, diffuse);",
  "  color += bands * 0.14;",
  "  color += fresnel * 0.85;",
  "  color += spec * 1.1;",
  "",
  "  gl_FragColor = vec4(color, 1.0);",
  "}",
].join("\n");

function Sphere({ tint, amplitude }: { tint: string; amplitude: number }) {
  const ref = React.useRef<ShaderMaterial>(null);

  const uniforms = React.useMemo(
    () => ({
      uTime: { value: 0 },
      uAmplitude: { value: amplitude },
      uTint: { value: new Color(tint) },
    }),
    [tint, amplitude]
  );

  useFrame((_, delta) => {
    if (ref.current) ref.current.uniforms.uTime.value += delta;
  });

  return (
    <mesh>
      <icosahedronGeometry args={[1.35, 64]} />
      <shaderMaterial
        ref={ref}
        vertexShader={VERTEX}
        fragmentShader={FRAGMENT}
        uniforms={uniforms as never}
      />
    </mesh>
  );
}

export function LiquidMetal3D({
  tint = "#a78bfa",
  amplitude = 0.18,
  height = 360,
  className,
}: {
  tint?: string;
  amplitude?: number;
  height?: number;
  className?: string;
}) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0, 4] }} dpr={[1, 2]}>
        <Sphere tint={tint} amplitude={amplitude} />
      </Canvas>
    </div>
  );
}
Related components
