Blame for frontend/src/components/SkyCanvas.tsx

import { useEffect, useRef } from "react";

/**
 * Night sky: three parallax layers of stars, small four point sparkles that twinkle, and a rare
 * shooting star. Only white and #217cff. With prefers-reduced-motion it paints one static frame.
 */

type Star = { x: number; y: number; r: number; a: number; layer: number; phase: number; speed: number };
type Sparkle = Star & { size: number; blue: boolean };
type Meteor = { x: number; y: number; vx: number; vy: number; life: number };
type DeepStar = { x: number; y: number; z: number; blue: boolean };
type Nebula = { x: number; y: number; z: number; size: number; hue: number };

// Travel mode: scrolling the page flies the camera forward through a 3D field.
const DEEP_STARS = 300;
const NEBULAE = 5;
const TRAVEL_PER_PX = 0.00022; // depth units per scrolled pixel: a whole page is a gentle glide

const LAYERS = [
  { density: 0.00018, parallax: 6, drift: 0.004 },
  { density: 0.00009, parallax: 14, drift: 0.008 },
  { density: 0.00003, parallax: 26, drift: 0.014 },
];
const SPARKLE_DENSITY = 0.000022;
const BLUE = "33, 124, 255";

function rand(min: number, max: number) {
  return min + Math.random() * (max - min);
}

export default function SkyCanvas({ intensity = 1, travel = false }: { intensity?: number; travel?: boolean }) {
  const ref = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let w = 0;
    let h = 0;
    let stars: Star[] = [];
    let sparkles: Sparkle[] = [];
    let meteor: Meteor | null = null;
    let nextMeteorAt = performance.now() + rand(4000, 9000);
    const pointer = { x: 0, y: 0, tx: 0, ty: 0 };
    let raf = 0;
    let scroll = 0;
    let camZ = 0;
    let lastScrollY = window.scrollY;
    let velocity = 0;
    const deep: DeepStar[] = Array.from({ length: travel ? DEEP_STARS : 0 }, () => ({
      x: rand(-1, 1),
      y: rand(-1, 1),
      z: Math.random(),
      blue: Math.random() < 0.28,
    }));
    const nebulae: Nebula[] = Array.from({ length: travel ? NEBULAE : 0 }, (_, i) => ({
      x: rand(-0.9, 0.9),
      y: rand(-0.7, 0.7),
      z: i / NEBULAE,
      size: rand(0.5, 1.1),
      hue: Math.random(),
    }));

    const build = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      w = canvas.clientWidth;
      h = canvas.clientHeight;
      canvas.width = Math.round(w * dpr);
      canvas.height = Math.round(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const area = w * h;
      stars = [];
      LAYERS.forEach((layer, i) => {
        const count = Math.round(area * layer.density * intensity);
        for (let n = 0; n < count; n++) {
          stars.push({
            x: Math.random() * w,
            y: Math.random() * h,
            r: rand(0.3, 0.7) + i * 0.35,
            a: rand(0.25, 0.8),
            layer: i,
            phase: Math.random() * Math.PI * 2,
            speed: rand(0.4, 1.4),
          });
        }
      });
      sparkles = [];
      const sCount = Math.max(6, Math.round(area * SPARKLE_DENSITY * intensity));
      for (let n = 0; n < sCount; n++) {
        sparkles.push({
          x: Math.random() * w,
          y: Math.random() * h * 0.85,
          r: 1,
          a: 1,
          layer: 2,
          phase: Math.random() * Math.PI * 2,
          speed: rand(0.35, 0.9),
          size: rand(3, 7),
          blue: Math.random() < 0.35,
        });
      }
    };

    const drawSparkle = (s: Sparkle, alpha: number, ox: number, oy: number) => {
      const x = s.x + ox;
      const y = s.y + oy;
      const len = s.size * (0.6 + alpha * 0.6);
      const color = s.blue ? BLUE : "255, 255, 255";
      const glow = ctx.createRadialGradient(x, y, 0, x, y, len * 1.6);
      glow.addColorStop(0, `rgba(${color}, ${0.35 * alpha})`);
      glow.addColorStop(1, `rgba(${color}, 0)`);
      ctx.fillStyle = glow;
      ctx.beginPath();
      ctx.arc(x, y, len * 1.6, 0, Math.PI * 2);
      ctx.fill();
      // four point star: two thin diamonds
      ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
      const t = Math.max(0.6, len * 0.12);
      ctx.beginPath();
      ctx.moveTo(x, y - len);
      ctx.lineTo(x + t, y);
      ctx.lineTo(x, y + len);
      ctx.lineTo(x - t, y);
      ctx.closePath();
      ctx.moveTo(x - len, y);
      ctx.lineTo(x, y + t);
      ctx.lineTo(x + len, y);
      ctx.lineTo(x, y - t);
      ctx.closePath();
      ctx.fill();
    };

    const frame = (now: number) => {
      const t = now / 1000;
      pointer.x += (pointer.tx - pointer.x) * 0.04;
      pointer.y += (pointer.ty - pointer.y) * 0.04;
      ctx.clearRect(0, 0, w, h);

      if (travel && !reduced) {
        // Camera depth follows scroll position; velocity (smoothed) stretches stars into streaks.
        const y = window.scrollY;
        velocity += (y - lastScrollY - velocity) * 0.06;
        lastScrollY = y;
        const idle = t * 0.0035; // a slow cruise even when not scrolling
        camZ = y * TRAVEL_PER_PX + idle;
        const cx = w / 2 + pointer.x * -40;
        const cy = h / 2 + pointer.y * -30;
        const focal = Math.max(w, h) * 0.55;
        const warp = Math.min(1, Math.max(0, Math.abs(velocity) - 6) / 60);

        // Nebula clouds swell and slide past as you approach them.
        for (const n of nebulae) {
          const z = (((n.z - camZ * 0.25) % 1) + 1) % 1;
          const depth = 0.08 + z * 1.6;
          const px = cx + (n.x * focal) / depth;
          const py = cy + (n.y * focal) / depth;
          const r = (n.size * focal * 0.5) / depth;
          const fade = Math.min(1, (1 - z) * 2) * Math.min(1, z * 6);
          const alpha = 0.1 * fade;
          if (alpha < 0.005 || r < 4) continue;
          const g = ctx.createRadialGradient(px, py, 0, px, py, r);
          const color = n.hue > 0.5 ? BLUE : "120, 170, 255";
          g.addColorStop(0, `rgba(${color}, ${alpha})`);
          g.addColorStop(0.5, `rgba(${BLUE}, ${alpha * 0.35})`);
          g.addColorStop(1, `rgba(${BLUE}, 0)`);
          ctx.fillStyle = g;
          ctx.beginPath();
          ctx.arc(px, py, r, 0, Math.PI * 2);
          ctx.fill();
        }

        // Stars stream toward the camera.
        for (const s of deep) {
          const z = (((s.z - camZ) % 1) + 1) % 1; // 1 far, 0 at the lens
          const depth = 0.03 + z;
          const px = cx + (s.x * focal) / depth;
          const py = cy + (s.y * focal) / depth;
          if (px < -50 || px > w + 50 || py < -50 || py > h + 50) continue;
          const near = 1 - z;
          const alpha = Math.min(0.85, near * near * 1.3) * intensity;
          const size = 0.3 + near * near * 1.6;
          const color = s.blue ? BLUE : "255, 255, 255";
          if (warp > 0.08) {
            // Where the star was a moment ago, further away: the streak points back to the vanishing point.
            const dz = Math.min(0.06, Math.abs(velocity) * TRAVEL_PER_PX * 3) * warp;
            const back = 0.03 + Math.min(1, z + (velocity > 0 ? dz : -dz));
            const bx = cx + (s.x * focal) / back;
            const by = cy + (s.y * focal) / back;
            ctx.strokeStyle = `rgba(${color}, ${alpha * 0.8})`;
            ctx.lineWidth = size;
            ctx.lineCap = "round";
            ctx.beginPath();
            ctx.moveTo(bx, by);
            ctx.lineTo(px, py);
            ctx.stroke();
          } else {
            ctx.fillStyle = `rgba(${color}, ${alpha})`;
            ctx.beginPath();
            ctx.arc(px, py, size, 0, Math.PI * 2);
            ctx.fill();
          }
        }
      }

      for (const s of stars) {
        const layer = LAYERS[s.layer];
        const ox = reduced ? 0 : -pointer.x * layer.parallax;
        const oy = reduced ? 0 : -pointer.y * layer.parallax - scroll * layer.drift * 20;
        let x = s.x + ox + (reduced ? 0 : t * layer.drift * 10);
        let y = (s.y + oy) % h;
        if (y < 0) y += h;
        x = ((x % w) + w) % w;
        const twinkle = reduced ? 1 : 0.65 + 0.35 * Math.sin(t * s.speed + s.phase);
        ctx.fillStyle = `rgba(255, 255, 255, ${s.a * twinkle})`;
        ctx.beginPath();
        ctx.arc(x, y, s.r, 0, Math.PI * 2);
        ctx.fill();
      }

      for (const s of sparkles) {
        const pulse = reduced ? 0.8 : Math.max(0, Math.sin(t * s.speed + s.phase));
        const alpha = Math.pow(pulse, 3);
        if (alpha > 0.02) {
          drawSparkle(s, alpha, reduced ? 0 : -pointer.x * 20, reduced ? 0 : -pointer.y * 20);
        }
      }

      if (!reduced) {
        if (!meteor && now > nextMeteorAt) {
          meteor = { x: rand(w * 0.2, w), y: rand(0, h * 0.35), vx: -rand(7, 11), vy: rand(2.5, 4), life: 1 };
        }
        if (meteor) {
          const m = meteor;
          const tail = ctx.createLinearGradient(m.x, m.y, m.x - m.vx * 14, m.y - m.vy * 14);
          tail.addColorStop(0, `rgba(255, 255, 255, ${0.9 * m.life})`);
          tail.addColorStop(0.3, `rgba(${BLUE}, ${0.5 * m.life})`);
          tail.addColorStop(1, `rgba(${BLUE}, 0)`);
          ctx.strokeStyle = tail;
          ctx.lineWidth = 1.4;
          ctx.beginPath();
          ctx.moveTo(m.x, m.y);
          ctx.lineTo(m.x - m.vx * 14, m.y - m.vy * 14);
          ctx.stroke();
          m.x += m.vx;
          m.y += m.vy;
          m.life -= 0.012;
          if (m.life <= 0 || m.x < -200 || m.y > h + 200) {
            meteor = null;
            nextMeteorAt = now + rand(6000, 14000);
          }
        }
        raf = requestAnimationFrame(frame);
      }
    };

    const onResize = () => {
      build();
      if (reduced) frame(performance.now());
    };
    const onPointer = (e: PointerEvent) => {
      pointer.tx = e.clientX / window.innerWidth - 0.5;
      pointer.ty = e.clientY / window.innerHeight - 0.5;
    };
    const onScroll = () => {
      scroll = window.scrollY / 100;
    };
    const onVisibility = () => {
      cancelAnimationFrame(raf);
      if (!document.hidden && !reduced) raf = requestAnimationFrame(frame);
    };

    build();
    raf = requestAnimationFrame(frame);
    window.addEventListener("resize", onResize);
    document.addEventListener("visibilitychange", onVisibility);
    if (!reduced) {
      window.addEventListener("pointermove", onPointer, { passive: true });
      window.addEventListener("scroll", onScroll, { passive: true });
    }
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", onResize);
      window.removeEventListener("pointermove", onPointer);
      window.removeEventListener("scroll", onScroll);
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [intensity, travel]);

  return (
    <div className="sky" aria-hidden="true">
      <div className="sky-nebula" />
      <canvas ref={ref} className="sky-canvas" />
    </div>
  );
}