"use client"; import { useEffect, useMemo, useState } from "react"; function clamp(value: number) { return Math.min(Math.max(value, 0), 1); } export default function CleaningOverlay() { const [progress, setProgress] = useState(0); const dust = useMemo( () => Array.from({ length: 38 }, (_, index) => ({ left: (index * 37) % 100, top: (index * 61) % 100, size: 1 + (index % 4), delay: (index % 9) * -0.43, duration: 5 + (index % 7) * 0.8, })), [], ); const droplets = useMemo( () => Array.from({ length: 11 }, (_, index) => ({ top: 9 + ((index * 17) % 75), offset: 18 + ((index * 29) % 130), size: 4 + (index % 4) * 2, delay: (index % 5) * 0.08, })), [], ); const sparkles = useMemo( () => Array.from({ length: 8 }, (_, index) => ({ top: 12 + ((index * 23) % 72), offset: 24 + ((index * 31) % 150), size: 5 + (index % 3) * 3, delay: (index % 4) * 0.11, })), [], ); useEffect(() => { let frame = 0; const update = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(() => { const hero = document.getElementById("home"); if (!hero) return; const rect = hero.getBoundingClientRect(); /* * The cleaning pass happens during the first section of scrolling. * It starts immediately and completes before the hero leaves. */ const travel = Math.max(window.innerHeight * 0.72, 1); const nextProgress = clamp(-rect.top / travel); setProgress(nextProgress); }); }; update(); window.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { cancelAnimationFrame(frame); window.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, []); /* * Sweep begins outside the right edge and moves once to the left. */ const sweepX = 112 - progress * 128; const effectVisible = progress > 0.015 && progress < 0.985; const dirtOpacity = Math.max(0, 0.46 * (1 - progress)); const trailOpacity = effectVisible ? Math.min(progress * 8, (1 - progress) * 8, 1) : 0; return (