Aurora

"use client";

import { ShaderSurface, type ShaderBackgroundProps } from "../_shader-background/ShaderSurface";

// Three soft curtains of light, each a slow wavy band that fades upward and brightens and dims in
// broad folds along its length. On dark pages the light adds up like a glow; on light pages it's laid
// on like thin ink, so it stays visible against white. The curtains lean toward the pointer.
const SHADER = /* glsl */ `
uniform float u_intensity; // brightness of the light
uniform float u_height;    // where the curtains sit, 0 bottom .. 1 top
uniform float u_spread;    // how far the light reaches upward
uniform float u_layers;    // number of curtains, 1..5
uniform float u_wave;      // how much the curtains undulate
uniform float u_stretch;   // horizontal size of the waves
uniform float u_lean;      // how strongly the curtains lean toward the pointer

vec3 shade(vec2 frag) {
  float aspect = u_res.x / u_res.y;
  vec2 uv = frag / u_res;
  float x = uv.x * aspect;
  float t = u_time * 0.09;

  vec2 m = u_pointer / u_res;
  float near = exp(-pow((x - m.x * aspect) * 2.4, 2.0)) * u_pointerAmt * u_lean;
  float xs = x / u_stretch;

  vec3 bg = oklabToLinear(u_bg);
  vec3 glow = vec3(0.0);
  vec3 ink = bg;

  for (int i = 0; i < 5; i++) {
    float fi = float(i);
    if (fi >= u_layers) break;
    float y0 = u_height - 0.07 * fi
      + u_wave * 0.11 * snoise(vec3(xs * 0.8 + fi * 3.1, t, fi))
      + u_wave * 0.04 * snoise(vec3(xs * 2.2, t * 1.6, fi + 4.0));
    y0 = mix(y0, m.y - 0.06, near * 0.3);
    float d = uv.y - y0;
    float reach = u_spread * (0.75 + 0.3 * fi);
    float curtain = d > 0.0 ? exp(-d / reach) : exp(-d * d * 90.0);

    // broad folds along the curtain, wide enough to read as one blended sheet
    float fold = 0.55 + 0.45 * snoise(vec3(xs * 1.1 + fi * 5.0, t * 0.8, fi + 2.0));
    float a = curtain * fold * max(1.0 - 0.18 * fi, 0.25);

    float hue = xs * 0.16 + t * 0.35 + fi * 0.33 + 0.08 * snoise(vec3(xs * 0.7, t, fi + 9.0));
    vec3 c = oklabToLinear(paletteLoop(hue));
    glow += c * a;
    ink = mix(ink, c, clamp(a * u_intensity * 0.9, 0.0, 1.0));
  }
  glow *= u_intensity * 0.7 * (1.0 + 0.6 * near);
  return mix(ink, bg + glow, u_dark);
}
`;

const COLORS = ["#2dd4a7", "#36c3b4", "#6d74f0", "#41cf9b"];

export type AuroraProps = ShaderBackgroundProps & {
  /** Brightness of the light. */
  intensity?: number;
  /** Where the curtains sit, 0 at the bottom to 1 at the top. */
  height?: number;
  /** How far the light reaches upward. */
  spread?: number;
  /** Number of curtains, 1 to 5. */
  layers?: number;
  /** How much the curtains undulate; 0 is flat. */
  waviness?: number;
  /** Horizontal size of the waves; larger is broader and calmer. */
  stretch?: number;
  /** How strongly the curtains lean toward the pointer. */
  lean?: number;
  /** Base colour behind the light; empty follows the page. */
  background?: string;
};

export function Aurora({
  colors = COLORS,
  speed = 1,
  animate = true,
  interactive = true,
  grain = 0.02,
  intensity = 1,
  height = 0.45,
  spread = 0.2,
  layers = 3,
  waviness = 1,
  stretch = 1,
  lean = 1,
  background = "",
  seed = 0,
  ...rest
}: AuroraProps) {
  return (
    <ShaderSurface
      shader={SHADER}
      uniforms={{
        u_intensity: intensity,
        u_height: height,
        u_spread: spread,
        u_layers: layers,
        u_wave: waviness,
        u_stretch: stretch,
        u_lean: lean,
      }}
      colors={colors}
      speed={speed}
      animate={animate}
      interactive={interactive}
      grain={grain}
      seed={seed}
      background={background}
      fallback={(_, base) => {
        return `linear-gradient(to top, ${base} ${Math.round(height * 70)}%, ${colors[0]}66 ${Math.round(height * 100)}%, ${base})`;
      }}
      {...rest}
    />
  );
}