Rose Noir Ridges

/*
 * Terrain (React + react-three-fiber, GLSL)
 *
 * Setup with Vite:
 *   npm create vite@latest my-app -- --template react-ts
 *   cd my-app
 *   npm i three @react-three/fiber
 *
 * Next.js App Router: add "use client" as the first line of the file.
 * Render <SceneBackground /> inside a container with position: relative.
 */
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useEffect, useMemo, useRef, useState } from "react";
import * as THREE from "three";

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

const fragmentShader = `precision highp float;
varying vec2 vUv;
uniform float uTime;
uniform vec2 uResolution;
uniform float uLight;
vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}
vec2 mod289(vec2 x){return x-floor(x*(1.0/289.0))*289.0;}
vec3 permute(vec3 x){return mod289(((x*34.0)+1.0)*x);}
float snoise(vec2 v){
  const vec4 C=vec4(0.211324865,0.366025403,-0.577350269,0.024390243);
  vec2 i=floor(v+dot(v,C.yy));
  vec2 x0=v-i+dot(i,C.xx);
  vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
  vec4 x12=x0.xyxy+C.xxzz; x12.xy-=i1;
  i=mod289(i);
  vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
  vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
  m=m*m; m=m*m;
  vec3 x=2.0*fract(p*C.www)-1.0;
  vec3 h=abs(x)-0.5;
  vec3 ox=floor(x+0.5);
  vec3 a0=x-ox;
  m*=1.79284291-0.85373472*(a0*a0+h*h);
  vec3 g;
  g.x=a0.x*x0.x+h.x*x0.y;
  g.yz=a0.yz*x12.xz+h.yz*x12.yw;
  return 130.0*dot(m,g);
}
float fbm(vec2 p){
  float v=0.0, a=0.5;
  for(int i=0;i<5;i++){ v+=a*snoise(p); p*=2.0; a*=0.5; }
  return v;
}
void main(){
  vec2 uv01=vUv;
  vec2 uv=(vUv-0.5);
  uv.x*=uResolution.x/uResolution.y;
  float t=uTime*0.1400;
  vec3 c0=mix(vec3(0.039,0.016,0.024),vec3(0.992,0.957,0.965),uLight);
  vec3 c1=mix(vec3(0.984,0.443,0.522),vec3(0.745,0.071,0.235),uLight);
  vec3 c2=mix(vec3(0.957,0.247,0.369),vec3(0.624,0.071,0.224),uLight);
  vec3 c3=mix(vec3(0.992,0.643,0.686),vec3(0.882,0.114,0.282),uLight);
  vec3 col=c0;
  float n=1.0-abs(fbm(uv*2.2+vec2(t*0.5,-t*0.3)));
  n=pow(n,2.4);
  vec3 cc=mix(c1,c2,smoothstep(0.35,0.9,n));
  cc=mix(cc,c3,smoothstep(0.82,1.0,n));
  col=mix(c0,cc,smoothstep(0.15,0.95,n));
  col=mix(col,c0,0.40*dot(uv,uv));
  gl_FragColor=vec4(col,1.0);
}`;

/** 1 in light mode, 0 in dark. The shader mixes both palettes on it. */
function useLightScheme() {
  const [light, setLight] = useState(false);
  useEffect(() => {
    const mq = matchMedia("(prefers-color-scheme: light)");
    const sync = () => setLight(mq.matches);
    sync();
    mq.addEventListener("change", sync);
    return () => mq.removeEventListener("change", sync);
  }, []);
  return light;
}

function Plane() {
  const mat = useRef<THREE.ShaderMaterial>(null);
  const { size } = useThree();
  const light = useLightScheme();
  const uniforms = useMemo(
    () => ({
      uTime: { value: 0 },
      uResolution: { value: new THREE.Vector2(size.width, size.height) },
      uLight: { value: 0 },
    }),
    [],
  );

  useFrame((state) => {
    if (!mat.current) return;
    mat.current.uniforms.uTime.value = state.clock.elapsedTime;
    mat.current.uniforms.uResolution.value.set(size.width, size.height);
    // Eased rather than snapped, so a scheme flip crossfades.
    const u = mat.current.uniforms.uLight;
    u.value += ((light ? 1 : 0) - u.value) * 0.08;
  });

  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial
        ref={mat}
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
        uniforms={uniforms}
      />
    </mesh>
  );
}

export function SceneBackground() {
  return (
    <Canvas
      style={{ position: "absolute", inset: 0 }}
      orthographic
      camera={{ position: [0, 0, 1], zoom: 1 }}
      dpr={[1, 2]}
    >
      <Plane />
    </Canvas>
  );
}