// Página Home - Navas Visual const { useState: useStateHome, useEffect: useEffectHome, useRef: useRefHome } = React; function useGyroParallax() { const [offset, setOffset] = useStateHome({ x: 0, y: 0 }); const smooth = useRefHome({ x: 0, y: 0 }); const target = useRefHome({ x: 0, y: 0 }); const raf = useRefHome(null); const base = useRefHome(null); useEffectHome(() => { let hasOrientation = false; // Primary: deviceorientation (gamma/beta) const onOrientation = (e) => { if (e.gamma === null && e.beta === null) return; hasOrientation = true; const g = e.gamma ?? 0; const b = e.beta ?? 0; if (base.current === null) base.current = { x: g, y: b }; target.current = { x: Math.max(-1, Math.min(1, (g - base.current.x) / 10)), y: Math.max(-1, Math.min(1, (b - base.current.y) / 10)), }; }; // Fallback: devicemotion (acceleration) const onMotion = (e) => { if (hasOrientation) return; const acc = e.accelerationIncludingGravity; if (!acc) return; target.current = { x: Math.max(-1, Math.min(1, -(acc.x ?? 0) / 9)), y: Math.max(-1, Math.min(1, (acc.y ?? 0) / 9)), }; }; const tick = () => { smooth.current.x += (target.current.x - smooth.current.x) * 0.12; smooth.current.y += (target.current.y - smooth.current.y) * 0.12; setOffset({ x: +smooth.current.x.toFixed(4), y: +smooth.current.y.toFixed(4) }); raf.current = requestAnimationFrame(tick); }; window.addEventListener('deviceorientation', onOrientation, true); window.addEventListener('devicemotion', onMotion, true); raf.current = requestAnimationFrame(tick); return () => { window.removeEventListener('deviceorientation', onOrientation, true); window.removeEventListener('devicemotion', onMotion, true); cancelAnimationFrame(raf.current); }; }, []); return offset; } function HomeApp() { const { lang, setLang, t } = useI18n(); const [loading, setLoading] = useStateHome(true); const [ready, setReady] = useStateHome(false); const [transPhase, setTransPhase] = useStateHome(null); const gyro = useGyroParallax(); const layer = (strength) => ({ transform: `translate(${gyro.x * strength}px, ${gyro.y * strength}px)`, willChange: 'transform', }); // Gyro X (-1 a 1) → font-weight 100 a 900 const gyroX = gyro.x; useEffectHome(() => { if (!loading) setTimeout(() => setReady(true), 100); }, [loading]); const navigate = (href) => { setTransPhase('out'); setTimeout(() => { window.location.href = href; }, 600); }; return ( {loading && setLoading(false)} />}