Topographic Lines

"use client";

import type { CSSProperties, ReactNode } from "react";
import { ShaderSurface, sourcePass, type Prepass } from "../_shader-background/ShaderSurface";
import { paletteOf, type ShadeStep } from "../_shader-background/shades";

const TERRAIN = /* glsl */ `
float terrain(vec2 p, float t) {
  // a slow warp bends the landforms into ridges and valleys instead of round blobs
  p += 0.28 * vec2(snoise(vec3(p * 0.45, t * 0.7)), snoise(vec3(p * 0.45 + 7.3, t * 0.7)));
  float h = snoise(vec3(p * 0.9, t)) * 0.62;
  h += snoise(vec3(p * 2.1 + 3.7, t * 1.3)) * 0.26;
  h += snoise(vec3(p * 4.6 - 1.9, t * 1.7)) * 0.1;
  return h * 0.5 + 0.5;
}
`;

// Flat view: contour lines of a slowly shifting landscape, like a survey map. The terrain is three octaves of
// gently warped noise drifting through time; a line is drawn wherever its height crosses a whole
// step, sized in screen px with fwidth so every line keeps one crisp width however steep the
// ground. Every few lines an index line is drawn heavier, with a soft glow on dark pages. Under the
// lines the ground is hill-shaded from the upper left and tinted by height, so the map reads as
// relief rather than flat rings. Where the ground is so steep the lines would crowd into mush they
// fade to their average tone. The pointer raises a hill under it and lights the lines around it,