// Story + Science sections const { useEffect: useEffectS, useRef: useRefS, useState: useStateS } = React; /** * CountUp — animates a number from 0 to `to` with easeOutQuart over `duration`ms, * triggered when the element enters the viewport. The `suffix` (e.g. "+") fades * in as a subtle slide once the count lands. If `to === 0` it sits still — used * intentionally for the "0 ANSWERS" stat where stillness is the punchline. * * Respects prefers-reduced-motion: skips animation, shows final state immediately. */ function CountUp({ to, suffix = '', duration = 1400, delay = 0 }) { const ref = useRefS(null); const startedRef = useRefS(false); const [val, setVal] = useStateS(0); const [suffixIn, setSuffixIn] = useStateS(false); useEffectS(() => { if (!ref.current || startedRef.current) return; const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const target = parseInt(to, 10); const obs = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting || startedRef.current) return; startedRef.current = true; // No animation paths: NaN, zero, reduced-motion → snap to final. if (isNaN(target) || target === 0 || reduced) { setVal(isNaN(target) ? 0 : target); setSuffixIn(true); return; } const startTime = performance.now() + delay; let raf; const tick = (now) => { const elapsed = now - startTime; if (elapsed < 0) { raf = requestAnimationFrame(tick); return; } const t = Math.min(1, elapsed / duration); const eased = 1 - Math.pow(1 - t, 4); // easeOutQuart setVal(Math.round(target * eased)); if (t < 1) raf = requestAnimationFrame(tick); else setTimeout(() => setSuffixIn(true), 80); }; raf = requestAnimationFrame(tick); }, { threshold: 0.45, rootMargin: '0px 0px -10% 0px' }); obs.observe(ref.current); return () => obs.disconnect(); }, [to, duration, delay]); return ( {val} {suffix} ); } function Story() { return (
— A letter for you

IBS. Autoimmune Disease. Anxiety. Insomnia. And I'll just go ahead and say it out loud, depression. A chronic, painful, 15 year cycle. 5 colonoscopies before the age of 30. $25K of my hard earned money trying to figure out why my body was so broken. All while continuing to grind at my high-profile NYC corporate jobs, because work comes first, right?

Forget work. Let's talk about dating.

It's hard enough. But dating in New York City? That's a whole different beast. Telling a cute stranger that I haven't had a bowel movement in over a week - and that I couldn't eat 90% of the menu at this expensive restaurant he brought me to - isn't quite the ice breaker.

So I ate it all. I hid it all. I faked my smile. I faked my health. Until I just couldn't anymore.

I felt so broken.

The truth is, it's the system that's broken. $1,000 to book a specialist. Six months for the appointment. Two hours in the waiting room. Ten minutes with the doctor. "It's the stress. Have you tried going gluten free? Get more steps in."

You leave, you book the next one, you hope the next test reveals something. It never does. Meanwhile the industry hands you tests, supplements, programs at absurd prices. And they can, because we are desperate enough to pay at the slightest hope of healing.

By my 30s I was unrecognizable. Infusion treatments between meetings. Steroids that wrecked me. Medications I couldn't pronounce. The isolation took over. I hated what I felt like, what I looked like: constantly bloated, nothing fit anymore. My job was suffering, relationships were suffering. I was losing control of everything. And the stress of it all just made it worse. The cycle ran.

My husband watched it all unfold, until he just couldn't anymore. He said: we're going to figure this out ourselves. So he started building. Every meal. Every bowel movement. Every medication. Every mood. Find the pattern. Predict the flare. Stop the flare.

"Predict the flare." Sounds like a dream. Except, it worked. It is the only thing that has ever worked.

My husband built this app to heal me.

Now we're building it to heal the world.

— Anisha
Co-founder, Gutsy
); } function Science() { const [hours, setHours] = useStateS(34); const [playing, setPlaying] = useStateS(true); const phaseRef = useRefS(0); const rafRef = useRefS(null); useEffectS(() => { let raf; const tick = () => { if (playing) { phaseRef.current += 0.008; } raf = requestAnimationFrame(tick); }; tick(); return () => cancelAnimationFrame(raf); }, [playing]); // Attribution timeline state const [step, setStep] = useStateS(0); useEffectS(() => { const id = setInterval(() => setStep(s => (s + 1) % 4), 2200); return () => clearInterval(id); }, []); return (
02 The Science · Transit Time

Every other app blames
the wrong meal.

Most reactions fire 12 to 72 hours after the bite. Gutsy is the first tracker built around that.

{/* THREE CARDS */}
{/* CARD 1 — TRANSIT */}
01 · Transit
Your Personal Pace
{hours}h
plate to gone
setHours(+e.target.value)} className="dial-slider" />

Every body moves food at its own pace. Gutsy learns yours.

Typical range · 12h–72h+
{/* CARD 2 — JOURNEY */}
02 · Journey
Where reactions begin

Food doesn't hit you in the moment. It hits you hours — sometimes days — later.

Most IBS reactions begin in the colon
{/* CARD 3 — ATTRIBUTION timeline graph */}
03 · Attribution
The math no app does

Your 3pm bloat today? Tuesday's dinner.

Retroactive correlation engine · +44h lag

The first trigger engine built around real human transit time.

Not a food diary. Not a FODMAP lookup. A gut-intelligence system.

); } function AttribGraph({ step }) { const ref = useRefS(null); useEffectS(() => { const c = ref.current; if (!c) return; const ctx = c.getContext('2d'); const dpr = window.devicePixelRatio || 1; const w = 360, h = 200; c.width = w*dpr; c.height = h*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); let raf, t = 0; const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim(); const glow = getComputedStyle(document.documentElement).getPropertyValue('--accent-glow').trim(); const line = 'rgba(125,135,128,0.25)'; // synthetic symptom data — calm, calm, spike (44h after Tue meal) const data = [0.15, 0.18, 0.16, 0.22, 0.2, 0.25, 0.45, 0.62, 0.85, 0.78, 0.6, 0.4, 0.3]; const days = ['M','T','W','Th','F','S','Su']; const draw = () => { t += 0.012; ctx.clearRect(0,0,w,h); const padX = 30, padY = 20, pH = h - padY*2 - 18, pW = w - padX*2; // grid for (let i=0;i<4;i++){ const y = padY + (pH/3)*i; ctx.beginPath(); ctx.moveTo(padX,y); ctx.lineTo(w-padX,y); ctx.strokeStyle=line; ctx.lineWidth=0.5; ctx.setLineDash([2,3]); ctx.stroke(); } ctx.setLineDash([]); // meal marker (Tue) const mealX = padX + pW * (1.5/(data.length-1)); ctx.beginPath(); ctx.moveTo(mealX, padY); ctx.lineTo(mealX, padY+pH); ctx.strokeStyle = 'rgba(125,135,128,0.4)'; ctx.lineWidth=1; ctx.stroke(); ctx.fillStyle = 'rgba(125,135,128,0.7)'; ctx.font = '9px JetBrains Mono'; ctx.fillText('MEAL', mealX-12, padY-6); // symptom marker (Thu spike) const symX = padX + pW * (8/(data.length-1)); ctx.beginPath(); ctx.moveTo(symX, padY); ctx.lineTo(symX, padY+pH); ctx.strokeStyle = accent; ctx.lineWidth=1; ctx.setLineDash([3,3]); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = accent; ctx.fillText('FLARE', symX-14, padY-6); // line graph reveal const reveal = Math.min(1, t*0.5); ctx.beginPath(); const pts = data.map((v,i)=>[padX + pW*(i/(data.length-1)), padY+pH - v*pH]); const upTo = Math.floor(reveal * pts.length); for (let i=0;i<=upTo && i 1){ ctx.lineTo(pts[Math.min(upTo,pts.length-1)][0], padY+pH); ctx.lineTo(padX, padY+pH); ctx.closePath(); const grd = ctx.createLinearGradient(0,padY,0,padY+pH); grd.addColorStop(0, accent+'33'); grd.addColorStop(1, accent+'00'); ctx.fillStyle = grd; ctx.fill(); } // pulsing dot at flare const symY = padY+pH - data[8]*pH; const pulse = (Math.sin(t*2)+1)/2; ctx.beginPath(); ctx.arc(symX, symY, 4+pulse*4, 0, Math.PI*2); ctx.fillStyle = accent; ctx.globalAlpha = 0.3*pulse; ctx.fill(); ctx.globalAlpha=1; ctx.beginPath(); ctx.arc(symX, symY, 3, 0, Math.PI*2); ctx.fillStyle = accent; ctx.fill(); // arc connecting meal -> flare ctx.beginPath(); ctx.moveTo(mealX, padY+pH+4); ctx.bezierCurveTo(mealX+30, padY+pH+24, symX-30, padY+pH+24, symX, padY+pH+4); ctx.strokeStyle = glow; ctx.lineWidth = 1; ctx.setLineDash([3,3]); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = accent; ctx.font = '9px JetBrains Mono'; ctx.textAlign='center'; ctx.fillText('+44H', (mealX+symX)/2, padY+pH+30); // day axis ctx.fillStyle = 'rgba(125,135,128,0.6)'; ctx.font='9px JetBrains Mono'; ctx.textAlign='center'; days.forEach((d,i)=>{ const x = padX + pW*(i/(days.length-1)); ctx.fillText(d, x, h-2); }); raf = requestAnimationFrame(draw); }; draw(); return () => cancelAnimationFrame(raf); }, [step]); return ; } function DialCanvas({ hours }) { const ref = useRefS(null); useEffectS(() => { const c = ref.current; if (!c) return; const ctx = c.getContext('2d'); const dpr = window.devicePixelRatio || 1; const size = 220; c.width = size * dpr; c.height = size * dpr; ctx.setTransform(dpr,0,0,dpr,0,0); let raf, t = 0; const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#1a3a2a'; const muted = getComputedStyle(document.documentElement).getPropertyValue('--line').trim(); const draw = () => { t += 0.008; ctx.clearRect(0,0,size,size); const cx = size/2, cy = size/2; // outer ticks for (let i=0; i<60; i++) { const a = (i/60) * Math.PI * 2 - Math.PI/2; const r1 = 100, r2 = i % 5 === 0 ? 92 : 96; ctx.beginPath(); ctx.moveTo(cx + Math.cos(a)*r1, cy + Math.sin(a)*r1); ctx.lineTo(cx + Math.cos(a)*r2, cy + Math.sin(a)*r2); ctx.strokeStyle = muted; ctx.lineWidth = 1; ctx.stroke(); } // arc to hours const pct = (hours - 12) / 60; const startA = -Math.PI/2; const endA = startA + pct * Math.PI * 2; ctx.beginPath(); ctx.arc(cx, cy, 86, startA, endA); ctx.strokeStyle = accent; ctx.lineWidth = 2; ctx.stroke(); // pulsing dot at end const dx = cx + Math.cos(endA)*86; const dy = cy + Math.sin(endA)*86; const pulse = (Math.sin(t*3)+1)/2; ctx.beginPath(); ctx.arc(dx,dy, 4 + pulse*3, 0, Math.PI*2); ctx.fillStyle = accent; ctx.globalAlpha = 0.3 + pulse*0.7; ctx.fill(); ctx.globalAlpha = 1; ctx.beginPath(); ctx.arc(dx,dy, 3, 0, Math.PI*2); ctx.fillStyle = accent; ctx.fill(); // labels 12 / 36 / 72 ctx.fillStyle = muted; ctx.font = '10px JetBrains Mono'; ctx.textAlign = 'center'; ['12','27','42','57'].forEach((label, i) => { const a = (i/4)*Math.PI*2 - Math.PI/2; ctx.fillText(label+'h', cx + Math.cos(a)*108, cy + Math.sin(a)*108 + 4); }); raf = requestAnimationFrame(draw); }; draw(); return () => cancelAnimationFrame(raf); }, [hours]); return ; } function JourneyAnim() { const ref = useRefS(null); useEffectS(() => { const c = ref.current; if (!c) return; const ctx = c.getContext('2d'); const dpr = window.devicePixelRatio || 1; const w = 360, h = 220; c.width = w*dpr; c.height = h*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); let raf, t = 0; const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim(); const glow = getComputedStyle(document.documentElement).getPropertyValue('--accent-glow').trim(); const muted = getComputedStyle(document.documentElement).getPropertyValue('--line').trim(); // smooth bezier path through stomach -> small intestine -> colon const pts = [[40,60],[80,50],[120,80],[100,130],[160,170],[220,150],[260,110],[310,130],[320,80]]; const sample = (u) => { // catmull-rom-ish smoothing const seg = u * (pts.length-1); const i = Math.floor(seg); const f = seg - i; const p0 = pts[Math.max(0,i-1)], p1 = pts[i], p2 = pts[Math.min(pts.length-1,i+1)], p3 = pts[Math.min(pts.length-1,i+2)]; const ff = f*f, fff = ff*f; const x = 0.5*((2*p1[0])+(-p0[0]+p2[0])*f+(2*p0[0]-5*p1[0]+4*p2[0]-p3[0])*ff+(-p0[0]+3*p1[0]-3*p2[0]+p3[0])*fff); const y = 0.5*((2*p1[1])+(-p0[1]+p2[1])*f+(2*p0[1]-5*p1[1]+4*p2[1]-p3[1])*ff+(-p0[1]+3*p1[1]-3*p2[1]+p3[1])*fff); return [x,y]; }; const draw = () => { t += 0.0028; // slower ctx.clearRect(0,0,w,h); ctx.beginPath(); for (let u=0; u<=1; u+=0.01) { const [x,y] = sample(u); if(u===0) ctx.moveTo(x,y); else ctx.lineTo(x,y); } ctx.strokeStyle = muted; ctx.lineWidth = 1.2; ctx.setLineDash([2,5]); ctx.stroke(); ctx.setLineDash([]); // single fluid bolus with trailing ghosts for (let k=0; k<6; k++) { const u = ((t - k*0.018) % 1 + 1) % 1; const [x,y] = sample(u); const fade = 1 - k/6; const grd = ctx.createRadialGradient(x,y,0,x,y,22*fade); grd.addColorStop(0, glow); grd.addColorStop(1, glow.replace(')', ',0)').replace('rgb','rgba')); ctx.globalAlpha = fade*0.5; ctx.fillStyle = grd; ctx.beginPath(); ctx.arc(x,y,22*fade,0,Math.PI*2); ctx.fill(); } ctx.globalAlpha = 1; const u = (t % 1 + 1) % 1; const [hx,hy] = sample(u); ctx.beginPath(); ctx.arc(hx,hy,4,0,Math.PI*2); ctx.fillStyle = accent; ctx.fill(); ctx.fillStyle = 'rgba(125,135,128,0.5)'; ctx.font = '9px JetBrains Mono'; ctx.textAlign='left'; [['STOMACH',35,40,'2-4H'],['SM. INTESTINE',130,105,'3-5H'],['COLON',280,65,'12-36H']].forEach(([l,x,y,d])=>{ ctx.fillStyle='rgba(125,135,128,0.6)'; ctx.fillText(l,x,y); ctx.fillStyle=accent; ctx.fillText(d,x,y+12); }); raf = requestAnimationFrame(draw); }; draw(); return () => cancelAnimationFrame(raf); }, []); return ; } // Compressed home version: headline + stats + opening + signoff + link to /story function StoryCompact() { return (
06 The Founding Story

"It's stress.
Eat more fiber.
Try yoga."

Built by love. Backed by science.

{[ { num: '20', suffix: '+', label: 'Years of suffering', delay: 0 }, { num: '20', suffix: '+', label: 'Specialists', delay: 160 }, { num: '5', suffix: '', label: 'Colonoscopies', delay: 320 }, { num: '0', suffix: '', label: 'Answers', delay: 0 }, ].map((s, i) => (
{s.label}
))}
— A letter for you

IBS. Autoimmune Disease. Anxiety. Insomnia. And I'll just go ahead and say it out loud, depression. A chronic, painful, 15 year cycle. 5 colonoscopies before the age of 30. $25K of my hard earned money trying to figure out why my body was so broken.

All systems have failed me. So we are building our own.
— Anisha
Co-founder, Gutsy
Read the full letter →
); } window.Story = Story; window.Science = Science; window.StoryCompact = StoryCompact;