Topography

"use client";

/**
 * Topography — contour lines of a landscape that slowly breathes.
 *
 * Self-contained: three, @react-three/fiber. One fragment shader:
 * layered noise for the terrain, hairlines where it crosses each
 * level. Reads as a survey map; sits under text at any size.
 *
 *   <Topography line="#e4a256" ground="#0b0908" levels={18} speed={0.4} />
 */
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useMemo, useRef } from "react";
import { Color, Vector2, type ShaderMaterial } from "three";

export type TopographyProps = {
  line?: string;
  ground?: string;
  /** Number of contour levels. */
  levels?: number;
  speed?: number;
  className?: string;
};

const vertex = /* glsl */ `
  varying vec2 vUv;
  void main() { vUv = uv; gl_Position = vec4(position, 1.0); }
`;

const fragment = /* glsl */ `
  precision highp float;
  varying vec2 vUv;
  uniform float uTime;
  uniform float uLevels;
  uniform vec2 uAspect;
  uniform vec2 uPointer;
  uniform vec3 uLine;
  uniform vec3 uGround;

  vec2 hash(vec2 p) {
    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
    return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
  }
  float noise(vec2 p) {
    vec2 i = floor(p); vec2 f = fract(p);
    vec2 u = f * f * (3.0 - 2.0 * f);
    return mix(
      mix(dot(hash(i), f), dot(hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
      mix(dot(hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), dot(hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),
      u.y);
  }
  float fbm(vec2 p) {
    float v = 0.0; float a = 0.5;
    for (int i = 0; i < 4; i++) { v += a * noise(p); p = p * 2.1 + 3.3; a *= 0.5; }
    return v;
  }

  void main() {
    vec2 p = vUv * uAspect * 2.4;
    float t = uTime * 0.08;
    float h = fbm(p + vec2(t, -t * 0.6)) * 0.5 + 0.5;
    // A hill rises under the pointer.
    float d = distance(vUv * uAspect, uPointer * uAspect);
    h += exp(-d * d * 12.0) * 0.35;

    float level = h * uLevels;
    // Anti-aliased hairline at every integer level.
    float dist = min(fract(level), 1.0 - fract(level));
    float width = fwidth(level) * 0.9 + 0.012;
    float lineMask = 1.0 - smoothstep(0.0, width, dist);
    // Every fifth line heavier, as on a real map.
    float index = floor(level);
    float heavy = mod(index, 5.0) < 0.5 ? 0.45 : 0.0;
    float alpha = lineMask * (0.42 + heavy);

    vec3 col = mix(uGround, uLine, alpha);
    // Faint fill on the higher ground so the shape reads.
    col = mix(col, uLine, smoothstep(0.55, 1.0, h) * 0.06);
    gl_FragColor = vec4(col, 1.0);
  }
`;

function Plane({ line, ground, levels, speed }: Required<Omit<TopographyProps, "className">>) {
  const material = useRef<ShaderMaterial>(null);
  const size = useThree((state) => state.size);
  const pointer = useThree((state) => state.pointer);
  const uniforms = useMemo(
    () => ({
      uTime: { value: 0 },
      uLevels: { value: levels },
      uAspect: { value: new Vector2(1, 1) },
      uPointer: { value: new Vector2(-10, -10) },
      uLine: { value: new Color(line) },
      uGround: { value: new Color(ground) },
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  useFrame((_, delta) => {
    if (!material.current) return;
    const u = material.current.uniforms;
    u.uTime.value += delta * speed;
    u.uLevels.value = levels;
    u.uAspect.value.set(size.width / size.height, 1);
    u.uPointer.value.set(pointer.x * 0.5 + 0.5, pointer.y * 0.5 + 0.5);
    u.uLine.value.set(line);
    u.uGround.value.set(ground);
  });
  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial ref={material} vertexShader={vertex} fragmentShader={fragment} uniforms={uniforms} />
    </mesh>
  );
}

export function Topography({ line = "#e4a256", ground = "#0b0908", levels = 18, speed = 0.4, className = "" }: TopographyProps) {
  return (
    <div className={className} style={{ width: "100%", height: "100%", minHeight: 240 }}>
      <Canvas dpr={[1, 2]} gl={{ antialias: false, preserveDrawingBuffer: true }} orthographic camera={{ position: [0, 0, 1] }}>
        <Plane line={line} ground={ground} levels={Math.round(levels)} speed={speed} />
      </Canvas>
    </div>
  );
}

export default Topography;