Aurora

"use client";

/**
 * Aurora — a slow, folded gradient background in three colours.
 *
 * Self-contained: three, @react-three/fiber. One fragment shader on a
 * full-screen plane; no textures, no assets.
 *
 *   <Aurora colorA="#c35a2c" colorB="#1b1512" colorC="#f5cb73" speed={0.5} />
 */
import { Canvas, useFrame } from "@react-three/fiber";
import { useMemo, useRef } from "react";
import { Color, type ShaderMaterial } from "three";

export type AuroraProps = {
  colorA?: string;
  colorB?: string;
  colorC?: string;
  speed?: number;
  className?: string;
};

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

// Simplex-style value noise, folded twice, so the gradient looks like
// bands of light rather than a blurred blob.
const fragment = /* glsl */ `
  precision highp float;
  varying vec2 vUv;
  uniform float uTime;
  uniform vec3 uA;
  uniform vec3 uB;
  uniform vec3 uC;

  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 + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)), 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
    );
  }

  void main() {
    vec2 p = vUv * vec2(2.2, 1.4);
    float t = uTime * 0.12;
    float n1 = noise(p * 1.6 + vec2(t, -t * 0.7));
    float n2 = noise(p * 3.1 - vec2(t * 0.5, t));
    float band = sin((vUv.y + n1 * 0.35 + n2 * 0.12) * 6.0 + t * 2.0);
    float band2 = sin((vUv.y * 1.7 - n2 * 0.5 + n1 * 0.2) * 9.0 - t * 3.0);
    float m = smoothstep(-0.7, 0.7, band) * 0.75 + smoothstep(-0.4, 0.9, band2) * 0.25;
    vec3 col = mix(uB, uA, m);
    float glow = smoothstep(0.2, 1.0, n1 * 0.5 + 0.5) * smoothstep(0.0, 0.6, 1.0 - vUv.y);
    col = mix(col, uC, glow * 0.85);
    col += uC * pow(max(0.0, band2), 6.0) * 0.18;
    // Vignette so it sits under text.
    float v = smoothstep(1.3, 0.3, distance(vUv, vec2(0.5)));
    col *= 0.65 + 0.35 * v;
    gl_FragColor = vec4(col, 1.0);
  }
`;

function Plane({ colorA, colorB, colorC, speed }: Required<Omit<AuroraProps, "className">>) {
  const material = useRef<ShaderMaterial>(null);
  const uniforms = useMemo(
    () => ({
      uTime: { value: 0 },
      uA: { value: new Color(colorA) },
      uB: { value: new Color(colorB) },
      uC: { value: new Color(colorC) },
    }),
    // Uniform objects are created once; colours are written below.
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );

  useFrame((_, delta) => {
    if (!material.current) return;
    material.current.uniforms.uTime.value += delta * speed;
    material.current.uniforms.uA.value.set(colorA);
    material.current.uniforms.uB.value.set(colorB);
    material.current.uniforms.uC.value.set(colorC);
  });

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

export function Aurora({
  colorA = "#c35a2c",
  colorB = "#1b1512",
  colorC = "#f5cb73",
  speed = 0.5,
  className = "",
}: AuroraProps) {
  return (
    <div className={className} style={{ width: "100%", height: "100%", minHeight: 240 }}>
      <Canvas dpr={[1, 1.5]} gl={{ antialias: false, preserveDrawingBuffer: true }} orthographic camera={{ position: [0, 0, 1] }}>
        <Plane colorA={colorA} colorB={colorB} colorC={colorC} speed={speed} />
      </Canvas>
    </div>
  );
}

export default Aurora;