"use client"; import type { CSSProperties, HTMLAttributes } from "react"; import { useEffect, useId, useRef, useState } from "react"; export type DotMatrixFieldProps = HTMLAttributes & { /** Distance between dot centres, in pixels. */ gap?: number; /** Dot radius, in pixels. */ radius?: number; /** Runs a slow highlight band across the field. Pauses offscreen. */ sweep?: boolean; /** Seconds for one sweep. */ sweepDuration?: number; /** Disables the sweep regardless of the visitor's motion preference. */ reducedMotion?: boolean; }; const sweepKeyframes = "@keyframes foundry-dot-sweep{from{-webkit-mask-position:-100% 0;mask-position:-100% 0}to{-webkit-mask-position:200% 0;mask-position:200% 0}}"; const sweepMask = "linear-gradient(90deg, transparent, #000 50%, transparent)"; export function DotMatrixField({ children, gap = 16, radius = 1.1, sweep = true, sweepDuration = 9, reducedMotion = false, className = "", ...props }: DotMatrixFieldProps) { const patternId = "foundry-dots-" + useId().replace(/[^a-zA-Z0-9_-]/g, ""); const root = useRef(null); const [inView, setInView] = useState(true); const [prefersReduced, setPrefersReduced] = useState(false); useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const sync = () => setPrefersReduced(query.matches); sync(); query.addEventListener("change", sync); return () => query.removeEventListener("change", sync); }, []); const animated = sweep && !reducedMotion && !prefersReduced; useEffect(() => { const element = root.current; if (!animated || !element || typeof IntersectionObserver === "undefined") return; const observer = new IntersectionObserver((entries) => { const entry = entries[0]; if (entry) setInView(entry.isIntersecting); }); observer.observe(element); return () => observer.disconnect(); }, [animated]); const sweepStyle: CSSProperties = { maskImage: sweepMask, WebkitMaskImage: sweepMask, maskSize: "50% 100%", WebkitMaskSize: "50% 100%", maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat", animation: "foundry-dot-sweep " + sweepDuration + "s linear infinite", animationPlayState: inView ? "running" : "paused", }; return (

{animated ? ( <> ) : null}

{children}

); }