import React, { useEffect, useRef, useState } from 'react'; const BG_IMAGE_1 = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260713_140344_79e1296a-86d7-43fd-9b5f-63ffe560f291.png&w=1280&q=85"; const FRONT_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_162101_0d7498c5-29bb-47bf-a99f-2773c0a880a9.mp4"; const OVERLAY_IMAGE = "https://soft-zoom-63098134.figma.site/_assets/v11/3f10f1876e118f72a396e05a6c2d099569478272.png"; export default function Hero() { const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const [smoothPos, setSmoothPos] = useState({ x: 0, y: 0 }); const [maskUrl, setMaskUrl] = useState(''); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePos({ x: e.clientX, y: e.clientY }); }; window.addEventListener('mousemove', handleMouseMove); return () => window.removeEventListener('mousemove', handleMouseMove); }, []); useEffect(() => { let rafId: number; const update = () => { setSmoothPos(prev => ({ x: prev.x + (mousePos.x - prev.x) * 0.08, // Slightly slower lerp for "heavier" feel y: prev.y + (mousePos.y - prev.y) * 0.08 })); rafId = requestAnimationFrame(update); }; rafId = requestAnimationFrame(update); return () => cancelAnimationFrame(rafId); }, [mousePos]); useEffect(() => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); if (!ctx) return; canvas.width = window.innerWidth; canvas.height = window.innerHeight; const radius = 280; // Slightly larger spotlight const gradient = ctx.createRadialGradient( smoothPos.x, smoothPos.y, 0, smoothPos.x, smoothPos.y, radius ); // Enhanced feathering for smoother reveal gradient.addColorStop(0, 'rgba(255, 255, 255, 1)'); gradient.addColorStop(0.3, 'rgba(255, 255, 255, 1)'); gradient.addColorStop(0.55, 'rgba(255, 255, 255, 0.8)'); gradient.addColorStop(0.75, 'rgba(255, 255, 255, 0.3)'); gradient.addColorStop(0.92, 'rgba(255, 255, 255, 0.05)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); setMaskUrl(canvas.toDataURL()); }, [smoothPos]); // Enhanced Parallax const gridX = (mousePos.x - window.innerWidth / 2) * 0.035; const gridY = (mousePos.y - window.innerHeight / 2) * 0.035; return (

{/* Layer 1: Grid Background */}

{/* Layer 2: Background Image */}

{/* Layer 3: Hero Text (Resized to be "In Frame") */}

Measured

{/* Layer 4: Overlay Image (Atmosphere) */}

{/* Layer 5: Spotlight Reveal Video */}

{/* Layer 6: Spotlight Glow (Visual Polish) */}

); }