"use client"; import { animate, createScope, stagger } from "animejs"; 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 HaikeiBlobSceneBgProps = { children?: ReactNode; className?: string; /** Classes for the content layer that wraps children. */ contentClassName?: string; /** Keeps the blobs still, even when the OS allows motion. */ reducedMotion?: boolean; }; export function HaikeiBlobSceneBg({ children, className = "", contentClassName = "", reducedMotion }: HaikeiBlobSceneBgProps) { const root = useRef(null); const shouldReduceMotion = usePrefersReducedMotion(reducedMotion); useEffect(() => { if (!root.current || shouldReduceMotion) return; const scope = createScope({ root }).add(() => { animate(".blob-layer", { scale: [1, 1.04], rotate: [-2, 2], delay: stagger(160), duration: 1800, loop: true, alternate: true, ease: "inOut(2)", }); }); return () => scope.revert(); }, [shouldReduceMotion]); return (

{children}

); }

Saturday market, 8:00 to 13:00

Saturday market, 8:00 to 13:00