web/islands/Rain.tsx

/**
 * Copyright (c) 2025 xwra
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

import { useEffect, useRef } from "preact/hooks";

interface Particle {
  offsetX: number;
  offsetY: number;
  velocityX: number;
  velocityY: number;
}

interface Raindrop {
  x: number;
  y: number;
  length: number;
  speed: number;
  opacity: number;
  floorHeight: number;
}

interface Splash {
  x: number;
  y: number;
  age: number;
  maxAge: number;
  particles: Particle[];
}

interface Star {
  x: number;
  y: number;
  size: number;
  brightness: number;
  twinkleSpeed: number;
  twinkleOffset: number;
  age: number;
  maxAge: number;
  canVanish: boolean;
  color: { r: number; g: number; b: number };
  colorIndex: number;
}

const PIXEL_SIZE = 4;
const DROP_COUNT = 300;
const RAIN_COLOR = { r: 87, g: 97, b: 100 };
const BACKGROUND_COLOUR = "#16191C";
const STAR_COUNT = 150;
const RAIN_SPEED = 0.75;

const SPLASH_CHANCE = 0.3;
const FLOOR_HEIGHT_MIN = 0.55;
const FLOOR_HEIGHT_RANGE = 0.95;

const PARTICLE_OFFSET_RANGE = 4;
const PARTICLE_Y_RANGE = 2;
const PARTICLE_Y_MIN = 1;
const PARTICLE_VX_RANGE = 0.8;
const PARTICLE_VY_RANGE = 0.5;
const PARTICLE_VY_MIN = 0.3;
const PARTICLE_GRAVITY = 0.15;

const STAR_BRIGHTNESS_MIN = 0.6;
const STAR_BRIGHTNESS_RANGE = 0.4;
const STAR_LARGE_THRESHOLD = 0.7;
const STAR_SIZE_SMALL = 4;
const STAR_SIZE_LARGE = 8;
const STAR_TWINKLE_MIN = 0.002;
const STAR_TWINKLE_RANGE = 0.005;
const STAR_AGE_MIN = 60;
const STAR_AGE_RANGE = 120;
const STAR_TWINKLE_AMPLITUDE = 0.3;
const STAR_TWINKLE_BASE = 0.7;
const STAR_GLOW_THRESHOLD = 0.7;
const STAR_GLOW_ALPHA = 0.5;

const RAIN_COLORS: string[] = [];
const STAR_COLORS: string[] = [];
const ALPHA_STAR_COLORS: string[] = [];
const NUM_COLOR_VARIATIONS = 20;

for (let i = 0; i < NUM_COLOR_VARIATIONS; i++) {
  const brightness = 1 - (i / NUM_COLOR_VARIATIONS) * 0.5;
  RAIN_COLORS.push(
    `rgb(${Math.floor(RAIN_COLOR.r * brightness)},${
      Math.floor(RAIN_COLOR.g * brightness)
    },${Math.floor(RAIN_COLOR.b * brightness)})`,
  );
}

for (let i = 0; i < NUM_COLOR_VARIATIONS; i++) {
  const brightness = STAR_BRIGHTNESS_MIN +
    (i / NUM_COLOR_VARIATIONS) * STAR_BRIGHTNESS_RANGE;
  STAR_COLORS.push(
    `rgb(${Math.floor(RAIN_COLOR.r * brightness)},${
      Math.floor(RAIN_COLOR.g * brightness)
    },${Math.floor(RAIN_COLOR.b * brightness)})`,
  );
  ALPHA_STAR_COLORS.push(
    `rgba(${Math.floor(RAIN_COLOR.r * brightness)},${
      Math.floor(RAIN_COLOR.g * brightness)
    },${Math.floor(RAIN_COLOR.b * brightness)},`,
  );
}

const SPLASH_PARTICLE_COLOR = `rgb(${RAIN_COLOR.r * 0.9},${
  RAIN_COLOR.g * 0.95
},${RAIN_COLOR.b * 1.1})`;
const SPLASH_RIPPLE_COLOR = `rgb(${RAIN_COLOR.r * 0.7},${RAIN_COLOR.g * 0.8},${
  RAIN_COLOR.b * 0.95
})`;

function createParticle(): Particle {
  return {
    offsetX: (Math.random() - 0.5) * PARTICLE_OFFSET_RANGE,
    offsetY: -(Math.random() * PARTICLE_Y_RANGE + PARTICLE_Y_MIN),
    velocityX: (Math.random() - 0.5) * PARTICLE_VX_RANGE,
    velocityY: -(Math.random() * PARTICLE_VY_RANGE + PARTICLE_VY_MIN),
  };
}

function createSplash(x: number, y: number): Splash {
  return {
    x,
    y,
    age: 0,
    maxAge: 12,
    particles: Array.from(
      { length: Math.floor(Math.random() * 3) + 3 },
      createParticle,
    ),
  };
}

function createRaindrop(gridWidth: number, gridHeight: number): Raindrop {
  const bias = Math.random() * Math.random();
  return {
    x: Math.floor(Math.random() * gridWidth),
    y: Math.floor(Math.random() * gridHeight) - gridHeight,
    length: Math.floor(Math.random() * 4) + 2,
    speed: RAIN_SPEED * (Math.random() * 2 + 1),
    opacity: Math.random() * 0.3 + 0.6,
    floorHeight: window.innerHeight *
      (FLOOR_HEIGHT_MIN + bias * FLOOR_HEIGHT_RANGE),
  };
}

function createStar(): Star {
  const brightness = Math.random() * STAR_BRIGHTNESS_RANGE +
    STAR_BRIGHTNESS_MIN;
  const colorIndex = Math.floor(
    (brightness - STAR_BRIGHTNESS_MIN) / STAR_BRIGHTNESS_RANGE *
      (NUM_COLOR_VARIATIONS - 1),
  );

  return {
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    size: Math.random() > STAR_LARGE_THRESHOLD
      ? STAR_SIZE_LARGE
      : STAR_SIZE_SMALL,
    twinkleSpeed: Math.random() * STAR_TWINKLE_RANGE + STAR_TWINKLE_MIN,
    twinkleOffset: Math.random() * Math.PI * 2,
    brightness,
    age: 0,
    maxAge: STAR_AGE_MIN + Math.random() * STAR_AGE_RANGE,
    canVanish: false,
    colorIndex,
  };
}

function updateParticle(p: Particle) {
  p.offsetX += p.velocityX;
  p.offsetY += p.velocityY;
  p.velocityY += PARTICLE_GRAVITY;
}

function updateSplash(splash: Splash) {
  splash.age++;
  splash.particles.forEach(updateParticle);
}

function updateRaindrop(
  drop: Raindrop,
  splashes: Splash[],
  gridWidth: number,
  gridHeight: number,
) {
  drop.y += drop.speed;
  const dropY = drop.y * PIXEL_SIZE;

  if (dropY >= drop.floorHeight && Math.random() < SPLASH_CHANCE) {
    splashes.push(createSplash(drop.x, Math.floor(dropY / PIXEL_SIZE)));
    Object.assign(drop, createRaindrop(gridWidth, gridHeight));
  } else if (dropY > window.innerHeight) {
    Object.assign(drop, createRaindrop(gridWidth, gridHeight));
  }
}

function updateStar(star: Star): void {
  star.age++;
  const phase = (star.age * star.twinkleSpeed + star.twinkleOffset) %
    (2 * Math.PI);

  if (!star.canVanish && phase < star.twinkleSpeed) {
    star.canVanish = true;
  }

  if (star.canVanish && star.age > star.maxAge) {
    Object.assign(star, createStar());
  } else if (star.x > window.innerWidth || star.y > window.innerHeight) {
    Object.assign(star, createStar());
  }
}

const isSplashDead = (splash: Splash): boolean => splash.age >= splash.maxAge;

const drawRaindrop = (ctx: CanvasRenderingContext2D, drop: Raindrop): void => {
  ctx.globalAlpha = drop.opacity;
  const xPos = drop.x * PIXEL_SIZE;

  for (let i = 0; i < drop.length; i++) {
    const colorIndex = Math.floor(
      (i / drop.length) * NUM_COLOR_VARIATIONS * 0.5,
    );
    ctx.fillStyle = RAIN_COLORS[colorIndex];
    ctx.fillRect(xPos, (drop.y - i) * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
  }
  ctx.globalAlpha = 1;
};

function drawSplash(ctx: CanvasRenderingContext2D, splash: Splash) {
  if (splash.age >= splash.maxAge) return;

  const progress = splash.age / splash.maxAge;
  ctx.globalAlpha = 1 - progress;

  ctx.fillStyle = SPLASH_PARTICLE_COLOR;
  splash.particles.forEach((p) => {
    const px = Math.floor(splash.x + p.offsetX) * PIXEL_SIZE;
    const py = Math.floor(splash.y + p.offsetY) * PIXEL_SIZE;
    ctx.fillRect(px, py, PIXEL_SIZE, PIXEL_SIZE);
  });

  if (splash.age < 6) {
    const rippleSize = Math.floor(splash.age / 2) + 1;
    const splashY = splash.y * PIXEL_SIZE;
    ctx.fillStyle = SPLASH_RIPPLE_COLOR;
    ctx.fillRect(
      (splash.x - rippleSize) * PIXEL_SIZE,
      splashY,
      PIXEL_SIZE,
      PIXEL_SIZE,
    );
    ctx.fillRect(
      (splash.x + rippleSize) * PIXEL_SIZE,
      splashY,
      PIXEL_SIZE,
      PIXEL_SIZE,
    );
  }

  ctx.globalAlpha = 1;
}

function drawStar(
  ctx: CanvasRenderingContext2D,
  star: Star,
  time: number,
) {
  const twinkle = Math.sin(time * star.twinkleSpeed + star.twinkleOffset) *
      STAR_TWINKLE_AMPLITUDE + STAR_TWINKLE_BASE;
  const alpha = star.brightness * twinkle;

  const x = Math.floor(star.x);
  const y = Math.floor(star.y);
  const color = ALPHA_STAR_COLORS[star.colorIndex];

  ctx.fillStyle = color + alpha;
  ctx.fillRect(x, y, star.size, star.size);

  if (star.size === STAR_SIZE_LARGE && alpha > STAR_GLOW_THRESHOLD) {
    ctx.fillStyle = color + (alpha * STAR_GLOW_ALPHA);
    ctx.fillRect(x - 4, y + 2, 4, 4);
    ctx.fillRect(x + 8, y + 2, 4, 4);
    ctx.fillRect(x + 2, y - 4, 4, 4);
    ctx.fillRect(x + 2, y + 8, 4, 4);
  }
}

export default function Rain() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const prefersReducedMotion =
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (prefersReducedMotion) return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let gridWidth = 0;
    let gridHeight = 0;

    const resizeCanvas = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      gridWidth = Math.floor(window.innerWidth / PIXEL_SIZE);
      gridHeight = Math.floor(window.innerHeight / PIXEL_SIZE);
    };

    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);

    const stars = Array.from({ length: STAR_COUNT }, createStar);
    const raindrops = Array.from(
      { length: DROP_COUNT },
      () => createRaindrop(gridWidth, gridHeight),
    );
    const splashes: Splash[] = [];

    const startTime = performance.now();

    const animate = (time: number) => {
      ctx.fillStyle = BACKGROUND_COLOUR;
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      for (let i = 0; i < stars.length; i++) {
        updateStar(stars[i]);
        drawStar(ctx, stars[i], time - startTime);
      }
      raindrops.forEach((drop) =>
        updateRaindrop(drop, splashes, gridWidth, gridHeight)
      );
      for (let i = splashes.length - 1; i >= 0; i--) {
        updateSplash(splashes[i]);
        if (isSplashDead(splashes[i])) {
          splashes.splice(i, 1);
        }
      }

      for (let i = 0; i < stars.length; i++) {
        updateStar(stars[i]);
        drawStar(ctx, stars[i], performance.now() - startTime);
      }
      raindrops.forEach((drop) => drawRaindrop(ctx, drop));
      splashes.forEach((splash) => drawSplash(ctx, splash));

      requestAnimationFrame(animate);
    };

    animate(0);
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        imageRendering: "pixelated",
        background: BACKGROUND_COLOUR,
      }}
    />
  );
}