// Hero — PIN + scroll-scrub: the hero pins to the viewport while the squeegee // sweeps across the window driven by scroll position. When fully clean, the // scroll releases naturally into the next section. function Hero() { const scrubRef = React.useRef(null); const [progress, setProgress] = React.useState(0); // 0..1 squeegee sweep React.useEffect(() => { const onScroll = () => { const el = scrubRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const scrubHeight = el.offsetHeight - window.innerHeight; // how much scroll happens inside // scrolled = how far past the top of the scrubber we are const scrolled = -rect.top; const p = Math.max(0, Math.min(1, scrolled / Math.max(1, scrubHeight))); setProgress(p); }; onScroll(); window.addEventListener('scroll', onScroll, { passive:true }); window.addEventListener('resize', onScroll); window.__setHeroProgress = (v) => setProgress(Math.max(0, Math.min(1, v))); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); return ( // OUTER — tall scroll scrubber. The user scrolls through this range, // and that scroll maps to squeegee progress. 180vh = 80vh of scroll room.
{/* INNER — sticky pinned hero, always fills viewport while scrubber is in frame */}
{/* Subtle grid background */}
{/* LEFT — words */}
Commercial Janitorial · Est. 2004

Experience
the image.

Commercial cleaning across North Idaho and Spokane since 2004 — banks, clinics, offices, schools. Every account Todd has came from a referral.
Call Todd 208·818·3175 See what we clean →
{/* Scroll cue — hint morphs when cleaning is underway */}
{/* RIGHT — foggy window + squeegee */}
{/* Footer data strip */}
22 yrs · Word-of-mouth only Licensed · Bonded · Insured · Green Certified Hayden · Coeur d'Alene · Sandpoint · Spokane
{/* Progress hairline at top of viewport — subtle scrubbing feedback */}
); } function ScrollCue({ progress }) { let label = 'SCROLL TO CLEAN'; if (progress > 0.02 && progress < 0.98) label = `CLEANING · ${Math.round(progress*100)}%`; else if (progress >= 0.98) label = 'KEEP SCROLLING'; return (
{label} {progress < 0.02 && ↓}
); } // ── Squeegee window component ────────────────────────── // A framed window. Behind it: a sharp city scene. // In front: a foggy/dripping overlay with a clean band that expands left→right as `progress` goes 0→1. function SqueegeeWindow({ progress }) { // Pacific Northwest — misty evergreens, moody light over water/mountains const cityImg = 'https://images.unsplash.com/photo-1502786129293-79981df4e689?auto=format&fit=crop&w=1400&q=80'; // Squeegee position (0..1) — RIGHT to LEFT: 100% → 0% const sx = 100 - progress * 100; // Clean band is everything to the right of the squeegee const cleanEdge = 100 - progress * 100; // Droplets — randomized but stable across renders const droplets = React.useMemo(() => { const d = []; for (let i = 0; i < 60; i++) { d.push({ x: Math.random() * 100, y: Math.random() * 100, r: 3 + Math.random() * 7, opacity: .6 + Math.random() * .4, }); } return d; }, []); // Short drip trails under a subset of droplets const drips = React.useMemo(() => { const d = []; for (let i = 0; i < 22; i++) { d.push({ x: Math.random() * 100, yStart: Math.random() * 65, length: 10 + Math.random() * 28, opacity: .4 + Math.random() * .4, delay: Math.random() * 6, duration: 5 + Math.random() * 6, }); } return d; }, []); return (
{/* SHARP BACKGROUND — Pacific Northwest, evergreens in mist */} {/* Subtle tint to marry with the navy */}
{/* SUBTLE CONDENSATION OVERLAY — clipped by clean band (right-to-left reveal). Much lighter than before — think morning mist on glass, not milk. */}
{/* Light haze — soft frost, not opaque */}
{/* Gentle uneven condensation patches */}
{/* A few delicate drips — fewer and softer */} {drips.slice(0, 10).map((d, i) => ( ))}
{/* CLEAN EDGE — very subtle water line left by the blade */} {progress > 0 && progress < 1 && (
)} {/* SQUEEGEE — minimal, professional. Thin charcoal handle, steel channel, black blade. */} {progress > 0.002 && (
{/* Handle — slim matte charcoal, slight angle like it's being held */}
{/* Ferrule — tiny brass collar where handle meets head */}
{/* Steel channel — the thin metal spine holding the blade */}
{/* Rubber blade — thin black line */}
)} {/* FULL CLEAN — shine flash */} {progress >= 1 && (
)}
); } Object.assign(window, { Hero, SqueegeeWindow });