// Hero — peristaltic biological motion canvas const { useEffect, useRef, useState } = React; function PeristalticCanvas({ theme }) { const canvasRef = useRef(null); const mouseRef = useRef({ x: 0.5, y: 0.5, tx: 0.5, ty: 0.5 }); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let raf, w, h, dpr; const resize = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); const rect = canvas.getBoundingClientRect(); w = rect.width; h = rect.height; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; resize(); window.addEventListener('resize', resize); const onMove = (e) => { const rect = canvas.getBoundingClientRect(); mouseRef.current.tx = (e.clientX - rect.left) / rect.width; mouseRef.current.ty = (e.clientY - rect.top) / rect.height; }; window.addEventListener('mousemove', onMove); const palette = theme === 'dark' ? { bg: '#0a0e0c', wave: 'rgba(212, 223, 183, ', glow: 'rgba(201, 232, 163, ', deep: 'rgba(168, 193, 148, ' } : { bg: '#f0ebe1', wave: 'rgba(26, 58, 42, ', glow: 'rgba(45, 87, 64, ', deep: 'rgba(107, 162, 126, ' }; let t = 0; const draw = () => { t += 0.005; // ease mouse mouseRef.current.x += (mouseRef.current.tx - mouseRef.current.x) * 0.05; mouseRef.current.y += (mouseRef.current.ty - mouseRef.current.y) * 0.05; const mx = mouseRef.current.x, my = mouseRef.current.y; // clear with subtle fade for trail ctx.fillStyle = theme === 'dark' ? 'rgba(10,14,12,0.12)' : 'rgba(240,235,225,0.12)'; ctx.fillRect(0, 0, w, h); // peristaltic flowing waves — concentric organic ribbons const cx = w * (0.55 + (mx - 0.5) * 0.15); const cy = h * (0.5 + (my - 0.5) * 0.1); const layers = 22; for (let l = 0; l < layers; l++) { const phase = t + l * 0.18; const baseR = 60 + l * 24; ctx.beginPath(); const steps = 220; for (let i = 0; i <= steps; i++) { const a = (i / steps) * Math.PI * 2; // peristaltic squeeze: multi-wave radial deformation const sq1 = Math.sin(a * 3 + phase * 1.3) * 18; const sq2 = Math.sin(a * 5 - phase * 0.7) * 10; const sq3 = Math.sin(a * 2 + phase * 0.5 + l * 0.4) * 26; // mouse warp const dx = Math.cos(a), dy = Math.sin(a); const mxw = (mx - 0.5) * 120 * Math.cos(a + phase * 0.3); const myw = (my - 0.5) * 80 * Math.sin(a - phase * 0.2); const r = baseR + sq1 + sq2 + sq3; const x = cx + dx * r + mxw * (l / layers); const y = cy + dy * r * 0.62 + myw * (l / layers); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.closePath(); const fade = Math.pow(1 - l / layers, 1.4); const alpha = 0.04 + fade * 0.10; ctx.strokeStyle = (l % 3 === 0 ? palette.glow : palette.wave) + alpha + ')'; ctx.lineWidth = 1 + (l % 4 === 0 ? 0.5 : 0); ctx.stroke(); } // bright moving nucleus const grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, 280); grd.addColorStop(0, palette.glow + '0.32)'); grd.addColorStop(0.5, palette.deep + '0.10)'); grd.addColorStop(1, palette.wave + '0)'); ctx.fillStyle = grd; ctx.fillRect(0, 0, w, h); // particles drifting const pCount = 40; for (let i = 0; i < pCount; i++) { const a = (i / pCount) * Math.PI * 2 + t * 0.4; const r = 80 + ((i * 17) % 360) + Math.sin(t + i) * 30; const x = cx + Math.cos(a) * r; const y = cy + Math.sin(a) * r * 0.62; ctx.beginPath(); ctx.arc(x, y, 1 + (i % 3) * 0.5, 0, Math.PI * 2); ctx.fillStyle = palette.glow + (0.3 + (i % 5) * 0.1) + ')'; ctx.fill(); } raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', onMove); }; }, [theme]); return ; } function Hero({ theme }) { const [time, setTime] = useState(''); useEffect(() => { const update = () => { const d = new Date(); const t = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'America/Los_Angeles' }); setTime(t + ' PT'); }; update(); const id = setInterval(update, 30000); return () => clearInterval(id); }, []); return (

Go with
your gut.

Six weeks. Real evidence.
Your gut, finally understood.

Begin Your Protocol →
07d free trial
No credit card
iOS 17.0+
5★
App Store
10+
Clinical research reports
Rx
Doctor recommended
100%
On-device privacy
Scroll
); } window.Hero = Hero;