react-weather-effects 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1223 @@
+import React, { useState, useRef, useCallback, useContext, useId, useEffect, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// ../core/dist/index.mjs
+var QUALITY_LIMITS = {
+  low: { maxParticles: 150, dprCap: 1 },
+  medium: { maxParticles: 300, dprCap: 2 },
+  high: { maxParticles: 600, dprCap: 2 }
+};
+function clampDPR(weight = "normal") {
+  if (typeof window === "undefined") return 1;
+  const raw = window.devicePixelRatio ?? 1;
+  const caps = { light: 2, normal: 2, heavy: 1.5 };
+  return Math.min(raw, caps[weight]);
+}
+function resolveRenderBudget(quality = "medium", dprWeight = "normal") {
+  const limits = QUALITY_LIMITS[quality];
+  const dpr = Math.min(clampDPR(dprWeight), limits.dprCap);
+  return {
+    maxParticles: limits.maxParticles,
+    dpr,
+    quality
+  };
+}
+function resolveMotion(prop = "auto", osPreference) {
+  if (prop === "auto") {
+    return osPreference === false ? "animated" : "static";
+  }
+  return prop;
+}
+function hashString(str) {
+  let hash = 2166136261 >>> 0;
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function createSeededRandom(seed) {
+  let state = (typeof seed === "string" ? hashString(seed) : seed) >>> 0;
+  return () => {
+    state |= 0;
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var defaultScheduler = {
+  request: (cb) => {
+    if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+      return window.requestAnimationFrame(cb);
+    }
+    return setTimeout(() => cb(Date.now()), 16);
+  },
+  cancel: (id) => {
+    if (typeof window !== "undefined" && typeof window.cancelAnimationFrame === "function") {
+      window.cancelAnimationFrame(id);
+    } else {
+      clearTimeout(id);
+    }
+  }
+};
+var SchedulerCtx = React.createContext(null);
+var LAYER = {
+  BACKGROUND: 0,
+  MIDGROUND: 100};
+var TickerCtx = React.createContext(null);
+var __DEV__ = typeof process !== "undefined" && process.env && true;
+function WeatherCanvas({
+  children,
+  mode = "fullscreen",
+  wind = { x: 0, y: 0 },
+  dpr = "normal",
+  quality = "medium",
+  reducedMotion = "auto",
+  paused = false,
+  seed,
+  zIndex = 1,
+  onContextLost
+}) {
+  const [canvasNode, setCanvasNode] = useState(null);
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const setCanvasRef = useCallback((node) => {
+    canvasRef.current = node;
+    setCanvasNode(node);
+  }, []);
+  const injectedScheduler = useContext(SchedulerCtx);
+  const scheduler = injectedScheduler ?? defaultScheduler;
+  const autoSeed = useId();
+  const effectiveSeed = seed ?? autoSeed;
+  const randomFnRef = useRef(createSeededRandom(effectiveSeed));
+  useEffect(() => {
+    randomFnRef.current = createSeededRandom(effectiveSeed);
+  }, [effectiveSeed]);
+  const [contextAvailable, setContextAvailable] = useState(true);
+  const ctxRef = useRef(null);
+  const [dimensions, setDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const [osPreference, setOsPreference] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setOsPreference(mq.matches);
+    const handler = (e) => setOsPreference(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const motionMode = resolveMotion(reducedMotion, osPreference);
+  const [pageVisible, setPageVisible] = useState(() => {
+    if (typeof document === "undefined") return true;
+    return document.visibilityState === "visible";
+  });
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const handleVisibility = () => {
+      setPageVisible(document.visibilityState === "visible");
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, []);
+  const [inViewport, setInViewport] = useState(true);
+  useEffect(() => {
+    const el = canvasNode;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry) {
+          setInViewport(entry.isIntersecting);
+        }
+      },
+      { threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [canvasNode]);
+  const [budget, setBudget] = useState(() => resolveRenderBudget(quality, dpr));
+  const budgetRef = useRef(budget);
+  const nextRegId = useRef(1);
+  const nextSeq = useRef(1);
+  const registrationsRef = useRef([]);
+  const orderedSnapshotRef = useRef([]);
+  const [effectCount, setEffectCount] = useState(0);
+  const windRef = useRef(wind);
+  const simulationTime = useRef(0);
+  const lastTimestamp = useRef(null);
+  const rafId = useRef(null);
+  const pendingAssetsRef = useRef(/* @__PURE__ */ new Set());
+  const isMicrotaskScheduled = useRef(false);
+  const isDirtyRef = useRef(true);
+  const canPresent = contextAvailable && dimensions.width > 0 && dimensions.height > 0 && pageVisible && inViewport && motionMode !== "off";
+  const shouldAnimate = canPresent && effectCount > 0 && !paused && motionMode === "animated";
+  const canPresentRef = useRef(canPresent);
+  canPresentRef.current = canPresent;
+  const shouldAnimateRef = useRef(shouldAnimate);
+  shouldAnimateRef.current = shouldAnimate;
+  const motionModeRef = useRef(motionMode);
+  motionModeRef.current = motionMode;
+  const onContextLostRef = useRef(onContextLost);
+  onContextLostRef.current = onContextLost;
+  const drawFrame = useCallback((dt, timestamp) => {
+    const canvas = canvasRef.current;
+    const ctx = ctxRef.current;
+    if (!canvas || !ctx || canvas.width === 0 || canvas.height === 0) return;
+    const snapshot = orderedSnapshotRef.current;
+    const currentBudget = budgetRef.current;
+    const currentDpr = currentBudget.dpr;
+    isDirtyRef.current = false;
+    const frameState = {
+      ctx,
+      dt,
+      isAnimating: shouldAnimateRef.current,
+      width: dimensions.width,
+      height: dimensions.height,
+      dpr: currentDpr,
+      budget: currentBudget,
+      wind: windRef.current,
+      pointer: null,
+      timestamp,
+      random: randomFnRef.current
+    };
+    ctx.save();
+    try {
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.setTransform(currentDpr, 0, 0, currentDpr, 0, 0);
+      if (motionModeRef.current === "off" || snapshot.length === 0) {
+        return;
+      }
+      for (const reg of snapshot) {
+        ctx.save();
+        ctx.beginPath();
+        try {
+          reg.fn(frameState);
+        } catch (err) {
+          if (__DEV__) {
+            console.error("Weather effect draw error:", err);
+          }
+        } finally {
+          ctx.restore();
+          ctx.beginPath();
+        }
+      }
+    } finally {
+      ctx.restore();
+      ctx.beginPath();
+    }
+  }, [dimensions.width, dimensions.height]);
+  const drawFrameRef = useRef(drawFrame);
+  drawFrameRef.current = drawFrame;
+  const invalidate = useCallback(() => {
+    isDirtyRef.current = true;
+    if (shouldAnimateRef.current) {
+      return;
+    }
+    if (!isMicrotaskScheduled.current) {
+      isMicrotaskScheduled.current = true;
+      queueMicrotask(() => {
+        isMicrotaskScheduled.current = false;
+        if (!canPresentRef.current) return;
+        drawFrameRef.current(0, simulationTime.current);
+      });
+    }
+  }, []);
+  useEffect(() => {
+    const nextBudget = resolveRenderBudget(quality, dpr);
+    budgetRef.current = nextBudget;
+    setBudget(nextBudget);
+    invalidate();
+  }, [quality, dpr, invalidate]);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    let mql;
+    const updateDpr = () => {
+      if (mql) mql.removeEventListener("change", updateDpr);
+      const nextBudget = resolveRenderBudget(quality, dpr);
+      budgetRef.current = nextBudget;
+      setBudget(nextBudget);
+      invalidate();
+      const currentDppx = window.devicePixelRatio ?? 1;
+      mql = window.matchMedia(`(resolution: ${currentDppx}dppx)`);
+      mql.addEventListener("change", updateDpr, { once: true });
+    };
+    updateDpr();
+    return () => mql?.removeEventListener("change", updateDpr);
+  }, [quality, dpr, invalidate]);
+  useEffect(() => {
+    windRef.current = wind;
+    invalidate();
+  }, [wind.x, wind.y, invalidate]);
+  useEffect(() => {
+    if (canPresent && isDirtyRef.current && !shouldAnimate) {
+      invalidate();
+    }
+  }, [canPresent, shouldAnimate, invalidate]);
+  const updateSnapshot = useCallback(() => {
+    const sorted = [...registrationsRef.current].sort((a, b) => {
+      if (a.layer !== b.layer) return a.layer - b.layer;
+      return a.seq - b.seq;
+    });
+    orderedSnapshotRef.current = sorted;
+    setEffectCount(sorted.length);
+  }, []);
+  const register = useCallback(
+    (layer, fn) => {
+      const id = nextRegId.current++;
+      const seq = nextSeq.current++;
+      const reg = { id, layer, fn, seq };
+      registrationsRef.current.push(reg);
+      updateSnapshot();
+      invalidate();
+      let unregistered = false;
+      return () => {
+        if (unregistered) return;
+        unregistered = true;
+        registrationsRef.current = registrationsRef.current.filter((r) => r.id !== id);
+        updateSnapshot();
+        invalidate();
+      };
+    },
+    [updateSnapshot, invalidate]
+  );
+  const getBudget = useCallback(() => budgetRef.current, []);
+  const trackAsset = useCallback(
+    (task) => {
+      pendingAssetsRef.current.add(task);
+      let settled = false;
+      const finish = () => {
+        if (!settled) {
+          settled = true;
+          pendingAssetsRef.current.delete(task);
+        }
+      };
+      task.then(
+        () => {
+          finish();
+          invalidate();
+        },
+        () => {
+          finish();
+          invalidate();
+        }
+      );
+      return () => {
+        finish();
+      };
+    },
+    [invalidate]
+  );
+  const tickerContext = useMemo(
+    () => ({
+      register,
+      invalidate,
+      getBudget,
+      trackAsset
+    }),
+    [register, invalidate, getBudget, trackAsset]
+  );
+  useEffect(() => {
+    const canvas = canvasNode;
+    if (!canvas) return;
+    let ctx = null;
+    try {
+      ctx = canvas.getContext("2d");
+    } catch {
+      ctx = null;
+    }
+    if (!ctx) {
+      if (__DEV__) {
+        console.warn("WeatherCanvas: Failed to acquire 2D rendering context.");
+      }
+      setContextAvailable(false);
+      onContextLostRef.current?.();
+      return;
+    }
+    ctxRef.current = ctx;
+    setContextAvailable(true);
+    invalidate();
+    const handleContextLost = (e) => {
+      e.preventDefault();
+      setContextAvailable(false);
+      ctxRef.current = null;
+      onContextLostRef.current?.();
+    };
+    const handleContextRestored = () => {
+      const restoredCtx = canvas.getContext("2d");
+      if (restoredCtx) {
+        ctxRef.current = restoredCtx;
+        setContextAvailable(true);
+        invalidate();
+      }
+    };
+    canvas.addEventListener("contextlost", handleContextLost);
+    canvas.addEventListener("contextrestored", handleContextRestored);
+    return () => {
+      canvas.removeEventListener("contextlost", handleContextLost);
+      canvas.removeEventListener("contextrestored", handleContextRestored);
+    };
+  }, [canvasNode, invalidate]);
+  useEffect(() => {
+    const target = mode === "fullscreen" ? canvasNode : containerRef.current ?? canvasNode;
+    if (!target) return;
+    if (mode === "fullscreen") {
+      const updateFullscreenSize = () => {
+        const w = typeof window !== "undefined" ? window.innerWidth : 0;
+        const h = typeof window !== "undefined" ? window.innerHeight : 0;
+        setDimensions((prev) => {
+          if (prev.width === w && prev.height === h) return prev;
+          return { width: w, height: h };
+        });
+      };
+      updateFullscreenSize();
+      window.addEventListener("resize", updateFullscreenSize);
+      return () => window.removeEventListener("resize", updateFullscreenSize);
+    }
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setDimensions((prev) => {
+        if (prev.width === width && prev.height === height) return prev;
+        return { width, height };
+      });
+    });
+    ro.observe(target);
+    return () => ro.disconnect();
+  }, [mode, canvasNode]);
+  useEffect(() => {
+    const canvas = canvasNode;
+    if (!canvas) return;
+    const currentDpr = budget.dpr;
+    const backingWidth = Math.round(dimensions.width * currentDpr);
+    const backingHeight = Math.round(dimensions.height * currentDpr);
+    if (canvas.width !== backingWidth || canvas.height !== backingHeight) {
+      canvas.width = backingWidth;
+      canvas.height = backingHeight;
+      invalidate();
+    }
+  }, [dimensions, budget.dpr, canvasNode, invalidate]);
+  useEffect(() => {
+    if (motionMode === "off") {
+      const canvas = canvasRef.current;
+      const ctx = ctxRef.current;
+      if (canvas && ctx && canvas.width > 0 && canvas.height > 0) {
+        ctx.save();
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.restore();
+      }
+    } else {
+      invalidate();
+    }
+  }, [motionMode, invalidate]);
+  useEffect(() => {
+    if (!shouldAnimate) {
+      if (rafId.current !== null) {
+        scheduler.cancel(rafId.current);
+        rafId.current = null;
+      }
+      return;
+    }
+    let stopped = false;
+    lastTimestamp.current = null;
+    function tick(now) {
+      rafId.current = null;
+      if (stopped || !shouldAnimateRef.current) return;
+      const dt = lastTimestamp.current === null ? 0 : Math.min(Math.max((now - lastTimestamp.current) / 1e3, 0), 0.1);
+      lastTimestamp.current = now;
+      simulationTime.current += dt * 1e3;
+      drawFrameRef.current(dt, simulationTime.current);
+      if (!stopped && shouldAnimateRef.current) {
+        rafId.current = scheduler.request(tick);
+      }
+    }
+    rafId.current = scheduler.request(tick);
+    return () => {
+      stopped = true;
+      if (rafId.current !== null) {
+        scheduler.cancel(rafId.current);
+        rafId.current = null;
+      }
+    };
+  }, [shouldAnimate, scheduler]);
+  const containerStyle = mode === "fullscreen" ? {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    pointerEvents: "none",
+    zIndex
+  } : {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex
+  };
+  const canvasStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsx(TickerCtx.Provider, { value: tickerContext, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, style: containerStyle, children: [
+    /* @__PURE__ */ jsx("canvas", { ref: setCanvasRef, "aria-hidden": "true", style: canvasStyle }),
+    children
+  ] }) });
+}
+var PARTICLE_STRIDE = 7;
+function createParticlePool(count) {
+  return new Float32Array(count * PARTICLE_STRIDE);
+}
+function growParticlePool(pool, count) {
+  if (pool.length >= count * PARTICLE_STRIDE) return pool;
+  const next = createParticlePool(count);
+  next.set(pool);
+  return next;
+}
+function resolveDuration(duration) {
+  return Number.isFinite(duration) ? Math.max(0, duration) : 0;
+}
+function createTransition(target, duration) {
+  return { target, duration: resolveDuration(duration), remaining: 0 };
+}
+function stepTransition(transition, target, duration, state) {
+  const nextDuration = resolveDuration(duration);
+  if (target !== transition.target || nextDuration !== transition.duration) {
+    transition.target = target;
+    transition.duration = nextDuration;
+    transition.remaining = nextDuration;
+  }
+  if (!state.isAnimating || nextDuration === 0) {
+    transition.remaining = 0;
+    return 1;
+  }
+  if (transition.remaining === 0) return 1;
+  const elapsed = state.dt * 1e3;
+  const step = elapsed + 1e-6 >= transition.remaining ? 1 : elapsed / transition.remaining;
+  transition.remaining = step === 1 ? 0 : transition.remaining - elapsed;
+  return step;
+}
+function createParticleTransition(count, capacity, duration) {
+  const visibility = new Float32Array(capacity);
+  visibility.fill(1, 0, count);
+  return { transition: createTransition(count, duration), visibility, count };
+}
+function updateParticleTransition(particles, targetCount, duration, state) {
+  const capacity = state.budget.maxParticles;
+  if (particles.visibility.length < capacity) {
+    const visibility = new Float32Array(capacity);
+    visibility.set(particles.visibility);
+    particles.visibility = visibility;
+  }
+  if (particles.count > capacity) particles.visibility.fill(0, capacity, particles.count);
+  const count = Math.min(capacity, Math.max(particles.count, targetCount));
+  const step = stepTransition(particles.transition, targetCount, duration, state);
+  for (let i = 0; i < count; i++) {
+    const target = i < targetCount ? 1 : 0;
+    particles.visibility[i] = step === 1 ? target : particles.visibility[i] + (target - particles.visibility[i]) * step;
+  }
+  particles.count = step === 1 ? targetCount : count;
+}
+var SPLASH_STRIDE = 7;
+function seedParticle(pool, i, state, settings, isInitial) {
+  const base = i * PARTICLE_STRIDE;
+  const angleRad = settings.angle * Math.PI / 180;
+  const depth = state.random();
+  const fallSpeed = 550 + depth * 650;
+  const speed = fallSpeed * settings.speed;
+  const vx = Math.sin(angleRad) * speed + state.wind.x * (140 + depth * 150);
+  const vy = Math.cos(angleRad) * speed + state.wind.y * (60 + depth * 50);
+  const x = state.random() * (state.width + 200) - 100;
+  const y = isInitial ? state.random() * (state.height + 100) - 50 : -50 - state.random() * 100;
+  pool[base] = x;
+  pool[base + 1] = y;
+  pool[base + 2] = vx;
+  pool[base + 3] = vy;
+  pool[base + 4] = 0.3 + depth * 0.6;
+  pool[base + 5] = fallSpeed;
+  pool[base + 6] = depth;
+}
+function seedParticleRange(pool, startIndex, endIndex, state, settings) {
+  for (let i = startIndex; i < endIndex; i++) {
+    seedParticle(pool, i, state, settings, true);
+  }
+}
+function updatePool(pool, count, state, settings, visibility, splashPool, maxSplashes, splashState) {
+  const dt = state.dt;
+  const width = state.width;
+  const height = state.height;
+  const wrapWidth = width + 200;
+  const angleRad = settings.angle * Math.PI / 180;
+  const sinAngle = Math.sin(angleRad);
+  const cosAngle = Math.cos(angleRad);
+  const response = 1 - Math.exp(-dt * 5);
+  if (splashState.active) {
+    splashState.active = false;
+    for (let s = 0; s < maxSplashes; s++) {
+      const sBase = s * SPLASH_STRIDE;
+      if (splashPool[sBase + 5] === 0 || splashPool[sBase + 2] >= 1) continue;
+      splashPool[sBase + 2] = Math.min(1, splashPool[sBase + 2] + dt * splashPool[sBase + 3]);
+      if (splashPool[sBase + 2] < 1) splashState.active = true;
+    }
+  }
+  for (let i = 0; i < count; i++) {
+    const base = i * PARTICLE_STRIDE;
+    let x = pool[base];
+    let y = pool[base + 1];
+    let vx = pool[base + 2];
+    let vy = pool[base + 3];
+    const depth = pool[base + 6];
+    const speed = pool[base + 5] * settings.speed;
+    const targetVx = sinAngle * speed + state.wind.x * (140 + depth * 150);
+    const targetVy = cosAngle * speed + state.wind.y * (60 + depth * 50);
+    vx += (targetVx - vx) * response;
+    vy += (targetVy - vy) * response;
+    const prevY = y;
+    x += vx * dt;
+    y += vy * dt;
+    if (settings.splashes && prevY < height && y >= height && visibility[i] > 0.05) {
+      const elapsed = (y - height) / vy;
+      const impactX = x - vx * elapsed;
+      if (impactX >= 0 && impactX <= width) {
+        const sBase = splashState.head * SPLASH_STRIDE;
+        splashState.head = (splashState.head + 1) % maxSplashes;
+        if (splashPool[sBase + 5] === 0 || splashPool[sBase + 2] >= 1) {
+          const duration = 0.3 + depth * 0.18;
+          splashState.active = true;
+          splashPool[sBase] = impactX;
+          splashPool[sBase + 1] = Math.max(-40, Math.min(40, vx * 0.04));
+          splashPool[sBase + 2] = elapsed / duration;
+          splashPool[sBase + 3] = 1 / duration;
+          splashPool[sBase + 4] = (2.8 + depth * 4.6) * Math.sqrt(Math.max(0.4, Math.min(3, settings.dropThickness)));
+          splashPool[sBase + 5] = (0.25 + depth * 0.45) * visibility[i];
+          splashPool[sBase + 6] = (depth + i * 0.618) % 1;
+        }
+      }
+    }
+    if (x > width + 100 || x < -100) {
+      x = ((x + 100) % wrapWidth + wrapWidth) % wrapWidth - 100;
+    }
+    if (y > height + 60) {
+      seedParticle(pool, i, state, settings, false);
+    } else {
+      pool[base] = x;
+      pool[base + 1] = y;
+      pool[base + 2] = vx;
+      pool[base + 3] = vy;
+    }
+  }
+}
+function drawPool(pool, count, state, settings, visibility, splashPool, maxSplashes) {
+  if (count === 0 && (!settings.splashes || maxSplashes === 0)) return;
+  const ctx = state.ctx;
+  ctx.strokeStyle = settings.color;
+  ctx.lineCap = "round";
+  if (count > 0) {
+    for (let i = 0; i < count; i++) {
+      if (visibility[i] === 0) continue;
+      const base = i * PARTICLE_STRIDE;
+      const x = pool[base];
+      const y = pool[base + 1];
+      const vx = pool[base + 2];
+      const vy = pool[base + 3];
+      const depth = pool[base + 6];
+      const trailFactor = (0.012 + depth * 0.025) * settings.dropLength;
+      const fade = Math.max(0, Math.min(1, (y + 25) / 45, (state.height + 35 - y) / 80));
+      for (let segment = 0; segment < 3; segment++) {
+        const start = segment / 3 * trailFactor;
+        const end = (segment + 1) / 3 * trailFactor;
+        ctx.globalAlpha = pool[base + 4] * fade * visibility[i] * Math.pow(1 - segment / 3, 2);
+        ctx.lineWidth = (0.6 + depth * 1.1) * (1 - segment * 0.2) * settings.dropThickness;
+        ctx.beginPath();
+        ctx.moveTo(x - vx * start, y - vy * start);
+        ctx.lineTo(x - vx * end, y - vy * end);
+        ctx.stroke();
+      }
+    }
+  }
+  if (settings.splashes) {
+    ctx.fillStyle = settings.color;
+    const thickness = Math.max(0.4, Math.min(3, settings.dropThickness));
+    for (let s = 0; s < maxSplashes; s++) {
+      const sBase = s * SPLASH_STRIDE;
+      const progress = splashPool[sBase + 2];
+      if (progress >= 1 || splashPool[sBase + 5] === 0) continue;
+      const x = splashPool[sBase];
+      const y = state.height;
+      const size = splashPool[sBase + 4];
+      const alpha = splashPool[sBase + 5];
+      const elapsed = progress / splashPool[sBase + 3];
+      const drift = splashPool[sBase + 1] * elapsed;
+      ctx.globalAlpha = alpha * 0.45 * Math.pow(1 - progress, 1.5);
+      ctx.lineWidth = Math.max(0.35, 0.6 * thickness * (1 - progress * 0.4));
+      const rx = size * (0.25 + 1.9 * (1 - Math.pow(1 - progress, 3)));
+      const ry = Math.max(0.25, rx * 0.19);
+      ctx.beginPath();
+      ctx.ellipse(x, y, rx, ry, 0, Math.PI, Math.PI * 2);
+      ctx.stroke();
+      for (let bead = 0; bead < 5; bead++) {
+        const variation = (splashPool[sBase + 6] + bead * 0.37) % 1;
+        const beadProgress = progress / (0.72 + variation * 0.28);
+        if (beadProgress >= 1) continue;
+        const direction = (bead - 2) * 0.5;
+        const peak = size * (0.9 + (1 - Math.abs(direction)) * 1.1 + variation * 0.4);
+        const beadX = x + drift + direction * size * (1.5 + variation * 0.7) * beadProgress;
+        const beadY = y - peak * 4 * beadProgress * (1 - beadProgress);
+        const radius = Math.max(0.3, (0.4 + thickness * 0.35) * (1 - beadProgress * 0.45));
+        ctx.globalAlpha = alpha * Math.pow(1 - beadProgress, 1.25);
+        ctx.beginPath();
+        ctx.arc(beadX, beadY, radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  }
+  ctx.globalAlpha = 1;
+}
+function Rain({
+  intensity = 0.7,
+  transitionDuration = 0,
+  angle = 10,
+  color = "rgba(190, 215, 245, 0.8)",
+  speed = 1,
+  dropLength,
+  length,
+  dropThickness,
+  thickness,
+  splashes,
+  splash
+}) {
+  const ticker = useContext(TickerCtx);
+  if (!ticker) {
+    throw new Error("<Rain /> must be used inside <WeatherCanvas>");
+  }
+  const effectiveDropLength = dropLength ?? length ?? 1;
+  const effectiveDropThickness = dropThickness ?? thickness ?? 1;
+  const effectiveSplashes = splashes ?? splash ?? false;
+  const settingsRef = useRef({
+    intensity,
+    transitionDuration,
+    angle,
+    color,
+    speed,
+    dropLength: effectiveDropLength,
+    dropThickness: effectiveDropThickness,
+    splashes: effectiveSplashes
+  });
+  useEffect(() => {
+    settingsRef.current = {
+      intensity,
+      transitionDuration,
+      angle,
+      color,
+      speed,
+      dropLength: effectiveDropLength,
+      dropThickness: effectiveDropThickness,
+      splashes: effectiveSplashes
+    };
+    ticker.invalidate();
+  }, [
+    ticker,
+    intensity,
+    transitionDuration,
+    angle,
+    color,
+    speed,
+    effectiveDropLength,
+    effectiveDropThickness,
+    effectiveSplashes
+  ]);
+  useEffect(() => {
+    const capacity = ticker.getBudget().maxParticles;
+    let pool = createParticlePool(capacity);
+    const particles = createParticleTransition(
+      Math.round(Math.max(0, Math.min(1, settingsRef.current.intensity)) * capacity),
+      capacity,
+      settingsRef.current.transitionDuration
+    );
+    let initializedCount = 0;
+    const maxSplashes = Math.min(128, Math.max(32, Math.round(capacity * 0.5)));
+    const splashPool = new Float32Array(maxSplashes * SPLASH_STRIDE);
+    const splashState = { head: 0, active: false };
+    const unregister = ticker.register(LAYER.MIDGROUND, (state) => {
+      const settings = settingsRef.current;
+      const targetCount = Math.round(
+        Math.max(0, Math.min(1, settings.intensity)) * state.budget.maxParticles
+      );
+      updateParticleTransition(particles, targetCount, settings.transitionDuration, state);
+      const count = particles.count;
+      pool = growParticlePool(pool, state.budget.maxParticles);
+      if (count > initializedCount) {
+        seedParticleRange(pool, initializedCount, count, state, settings);
+        initializedCount = count;
+      }
+      if (state.dt > 0) {
+        updatePool(
+          pool,
+          count,
+          state,
+          settings,
+          particles.visibility,
+          splashPool,
+          maxSplashes,
+          splashState
+        );
+      }
+      drawPool(pool, count, state, settings, particles.visibility, splashPool, maxSplashes);
+    });
+    return unregister;
+  }, [ticker]);
+  return null;
+}
+function getSnowSpriteSize(settings, dpr) {
+  const diameter = Math.max(0, settings.minSize, settings.maxSize) * 2 * dpr;
+  return Math.min(1024, Math.max(64, 2 ** Math.ceil(Math.log2(diameter || 1))));
+}
+function createSnowSprite(image, size) {
+  if (typeof document === "undefined") return null;
+  try {
+    const aspect = image.naturalWidth / image.naturalHeight;
+    const texture = document.createElement("canvas");
+    texture.width = Math.max(1, Math.ceil(size * Math.min(1, aspect)));
+    texture.height = Math.max(1, Math.ceil(size / Math.max(1, aspect)));
+    const ctx = texture.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(image, 0, 0, texture.width, texture.height);
+    return { image, texture, aspect, requestedSize: size };
+  } catch {
+    return null;
+  }
+}
+function createSnowTexture(color) {
+  if (typeof document === "undefined") return null;
+  const surface = document.createElement("canvas");
+  surface.width = surface.height = 64;
+  const ctx = surface.getContext("2d");
+  if (!ctx) return null;
+  const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
+  gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
+  gradient.addColorStop(0.25, "rgba(255, 255, 255, 0.95)");
+  gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.55)");
+  gradient.addColorStop(0.75, "rgba(255, 255, 255, 0.15)");
+  gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, 64, 64);
+  ctx.globalCompositeOperation = "source-in";
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 64, 64);
+  return surface;
+}
+function seedSnowflake(pool, i, state, isInitial) {
+  const base = i * PARTICLE_STRIDE;
+  const depth = Math.pow(state.random(), 1.5);
+  const fallSpeed = 22 + depth * 54 + state.random() * 12;
+  let x;
+  let y;
+  if (isInitial) {
+    x = state.random() * (state.width + 100) - 50;
+    y = state.random() * (state.height + 50) - 25;
+  } else {
+    const windX = state.wind.x;
+    const vFlux = Math.max(20, fallSpeed) * state.width;
+    const hFlux = Math.abs(windX * 90) * state.height;
+    const sideRatio = hFlux / (vFlux + hFlux);
+    if (state.random() < sideRatio) {
+      x = windX > 0 ? -20 - state.random() * 30 : state.width + 20 + state.random() * 30;
+      y = state.random() * (state.height + 50) - 25;
+    } else {
+      x = state.random() * (state.width + 100) - 50;
+      y = -20 - state.random() * 50;
+    }
+  }
+  const phase = state.random() * Math.PI * 2;
+  pool[base] = x;
+  pool[base + 1] = y;
+  pool[base + 2] = phase;
+  pool[base + 3] = fallSpeed;
+  pool[base + 4] = 0.3 + depth * 0.6;
+  pool[base + 5] = phase;
+  pool[base + 6] = depth;
+}
+function seedSnowRange(pool, startIndex, endIndex, state) {
+  for (let i = startIndex; i < endIndex; i++) {
+    seedSnowflake(pool, i, state, true);
+  }
+}
+function updateSnow(pool, count, state, settings) {
+  const dt = state.dt;
+  const width = state.width;
+  const height = state.height;
+  const wrapWidth = width + 100;
+  const gust = 1 + Math.sin(state.timestamp * 4e-4) * 0.2;
+  for (let i = 0; i < count; i++) {
+    const base = i * PARTICLE_STRIDE;
+    let x = pool[base];
+    let y = pool[base + 1];
+    let angle = pool[base + 2];
+    let phase = pool[base + 5];
+    const baseVy = pool[base + 3];
+    const depth = pool[base + 6];
+    if (settings.wobble) {
+      phase += dt * (0.65 + depth * 1.4) * settings.speed;
+      pool[base + 5] = phase;
+    }
+    if (settings.rotation && settings.rotationSpeed !== 0) {
+      const spinDir = i % 2 === 0 ? 1 : -1;
+      const spinRate = (0.65 + depth * 1.4) * spinDir;
+      angle += dt * spinRate * settings.rotationSpeed;
+    }
+    const sway = settings.wobble ? (Math.sin(phase) * (10 + depth * 22) + Math.sin(phase * 0.5) * 8) * settings.speed : 0;
+    const vx = sway + state.wind.x * (50 + depth * 80) * gust;
+    const flutter = settings.wobble ? 1 + Math.sin(phase * 0.8) * 0.12 : 1;
+    const vy = baseVy * settings.speed * flutter;
+    x += vx * dt;
+    y += (vy + state.wind.y * 30) * dt;
+    if (x > width + 50 || x < -50) {
+      x = ((x + 50) % wrapWidth + wrapWidth) % wrapWidth - 50;
+    }
+    if (y > height + 30) {
+      seedSnowflake(pool, i, state, false);
+    } else {
+      pool[base] = x;
+      pool[base + 1] = y;
+      pool[base + 2] = angle;
+    }
+  }
+}
+function drawSnow(pool, count, state, settings, texture, sprite, visibility) {
+  if (count === 0) return;
+  const ctx = state.ctx;
+  const aspect = sprite ? sprite.aspect : 1;
+  ctx.fillStyle = settings.color;
+  for (let i = 0; i < count; i++) {
+    if (visibility[i] === 0) continue;
+    const base = i * PARTICLE_STRIDE;
+    const x = pool[base];
+    const y = pool[base + 1];
+    const depth = pool[base + 6];
+    const r = Math.max(0, settings.minSize + depth * (settings.maxSize - settings.minSize));
+    if (r === 0) continue;
+    const fade = Math.max(0, Math.min(1, (y + 20) / 45, (state.height + 20 - y) / 55));
+    ctx.globalAlpha = pool[base + 4] * fade * visibility[i];
+    if (sprite) {
+      const halfWidth = r * Math.min(1, aspect);
+      const halfHeight = r / Math.max(1, aspect);
+      ctx.save();
+      try {
+        ctx.translate(x, y);
+        if (settings.rotation) ctx.rotate(pool[base + 2]);
+        ctx.drawImage(sprite.texture, -halfWidth, -halfHeight, halfWidth * 2, halfHeight * 2);
+      } finally {
+        ctx.restore();
+      }
+    } else if (texture) {
+      const radius = r * 1.55;
+      ctx.drawImage(texture, x - radius, y - radius, radius * 2, radius * 2);
+    } else {
+      ctx.beginPath();
+      ctx.arc(x, y, r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+  ctx.globalAlpha = 1;
+}
+function Snow({
+  intensity = 0.5,
+  transitionDuration = 0,
+  speed = 1,
+  color = "rgba(255, 255, 255, 0.85)",
+  sprite,
+  minSize = sprite ? 6 : 1.5,
+  maxSize = sprite ? 18 : 4,
+  wobble = true,
+  rotation,
+  rotationSpeed
+}) {
+  const ticker = useContext(TickerCtx);
+  if (!ticker) {
+    throw new Error("<Snow /> must be used inside <WeatherCanvas>");
+  }
+  const effectiveRotation = rotation ?? (rotationSpeed !== void 0 ? true : wobble);
+  const effectiveRotationSpeed = rotationSpeed ?? 1;
+  const settingsRef = useRef({
+    intensity,
+    transitionDuration,
+    speed,
+    color,
+    minSize,
+    maxSize,
+    wobble,
+    rotation: effectiveRotation,
+    rotationSpeed: effectiveRotationSpeed
+  });
+  const textureRef = useRef(null);
+  const spriteRef = useRef(null);
+  useEffect(() => {
+    settingsRef.current = {
+      intensity,
+      transitionDuration,
+      speed,
+      color,
+      minSize,
+      maxSize,
+      wobble,
+      rotation: effectiveRotation,
+      rotationSpeed: effectiveRotationSpeed
+    };
+    ticker.invalidate();
+  }, [
+    ticker,
+    intensity,
+    transitionDuration,
+    speed,
+    color,
+    minSize,
+    maxSize,
+    wobble,
+    effectiveRotation,
+    effectiveRotationSpeed
+  ]);
+  useEffect(() => {
+    textureRef.current = createSnowTexture(color);
+    ticker.invalidate();
+    return () => {
+      textureRef.current = null;
+    };
+  }, [ticker, color]);
+  useEffect(() => {
+    if (!sprite || typeof Image === "undefined") return;
+    let isMounted = true;
+    let settle;
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    const task = new Promise((resolve) => {
+      settle = resolve;
+      image.onload = () => {
+        if (isMounted && image.naturalWidth > 0 && image.naturalHeight > 0) {
+          spriteRef.current = createSnowSprite(
+            image,
+            getSnowSpriteSize(settingsRef.current, ticker.getBudget().dpr)
+          );
+          ticker.invalidate();
+        }
+        resolve();
+      };
+      image.onerror = () => {
+        resolve();
+      };
+    });
+    const releaseTask = ticker.trackAsset(task);
+    image.src = sprite;
+    return () => {
+      isMounted = false;
+      image.onload = null;
+      image.onerror = null;
+      image.removeAttribute("src");
+      spriteRef.current = null;
+      settle();
+      releaseTask();
+    };
+  }, [ticker, sprite]);
+  useEffect(() => {
+    const capacity = ticker.getBudget().maxParticles;
+    let pool = createParticlePool(capacity);
+    const particles = createParticleTransition(
+      Math.round(Math.max(0, Math.min(1, settingsRef.current.intensity)) * capacity),
+      capacity,
+      settingsRef.current.transitionDuration
+    );
+    let initializedCount = 0;
+    const unregister = ticker.register(LAYER.MIDGROUND, (state) => {
+      const settings = settingsRef.current;
+      const targetCount = Math.round(
+        Math.max(0, Math.min(1, settings.intensity)) * state.budget.maxParticles
+      );
+      updateParticleTransition(particles, targetCount, settings.transitionDuration, state);
+      const count = particles.count;
+      pool = growParticlePool(pool, state.budget.maxParticles);
+      if (count > initializedCount) {
+        seedSnowRange(pool, initializedCount, count, state);
+        initializedCount = count;
+      }
+      if (state.dt > 0) {
+        updateSnow(pool, count, state, settings);
+      }
+      const cachedSprite = spriteRef.current;
+      if (cachedSprite && count > 0) {
+        const size = getSnowSpriteSize(settings, state.dpr);
+        if (size > cachedSprite.requestedSize) {
+          cachedSprite.requestedSize = size;
+          spriteRef.current = createSnowSprite(cachedSprite.image, size) ?? cachedSprite;
+        }
+      }
+      drawSnow(pool, count, state, settings, textureRef.current, spriteRef.current, particles.visibility);
+    });
+    return unregister;
+  }, [ticker]);
+  return null;
+}
+function createOffscreenSurface(size) {
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(size, size);
+  }
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    return canvas;
+  }
+  return null;
+}
+function renderRadialGradient(surface, size, color) {
+  const ctx = surface.getContext("2d");
+  if (!ctx) return;
+  ctx.clearRect(0, 0, size, size);
+  for (let i = 0; i < 6; i++) {
+    const x = size * (0.22 + i * 0.112);
+    const y = size * (0.48 + Math.sin(i * 2.4) * 0.09);
+    const radius = size * (0.18 + Math.sin(i * 1.7) * 0.03);
+    const grad = ctx.createRadialGradient(x, y, 0, x, y, radius);
+    grad.addColorStop(0, "rgba(255, 255, 255, 0.85)");
+    grad.addColorStop(0.4, "rgba(255, 255, 255, 0.5)");
+    grad.addColorStop(0.75, "rgba(255, 255, 255, 0.1)");
+    grad.addColorStop(1, "rgba(255, 255, 255, 0)");
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  ctx.globalCompositeOperation = "source-in";
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, size, size);
+}
+function Fog({
+  density = 0.4,
+  transitionDuration = 0,
+  speed = 1,
+  color = "rgba(220, 225, 235, 0.35)",
+  layers = 3
+}) {
+  const ticker = useContext(TickerCtx);
+  if (!ticker) {
+    throw new Error("<Fog /> must be used inside <WeatherCanvas>");
+  }
+  const settingsRef = useRef({ density, transitionDuration, speed, color, layers });
+  useEffect(() => {
+    settingsRef.current = { density, transitionDuration, speed, color, layers };
+    ticker.invalidate();
+  }, [ticker, density, transitionDuration, speed, color, layers]);
+  const textureRef = useRef(null);
+  const imageBitmapRef = useRef(null);
+  useEffect(() => {
+    let isMounted = true;
+    const budget = ticker.getBudget();
+    const textureSize = budget.quality === "low" ? 256 : budget.quality === "high" ? 512 : 384;
+    const surface = createOffscreenSurface(textureSize);
+    if (!surface) return;
+    renderRadialGradient(surface, textureSize, color);
+    textureRef.current = surface;
+    ticker.invalidate();
+    if (typeof createImageBitmap === "function") {
+      const assetTask = (async () => {
+        try {
+          const bitmap = await createImageBitmap(surface);
+          if (!isMounted) {
+            bitmap.close();
+            return;
+          }
+          if (imageBitmapRef.current) {
+            imageBitmapRef.current.close();
+          }
+          imageBitmapRef.current = bitmap;
+          textureRef.current = bitmap;
+          ticker.invalidate();
+        } catch {
+        }
+      })();
+      const releaseTask = ticker.trackAsset(assetTask);
+      return () => {
+        isMounted = false;
+        releaseTask();
+        if (imageBitmapRef.current) {
+          imageBitmapRef.current.close();
+          imageBitmapRef.current = null;
+        }
+        textureRef.current = null;
+      };
+    }
+    return () => {
+      isMounted = false;
+      textureRef.current = null;
+    };
+  }, [ticker, color]);
+  useEffect(() => {
+    const puffs = [];
+    let currentDensity = Math.max(0, Math.min(1, settingsRef.current.density));
+    const transition = createTransition(currentDensity, settingsRef.current.transitionDuration);
+    const unregister = ticker.register(LAYER.BACKGROUND, (state) => {
+      const texture = textureRef.current;
+      if (!texture) return;
+      const settings = settingsRef.current;
+      const numLayers = Math.round(Math.max(1, Math.min(6, settings.layers)));
+      const count = numLayers * 3;
+      const targetDensity = Math.max(0, Math.min(1, settings.density));
+      const step = stepTransition(transition, targetDensity, settings.transitionDuration, state);
+      currentDensity = step === 1 ? targetDensity : currentDensity + (targetDensity - currentDensity) * step;
+      const baseAlpha = currentDensity;
+      if (baseAlpha === 0) return;
+      for (let i = puffs.length; i < count; i++) {
+        const layer = Math.floor(i / 3);
+        puffs.push({
+          x: i % 3 * 0.55 - 0.05 + (state.random() - 0.5) * 0.25,
+          y: 0.15 + layer / numLayers * 0.72 + (state.random() - 0.5) * 0.12,
+          scaleX: 1 + state.random() * 0.7,
+          scaleY: 0.65 + state.random() * 0.55,
+          baseSpeed: 8 + (layer + 1) * 7,
+          alpha: 0.5 + state.random() * 0.4,
+          phase: state.random() * Math.PI * 2
+        });
+      }
+      const dt = state.dt;
+      if (dt > 0) {
+        for (let i = 0; i < count; i++) {
+          const puff = puffs[i];
+          const vx = puff.baseSpeed * settings.speed + state.wind.x * 35;
+          puff.x += vx * dt / state.width;
+          puff.phase += dt * 0.12 * settings.speed;
+          const margin = Math.max(320 / state.width, 0.65) * puff.scaleX * 0.55;
+          const totalWidth = 1 + margin * 2;
+          if (puff.x > 1 + margin || puff.x < -margin) {
+            puff.x = ((puff.x + margin) % totalWidth + totalWidth) % totalWidth - margin;
+          }
+        }
+      }
+      const ctx = state.ctx;
+      for (let i = 0; i < count; i++) {
+        const puff = puffs[i];
+        const drawW = Math.max(320, state.width * 0.65) * puff.scaleX * (1 + Math.sin(puff.phase) * 0.03);
+        const drawH = Math.max(160, state.height * 0.55) * puff.scaleY;
+        const y = puff.y * state.height + Math.sin(puff.phase) * drawH * 0.08;
+        ctx.globalAlpha = baseAlpha * puff.alpha * (0.9 + Math.sin(puff.phase * 0.7) * 0.1);
+        ctx.drawImage(texture, puff.x * state.width - drawW / 2, y - drawH / 2, drawW, drawH);
+      }
+      ctx.globalAlpha = 1;
+    });
+    return unregister;
+  }, [ticker]);
+  return null;
+}
+
+export { Fog, Rain, Snow, WeatherCanvas };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map