// HeroHuly.jsx — alternate hero with a "never-ending" light streak (Huly-style). // Same copy as Hero.jsx; the background swaps the looping video for a layered // system: a static lit arc (base art) + drifting ambient bloom + an SVG path // carrying a bright white highlight that flows along the arc forever. The arc // path is the exact curve from the source art (3832×1642), extended off-screen // at both ends so the moving highlight is born and dies out of view. 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}
); } // arc from the source line.svg (frame 3832×1642), extended along its tangents // past the top and bottom edges so the flowing highlight enters/exits off-view. const HH_ARC = "M2808.4 -696.3 L2740.32 2.4 C2716.68 244.99 2494.09 912.66 1792.94 1642.59 L1024.4 2442.6"; function Hero() { // intro timeline: 0 pitch-black → 1 light grows → 2 surroundings appear → 3 streak flows // intro timeline: 0 pitch-black → 1 IMAGE loads in → 2 white streak appears → 3 streak flows. // gated on the base image's real load so the streak can never beat the image onscreen. const [stage, setStage] = useState(0); const [imgReady, setImgReady] = useState(false); const baseRef = useRef(null); 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), 60); // base image fades / grows in first const t2 = setTimeout(() => setStage(2), 1450); // white-hot streak + bloom arrive on top const t3 = setTimeout(() => setStage(3), 2750); // streak starts flowing + breathing begins return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [imgReady]); return (
{/* ── never-ending streak ─────────────────────────────────────────── */}
); } Object.assign(window, { Hero });