// HeroStreak.jsx — Siteworks hero with a breathing solar halo. // Same copy as Hero.jsx; the background swaps the looping video for a layered // system: a static solar halo image + drifting ambient bloom + an SVG overlay // carrying a bright horizontal highlight across the beam. function StarRating({ brand, alt, brandH, score, kind, base = 2.1, step = 0.15 }) { const STARS = 5; const [rated, setRated] = useState(false); const starsRef = useRef(null); useEffect(() => { const whiteAt = (base + (STARS - 1) * step + 0.5) * 1000; const t = setTimeout(() => setRated(true), whiteAt); return () => clearTimeout(t); }, []); // pointer-following spotlight: brand color blooms under the cursor across the stars const track = (e) => { const el = starsRef.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty("--mx", (e.clientX - r.left).toFixed(1) + "px"); el.style.setProperty("--my", (e.clientY - r.top).toFixed(1) + "px"); }; const reset = () => { const el = starsRef.current; if (!el) return; el.style.setProperty("--mx", "-200px"); }; return (
{alt} {Array.from({ length: STARS }).map((_, i) => ( ★ ))} {score}
); } // Coordinates match assets/hero/halo-base.png (2400×1260), derived from the // high-resolution Siteworks solar-beam share artwork. const HH_BEAM = "M760 630 L2390 630"; const HH_RING = { cx: 1742, cy: 632, r: 350 }; const HH_FLOOR = { cx: 1742, cy: 925, rx: 560, ry: 70 }; function Hero() { // intro timeline: 0 dark → 1 ring draws in → 2 beam draws across → 3 ambient motion starts. // gated on the base image's real load so the final ambient layer never flashes in late. const [stage, setStage] = useState(0); const [imgReady, setImgReady] = useState(false); const baseRef = useRef(null); const ringOn = stage >= 1; const beamOn = stage >= 2; const environmentOn = stage >= 3; const ringStyle = { opacity: ringOn ? 1 : 0, strokeDashoffset: ringOn ? 0 : 1000 }; const beamStyle = { opacity: beamOn ? 1 : 0, strokeDashoffset: beamOn ? 0 : 1000 }; const environmentStyle = { opacity: environmentOn ? 1 : 0 }; const pulseStyle = { strokeOpacity: environmentOn ? 1 : 0 }; const floorStyle = { opacity: environmentOn ? 1 : ringOn ? 0.62 : 0, transform: ringOn ? "none" : "scaleX(.18)", transformOrigin: "72.5% 73%", }; useEffect(() => { const img = baseRef.current; if (img && img.complete && img.naturalWidth) setImgReady(true); }, []); useEffect(() => { if (!imgReady) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setStage(3); return; } const t1 = setTimeout(() => setStage(1), 80); // solar ring appears first const t2 = setTimeout(() => setStage(2), 900); // horizontal beam follows quickly const t3 = setTimeout(() => setStage(3), 1350); // artwork arrives shortly after the ring return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [imgReady]); return (
{/* ── never-ending streak ─────────────────────────────────────────── */}
); } Object.assign(window, { Hero });