Aurora

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Aurora curtains — layered ribbons of light, drifting and folding.7 *8 * Depth comes from layering, not from geometry. Several ribbons are summed at9 * different vertical offsets, speeds and thicknesses, and because each is10 * translucent the overlaps brighten where curtains cross. That is what real11 * aurora does, and it is why summing beats drawing one thick band.12 *13 * The noise is a stack of sines rather than a gradient-noise function. Aurora14 * is smooth and low-frequency, so nobody can tell — and it costs a handful of15 * instructions instead of the dozens simplex needs per sample, which matters16 * when the field is sampled once per ribbon per pixel.17 */18 19const VERTEX = `attribute vec2 position;20void main() { gl_Position = vec4(position, 0.0, 1.0); }`;21 22const FRAGMENT = `23precision mediump float;24uniform vec2  uResolution;25uniform float uTime;26uniform vec3  uColorA;27uniform vec3  uColorB;28uniform float uBands;29uniform float uSpread;30uniform float uGlow;31 32/* Layered sines: smooth, cheap, and indistinguishable from noise at this33   frequency. */34float wave(float x, float t, float seed) {35  return sin(x * 1.7 + t + seed) * 0.536       + sin(x * 3.1 - t * 0.7 + seed * 2.0) * 0.2537       + sin(x * 5.3 + t * 0.4 + seed * 3.0) * 0.12;38}39 40void main() {41  vec2 uv = gl_FragCoord.xy / uResolution;42  vec3 colour = vec3(0.0);43 44  /* Fixed loop bound: GLSL ES 1.0 cannot loop to a uniform, so the count is45     compiled in and uBands fades the surplus out instead. */46  for (int i = 0; i < 6; i++) {47    float fi = float(i);48    if (fi >= uBands) break;49 50    float seed = fi * 1.37;51    float centre = 0.5 + wave(uv.x, uTime * (0.18 + fi * 0.05), seed) * uSpread * 0.28;52 53    /* Thicker curtains sit further back, which reads as atmospheric depth. */54    float thickness = 0.035 + fi * 0.02;55    float band = smoothstep(thickness, 0.0, abs(uv.y - centre));56 57    /* Vertical falloff: aurora is bright at the base and dissolves upward. */58    band *= smoothstep(1.0, 0.25, uv.y);59 60    vec3 tint = mix(uColorA, uColorB, fi / max(uBands - 1.0, 1.0));61    colour += tint * band * uGlow;62  }63 64  /* Tone-mapped rather than clamped: overlapping curtains otherwise clip to65     flat white where they cross, losing exactly the detail layering created. */66  colour = colour / (1.0 + colour);67  gl_FragColor = vec4(colour, 1.0);68}`;69 70function compile(gl: WebGLRenderingContext, type: number, src: string) {71  const s = gl.createShader(type);72  if (!s) return null;73  gl.shaderSource(s, src);74  gl.compileShader(s);75  return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;76}77 78function toRgb(hex: string): [number, number, number] {79  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());80  if (!m) return [0, 0, 0];81  const n = parseInt(m[1], 16);82  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];83}84 85export interface AuroraProps {86  colorA?: string;87  colorB?: string;88  /** Curtains, up to 6 (the shader's compiled loop bound). */89  bands?: number;90  speed?: number;91  /** Vertical travel of each curtain. */92  spread?: number;93  /** Brightness before tone mapping. */94  glow?: number;95  still?: boolean;96  className?: string;97}98 99export function Aurora({100  colorA = "#c3f53c",101  colorB = "#2b8cff",102  bands = 5,103  speed = 1,104  spread = 1,105  glow = 1,106  still = false,107  className = "",108}: AuroraProps) {109  const ref = useRef<HTMLCanvasElement>(null);110 111  useEffect(() => {112    const canvas = ref.current;113    if (!canvas) return;114    const gl = canvas.getContext("webgl", { alpha: false, antialias: false });115    if (!gl) return;116 117    const vs = compile(gl, gl.VERTEX_SHADER, VERTEX);118    const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);119    if (!vs || !fs) return;120    const program = gl.createProgram();121    if (!program) return;122    gl.attachShader(program, vs);123    gl.attachShader(program, fs);124    gl.linkProgram(program);125    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;126    gl.useProgram(program);127 128    const buffer = gl.createBuffer();129    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);130    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);131    const position = gl.getAttribLocation(program, "position");132    gl.enableVertexAttribArray(position);133    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);134 135    const uniform = (n: string) => gl.getUniformLocation(program, n);136    const uResolution = uniform("uResolution");137    const uTime = uniform("uTime");138    gl.uniform3fv(uniform("uColorA"), toRgb(colorA));139    gl.uniform3fv(uniform("uColorB"), toRgb(colorB));140    gl.uniform1f(uniform("uBands"), Math.max(1, Math.min(6, bands)));141    gl.uniform1f(uniform("uSpread"), spread);142    gl.uniform1f(uniform("uGlow"), glow);143 144    const reduced =145      still ||146      (typeof matchMedia === "function" &&147        matchMedia("(prefers-reduced-motion: reduce)").matches);148 149    let uw = 0;150    let uh = 0;151    const resize = () => {152      const dpr = Math.min(devicePixelRatio || 1, 2);153      const w = Math.floor(canvas.clientWidth * dpr);154      const h = Math.floor(canvas.clientHeight * dpr);155      if (!w || !h || (w === uw && h === uh)) return;156      uw = w;157      uh = h;158      canvas.width = w;159      canvas.height = h;160      gl.viewport(0, 0, w, h);161      gl.uniform2f(uResolution, w, h);162    };163 164    const start = performance.now();165    const draw = (now: number) => {166      resize();167      gl.uniform1f(uTime, ((now - start) / 1000) * speed);168      gl.drawArrays(gl.TRIANGLES, 0, 3);169    };170 171    let frame = 0;172    const loop = (now: number) => {173      draw(now);174      frame = requestAnimationFrame(loop);175    };176 177    draw(reduced ? start + 4000 : start);178    if (!reduced) frame = requestAnimationFrame(loop);179 180    const observer = new ResizeObserver(() => {181      resize();182      if (reduced) draw(start + 4000);183    });184    observer.observe(canvas);185 186    return () => {187      cancelAnimationFrame(frame);188      observer.disconnect();189      gl.deleteProgram(program);190      gl.deleteShader(vs);191      gl.deleteShader(fs);192      gl.deleteBuffer(buffer);193    };194  }, [colorA, colorB, bands, speed, spread, glow, still]);195 196  return <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />;197}198