/* IMMERSIVE cinematic hero — Dexpress Truly different now: Canvas-driven motion blur on the photo, animated rain/streaks along motion vectors, depth-of-field bokeh from passing lights, dynamic colour grade that shifts with time-of-day cycle, and a true "speed line" effect that makes the truck feel like it's moving at 100 km/h. */ function CinematicHighwayHero({ eyebrow, title, sub, primary, secondary, kicker, photo = 'assets/truck-highway-1.jpg' }) { const canvasRef = React.useRef(null); const photoRef = React.useRef(null); const [t, setT] = React.useState(0); const [loaded, setLoaded] = React.useState(false); React.useEffect(() => { let raf; const start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Canvas particle system: speed lines + bokeh + rain streaks React.useEffect(() => { const c = canvasRef.current; if (!c) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); const resize = () => { c.width = c.clientWidth * dpr; c.height = c.clientHeight * dpr; }; resize(); window.addEventListener('resize', resize); const ctx = c.getContext('2d'); // particles — moderate density, calmer speeds (still constant motion) const speedLines = Array.from({length: 110}, () => ({ x: Math.random(), y: Math.random(), len: 0.04 + Math.random() * 0.28, v: 0.5 + Math.random() * 1.6, a: 0.12 + Math.random() * 0.5, })); const bokeh = Array.from({length: 18}, () => ({ x: Math.random(), y: 0.25 + Math.random() * 0.6, r: 8 + Math.random() * 32, v: 0.05 + Math.random() * 0.20, hue: Math.random() < 0.6 ? 'warm' : (Math.random() < 0.5 ? 'red' : 'blue'), a: 0.2 + Math.random() * 0.4, })); let raf; const draw = () => { const w = c.width, h = c.height; ctx.clearRect(0, 0, w, h); // Speed lines (horizontal motion blur streaks) ctx.lineCap = 'round'; for (const p of speedLines) { p.x -= p.v * 0.012; if (p.x < -0.3) p.x = 1 + Math.random() * 0.2; const grad = ctx.createLinearGradient((p.x + p.len) * w, p.y * h, p.x * w, p.y * h); grad.addColorStop(0, `rgba(245,242,236,${p.a})`); grad.addColorStop(1, 'rgba(245,242,236,0)'); ctx.strokeStyle = grad; ctx.lineWidth = 0.8 * dpr; ctx.beginPath(); ctx.moveTo(p.x * w, p.y * h); ctx.lineTo((p.x + p.len) * w, p.y * h); ctx.stroke(); } // Bokeh — soft glowing orbs drifting (out-of-focus oncoming lights) for (const b of bokeh) { b.x -= b.v * 0.008; if (b.x < -0.2) { b.x = 1.1 + Math.random() * 0.3; b.y = 0.3 + Math.random() * 0.5; } const r = b.r * dpr; const cx = b.x * w, cy = b.y * h; const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r); const color = b.hue === 'red' ? '255,80,90' : b.hue === 'blue' ? '120,160,255' : '255,230,180'; grad.addColorStop(0, `rgba(${color},${b.a})`); grad.addColorStop(0.4, `rgba(${color},${b.a * 0.4})`); grad.addColorStop(1, `rgba(${color},0)`); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill(); } raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); // TRULY continuous forward zoom — two layers offset by half a cycle. // Cycle tuned slower for a calmer dolly while particles still carry motion. const cycle = 14; // seconds per zoom — calmer pace const phaseA = (t % cycle) / cycle; // 0 → 1 (layer A) const phaseB = ((t + cycle / 2) % cycle) / cycle; // 0 → 1 (layer B, offset) const zoomA = 1.0 + phaseA * 0.18; // 1.0 → 1.18 const zoomB = 1.0 + phaseB * 0.18; // Sine² crossfade — A peaks when B snaps, vice versa const opA = Math.sin(phaseA * Math.PI) ** 2; const opB = Math.sin(phaseB * Math.PI) ** 2; const sum = opA + opB || 1; const aOpacity = opA / sum; const bOpacity = opB / sum; // Live HUD const speed = 98 + Math.round(4 * Math.sin(t * 0.6)); // Camera-jostle: tiny irregular vertical bob (chase-vehicle on imperfect pavement) // Sub-pixel amplitude, multi-frequency — reads as "alive" not "shaking" const jostleY = Math.sin(t * 7.3) * 0.6 + Math.sin(t * 11.7) * 0.4 + Math.sin(t * 3.1) * 0.3; const jostleX = Math.sin(t * 5.2) * 0.4 + Math.sin(t * 13.1) * 0.2; // Heat shimmer phase — oscillates the road-level distortion band const heatPhase = Math.sin(t * 2.4) * 0.5 + Math.sin(t * 3.7) * 0.5; // Time-of-day color shift const phase = (t * 0.02) % 1; const warmth = 0.4 + 0.4 * Math.sin(phase * Math.PI * 2); return (
{/* === DOLLY LAYER A — background blur + sharp foreground === */}
setLoaded(true)} style={{ position:'absolute', inset:'-4%', width:'108%', height:'108%', objectFit:'cover', transform: `scale(${zoomA * 1.05})`, transformOrigin: 'center 60%', filter: `contrast(1.15) saturate(0.7) brightness(0.42) blur(6px) hue-rotate(${-8 + warmth * 16}deg)`, willChange: 'transform', }}/>
{/* === DOLLY LAYER B — same, half-cycle offset, fades in as A fades out === */}
{/* === Layer 3: Canvas particle system (speed lines, bokeh) === */} {/* === Road-level dust haze — warm particles drifting along the bottom third, suggests dust kicked up around the wheels without animating them === */}
{[0,1,2,3,4,5,6,7].map(i => { const seed = i * 1.7; const x = ((t * (0.04 + i * 0.012) + seed) % 1.4) * 100 - 20; const y = 20 + 60 * ((Math.sin(t * 0.3 + seed) + 1) / 2); const sz = 180 + (i % 3) * 90; return (
); })}
{/* === Heat-shimmer band at road level — slight vertical squeeze of a thin slice, oscillating, sells "hot asphalt" without warping the truck === */}
{/* === Layer 4: Anamorphic letterbox === */}
{/* === Layer 5: Cinematic colour grade === */}
{/* === Layer 6: Lens flare from approaching headlight === */}
{/* === Layer 7: Chromatic aberration band (subtle) === */}
{/* === Layer 8: Film grain === */}
{/* === Layer 9: Vertical edge vignette === */}
{/* === Top HUD === */}
{kicker || 'DISPATCH LIVE · 24/7'} REC ● {String(Math.floor(t/60)).padStart(2,'0')}:{String(Math.floor(t)%60).padStart(2,'0')}.{String(Math.floor(t*100)%100).padStart(2,'0')}
{/* === Main copy === */}
{eyebrow}

{title}

{sub}

{primary} {secondary}
{/* === Bottom HUD with telemetry === */}
{/* Speedometer-style ring on right */}
{speed} KM/H
{/* Brand seal lines */}
); } function HudCell({ k, v, accent, live }) { return (
{live && } {k}
{v}
); } window.CinematicHighwayHero = CinematicHighwayHero;