{/* Left nav */}

ToInbox

{[ { label: 'Dashboard', active: true, icon: '⊞' }, { label: 'Applications', active: false, icon: '↗' }, { label: 'Emails', active: false, icon: '✉' }, { label: 'Settings', active: false, icon: '⚙' }, ].map((item) => (

{item.icon}{item.label}

))}

42 credits left

{/* Main content */}

{/* Header */}

Dashboard

Week of May 12, 2026 · Arjun Sharma

● Live

{/* Stats row */}

{[ { k: 'Enrolled', v: 18, color: '#333' }, { k: 'Sent', v: 14, color: '#333' }, { k: 'Replied', v: replyVisible ? 6 : 5, color: '#057642' }, { k: 'Interviews', v: 4, color: '#1a56db' }, ].map(({ k, v, color }) => (

{v}

{k}

))}

{/* App list */}

Company

Role

Sent

Status

{APPS.map((a, i) => (

{a.logo}

{a.co}

{a.role}

{a.sent}

{a.statusLabel}

))}

{/* Reply thread — visible step 6 */} {replyVisible && (

Marcus Webb · Northwind

Mon 9:14 AM · 2h after your send

NEW REPLY

"Arjun — this stood out from 240+ applications we got. The v3 reference tells me you actually read what we shipped. Forwarding to Priya (Head of Eng) — she'll reach out this week."

FORWARDED TO ENG INTERVIEW THIS WEEK

)}

); } // ── Step 0: single-job dark panel with animated cursor ── function HiwEnrollPanel() { const [phase, setPhase] = useStateHIW('detecting'); // 'detecting' | 'ready' | 'sending' | 'sent' const [activeJob, setActiveJob] = useStateHIW(null); const [curX, setCurX] = useStateHIW(90); const [curY, setCurY] = useStateHIW(30); const [clicking, setClicking] = useStateHIW(false); useEffectHIW(() => { let timers = []; const after = (ms, fn) => { const t = setTimeout(fn, ms); timers.push(t); }; const loop = () => { setPhase('detecting'); setActiveJob(null); setCurX(90); setCurY(30); setClicking(false); // Job gets detected after(900, () => { setActiveJob(HIW_JOBS[0]); setPhase('ready'); }); // Cursor moves to Send button after(1500, () => { setCurX(90); setCurY(192); }); // Click after(2100, () => { setClicking(true); setPhase('sending'); }); after(2260, () => setClicking(false)); // Sent after(3100, () => setPhase('sent')); after(4600, loop); }; loop(); return () => timers.forEach(clearTimeout); }, []); const job = activeJob || HIW_JOBS[0]; return (

{/* Credits row */}

0 of 42 credits used today

{/* Stats */}

{[{ k: 'ENROLLED', v: 4 }, { k: 'SENT', v: 2 }, { k: 'REPLIED', v: 1 }].map(({ k, v }) => (

{v}

{k}

))}

{/* Active job card */}

{activeJob ? (

{job.logo}

{job.title}

{job.co}

) : (

Detecting active job…

)}

{/* CTA */}

{phase === 'detecting' && (

Send Application — 1 credit

)} {phase === 'ready' && (

Send Application — 1 credit

)} {phase === 'sending' && (

Sending…

)} {phase === 'sent' && (

✓ Application Sent

)}

Personalized email sent from your Gmail.

{/* Cursor — positioned relative to this panel wrapper */}

); } // ── Step 3 sent panel: cursor clicks "View Dashboard" button ── function HiwSentPanel() { const [clicking, setClicking] = useStateHIW(false); useEffectHIW(() => { let timers = []; const after = (ms, fn) => { const t = setTimeout(fn, ms); timers.push(t); }; const loop = () => { setClicking(false); after(900, () => setClicking(true)); after(1070, () => setClicking(false)); after(2800, loop); }; loop(); return () => timers.forEach(clearTimeout); }, []); return (

Sent successfully

✓

Sent to m.v@northwind.co

Resume attached · delivery confirmed

📊 View Dashboard →

{/* Cursor on the View Dashboard button */}

); } // ── 3-col LinkedIn browser body ── function HiwLinkedIn({ step, typed }) { const jpPanel = () => { // Step 0: detect + enroll with animated cursor if (step === 0) return ; // Step 1: AI scanning if (step === 1) return (

AI analyzing…

{[ { k: 'Resume parsed', v: '14 signals' }, { k: 'JD analyzed', v: '9 keywords' }, { k: 'Founder found', v: 'm.v@northwind.co' }, ].map(({ k, v }, i) => (

✓ {k} {v}

))}

); // Step 2: cover letter generation if (step === 2) return (

Generating…

To · m.v@northwind.co

{typed}

); // Step 3: sent if (step === 3) return ; return null; }; return (

{/* Job list */}

99+ results

{HIW_JOBS.map((j, i) => (

{j.logo}

{j.title}

{j.co} · {i === 0 ? '2d · 784' : i === 1 ? '1w · 142' : '5d · 61'}

Easy Apply {step >= 3 && i === 0 && ✓ Applied}

))}

Product Manager

Atlas Health · SF

{/* Detail */}

Northwind

Series A · 48 employees

Founding Product Engineer

San Francisco·2d ago·784 applicants

✦ Top applicant — profile matches 94% of JD

About the job

{[95, 82, 68, 88, 55, 74, 61].map((w, i) => (

))}

Skills

{['TypeScript', 'Go', 'PostgreSQL', 'React'].map(s => ( {s} ))}

{/* JP sidebar — always dark */}

ToInbox Dashboard −

{jpPanel()}

); } function HowitworksBrowser({ step, typed, replyVisible }) { const isDash = step >= 4; return (

{/* Chrome bar */}

{!isDash && (

Gmail

)}

{isDash ? 'app.toinbox.co/dashboard' : 'linkedin.com/jobs/search/?keywords=founding+engineer'}

{isDash ? : }

); } function HowItWorks() { const [active, setActive] = useStateHIW(0); const [typed, setTyped] = useStateHIW(''); const [visible, setVisible] = useStateHIW(true); // Inject smooth CSS keyframe for progress bar — avoids rAF/setState jank useEffectHIW(() => { const s = document.createElement('style'); s.id = 'hiw-bar-kf'; s.textContent = '@keyframes hiwBarFill { from { width:0% } to { width:100% } }'; document.head.appendChild(s); return () => { const el = document.getElementById('hiw-bar-kf'); if (el) el.remove(); }; }, []); const tickRef = useRefHIW(null); const typeRef = useRefHIW(null); const startedRef = useRefHIW(false); const activeRef = useRefHIW(0); useEffectHIW(() => { const el = document.getElementById('how-section'); if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !startedRef.current) { startedRef.current = true; start(); } }); }, { threshold: 0.12 }); io.observe(el); const fb = setTimeout(() => { if (!startedRef.current) { startedRef.current = true; start(); } }, 1800); return () => { io.disconnect(); clearTimeout(fb); }; }, []); const transitionTo = (idx) => { setVisible(false); setTimeout(() => { setActive(idx); activeRef.current = idx; setTyped(''); setVisible(true); }, 180); }; const start = () => { let idx = 0; activeRef.current = 0; setActive(0); setVisible(true); let startTime = Date.now(); cancelAnimationFrame(tickRef.current); const tick = () => { const elapsed = Date.now() - startTime; if (elapsed >= STEP_MS[idx]) { const next = (idx + 1) % HIW_STEPS.length; idx = next; startTime = Date.now(); transitionTo(next); } tickRef.current = requestAnimationFrame(tick); }; tickRef.current = requestAnimationFrame(tick); }; // Typing effect for step 2 (cover letter) useEffectHIW(() => { if (active === 2) { setTyped(''); let i = 0; const type = () => { if (i <= FULL_LETTER.length) { setTyped(FULL_LETTER.slice(0, i)); i += 5; typeRef.current = setTimeout(type, 16); } }; typeRef.current = setTimeout(type, 200); } else { clearTimeout(typeRef.current); } return () => clearTimeout(typeRef.current); }, [active]); useEffectHIW(() => () => { cancelAnimationFrame(tickRef.current); clearTimeout(typeRef.current); }, []); const jumpTo = (i) => { cancelAnimationFrame(tickRef.current); transitionTo(i); let idx = i; let startTime = Date.now(); const tick = () => { const elapsed = Date.now() - startTime; if (elapsed >= STEP_MS[idx]) { const next = (idx + 1) % HIW_STEPS.length; idx = next; startTime = Date.now(); transitionTo(next); } tickRef.current = requestAnimationFrame(tick); }; tickRef.current = requestAnimationFrame(tick); }; return (

How it works

From LinkedIn tab to founder inbox
in fifteen seconds.

ToInbox lives inside the LinkedIn workflow you already use. Watch it happen live.

{/* Step list */}

{HIW_STEPS.map((st, i) => (

jumpTo(i)} >

{i < active ? : String(i + 1).padStart(2, '0')}

{st.t}

{i === active &&

{st.s}

}

{i === active && (

)}

))}

{/* Continuous browser */}

); } window.HowItWorks = HowItWorks;

From LinkedIn tab to founder inboxin fifteen seconds.

From LinkedIn tab to founder inbox
in fifteen seconds.