/* global React, ICONS, useScrollY, WordReveal, useMouseGlow, LightningBolt */ const { useEffect: useHeroEffect, useState: useHeroState, useRef: useHeroRef } = React; function Hero() { const [stage, setStage] = useHeroState(0); const bgRef = useHeroRef(null); const gridRef = useHeroRef(null); const tracesRef = useHeroRef(null); const glowRef = useMouseGlow(); const y = useScrollY(); useHeroEffect(() => { const steps = [60, 280, 700, 1480, 1800]; const timers = steps.map((t, i) => setTimeout(() => setStage(i + 1), t)); return () => timers.forEach(clearTimeout); }, []); useHeroEffect(() => { if (bgRef.current) bgRef.current.style.transform = `translate3d(0, ${y * 0.32}px, 0)`; if (gridRef.current) gridRef.current.style.transform = `translate3d(0, ${y * 0.16}px, 0)`; if (tracesRef.current) tracesRef.current.style.transform = `translate3d(0, ${y * 0.08}px, 0)`; }, [y]); const visible = (i) => stage >= i; const on = (i) => (visible(i) ? "is-in" : ""); return (
); } function HeroBackdrop({ bgRef, gridRef, tracesRef }) { return ( <>
); } window.Hero = Hero;