Aurora Borealis Aurora Curtains

/*
  Flux Shader Background (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

  package.json (dependencies):
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "three": "^0.185.1",
    "@react-three/fiber": "^9.0.0"

  Next.js App Router: add "use client" as the first line of this file.
  Render <FluxBackground /> 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 hh=abs(x)-0.5; vec3 ox=floor(x+0.5); vec3 a0=x-ox;
  m*=1.79284291-0.85373472*(a0*a0+hh*hh);
  vec3 g; g.x=a0.x*x0.x+hh.x*x0.y; g.yz=a0.yz*x12.xz+hh.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 uv=(vUv-0.5); uv.x*=uResolution.x/uResolution.y;
  float t=uTime*0.1040;
  float band=uv.y*3.0+fbm(uv*vec2(1.4,3.0)+vec2(t,0.0))*2.2;
  float n=0.5+0.5*sin(band*3.14159);
  vec3 c1=mix(vec3(0.012,0.031,0.039),vec3(0.937,0.976,0.973),uLight); vec3 c2=mix(vec3(0.204,0.827,0.600),vec3(0.016,0.471,0.341),uLight); vec3 c3=mix(vec3(0.133,0.827,0.933),vec3(0.055,0.455,0.565),uLight); vec3 c4=mix(vec3(0.506,0.549,0.973),vec3(0.263,0.220,0.792),uLight);
  vec3 col=mix(c1,c2,smoothstep(0.2,0.6,n));
  col=mix(col,c3,smoothstep(0.55,0.8,n)*0.75);
  col=mix(col,c4,smoothstep(0.75,1.0,n)*0.7);
  // Falls off toward the palette base (c1) rather than toward black, so the
  // light scheme gets a frame instead of grey corners on white paper.
  col=mix(col,c1,0.45*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) {
      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 FluxBackground() {
  return (
    <Canvas style={{ position: "absolute", inset: 0 }} orthographic camera={{ position: [0, 0, 1], zoom: 1 }} dpr={[1, 2]}>
      <Plane />
    </Canvas>
  );
}