// Hero with shader-style canvas backdrop + STUND wave + magnetic nav const { useEffect, useRef, useState } = React; // ─────────────────────────── Shader-ish canvas ──────────────────────────── function HeroShader() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let raf, t = 0; let w, h, dpr; const resize = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); w = canvas.clientWidth; h = canvas.clientHeight; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; resize(); window.addEventListener('resize', resize); // Pseudo-shader: layered radial gradients + flow field of dots/lines const N = 140; const particles = Array.from({ length: N }, () => ({ x: Math.random(), y: Math.random(), r: 0.3 + Math.random() * 1.6, s: 0.2 + Math.random() * 0.8, a: Math.random() * Math.PI * 2, })); const draw = () => { t += 0.005; // Base gradient backdrop - deep black with orange glow const cx = w / 2 + Math.sin(t * 0.5) * w * 0.08; const cy = h * 0.55 + Math.cos(t * 0.4) * h * 0.05; const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(w, h) * 0.7); g.addColorStop(0, 'rgba(240,85,3,0.18)'); g.addColorStop(0.35, 'rgba(40,12,4,0.6)'); g.addColorStop(1, 'rgba(5,5,5,1)'); ctx.fillStyle = g; ctx.fillRect(0, 0, w, h); // Secondary cool glow const g2 = ctx.createRadialGradient(w * 0.85, h * 0.15, 0, w * 0.85, h * 0.15, w * 0.5); g2.addColorStop(0, 'rgba(80, 40, 120, 0.18)'); g2.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = g2; ctx.fillRect(0, 0, w, h); // Flowing curves — wireframe mesh feel ctx.strokeStyle = 'rgba(240,85,3,0.06)'; ctx.lineWidth = 1; for (let i = 0; i < 24; i++) { ctx.beginPath(); const off = i / 24; for (let x = 0; x <= w; x += 12) { const nx = x / w; const y = h * 0.5 + Math.sin(nx * 6 + t * 1.2 + off * 6) * 80 * Math.sin(t * 0.3 + off * 3) + Math.cos(nx * 3 + t * 0.7) * 40 + (off - 0.5) * h * 1.4; if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); } // Particles particles.forEach((p) => { p.a += 0.005 * p.s; p.x += Math.cos(p.a) * 0.0007 * p.s; p.y += Math.sin(p.a) * 0.0007 * p.s; if (p.x < 0) p.x = 1; if (p.x > 1) p.x = 0; if (p.y < 0) p.y = 1; if (p.y > 1) p.y = 0; ctx.fillStyle = `rgba(255,255,255,${0.15 + Math.sin(t + p.a) * 0.1})`; ctx.beginPath(); ctx.arc(p.x * w, p.y * h, p.r, 0, Math.PI * 2); ctx.fill(); }); // Sweep line const sweepX = ((Math.sin(t * 0.4) + 1) / 2) * w; const lg = ctx.createLinearGradient(sweepX - 200, 0, sweepX + 200, 0); lg.addColorStop(0, 'rgba(240,85,3,0)'); lg.addColorStop(0.5, 'rgba(240,85,3,0.08)'); lg.addColorStop(1, 'rgba(240,85,3,0)'); ctx.fillStyle = lg; ctx.fillRect(0, 0, w, h); raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return (

{waveOn ? word.split('').map((c, i) => {c}) : word}