"use client"; import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react"; const reducedMotionQuery = "(prefers-reduced-motion: reduce)"; function subscribeToReducedMotion(callback: () => void) { const query = window.matchMedia(reducedMotionQuery); query.addEventListener("change", callback); return () => query.removeEventListener("change", callback); } function usePrefersReducedMotion(force?: boolean) { const prefersReducedMotion = useSyncExternalStore( subscribeToReducedMotion, () => window.matchMedia(reducedMotionQuery).matches, () => false ); return Boolean(force) || prefersReducedMotion; } type AuroraMeshBackgroundProps = { children?: ReactNode; className?: string; /** Classes for the content layer that wraps children. */ contentClassName?: string; /** Night-sky base color. */ baseColor?: string; /** Three curtain colors, from the brightest band to the faint upper edge. */ colors?: [string, string, string]; /** Seconds for one drift cycle. */ speed?: number; /** Forces the static layout even when the OS allows motion. */ reducedMotion?: boolean; }; const defaultColors: [string, string, string] = [ "rgba(52, 211, 153, 0.55)", "rgba(190, 242, 100, 0.28)", "rgba(244, 114, 182, 0.2)", ]; const curtains = [ { top: "-6%", left: "-20%", rotate: -8, drift: "10%", pace: 1 }, { top: "10%", left: "-10%", rotate: -14, drift: "-8%", pace: 1.4 }, { top: "-18%", left: "5%", rotate: 4, drift: "6%", pace: 1.8 }, ]; export function AuroraMeshBackground({ children, className = "", contentClassName = "", baseColor = "#06110f", colors = defaultColors, speed = 18, reducedMotion, }: AuroraMeshBackgroundProps) { const root = useRef(null); const shouldReduceMotion = usePrefersReducedMotion(reducedMotion); useEffect(() => { const node = root.current; if (!node || shouldReduceMotion) return; const animations = Array.from(node.querySelectorAll("[data-aurora-curtain]")).map((element, index) => { if (typeof element.animate !== "function") return null; const curtain = curtains[index]; return element.animate( [ { transform: "translate3d(0, 0, 0) rotate(" + curtain.rotate + "deg) scaleY(1)" }, { transform: "translate3d(" + curtain.drift + ", 3%, 0) rotate(" + (curtain.rotate + 4) + "deg) scaleY(1.3)" }, ], { duration: speed * 1000 * curtain.pace, direction: "alternate", easing: "ease-in-out", iterations: Infinity } ); }); return () => animations.forEach((animation) => animation?.cancel()); }, [shouldReduceMotion, speed]); return (

Aurora likely over Tromsø tonight

Aurora likely over Tromsø tonight