// directionDv3.jsx — the honest cut. Real pill UI, real voice, no invented // diff viewer. Reads like a personal note, because that's what vx is. function DirectionDv3() { const P = VXP; const kicker = { fontFamily: P.mono, fontSize: 13, color: P.coral, letterSpacing: 0.3, marginBottom: 18 }; const h2 = { fontFamily: P.display, fontWeight: 700, fontSize: 30, letterSpacing: -0.8, margin: '0 0 18px' }; const body = { fontSize: 18, lineHeight: 1.72, color: P.mute, margin: '0 0 16px', maxWidth: 660 }; return (
{/* minimal nav */} {/* hero — lead with what it is, then the personal why */}

{COPY.landing.h1}

{COPY.landing.tagline}

{COPY.landing.intro}

{COPY.site.downloadBtn} {COPY.site.githubBtn}
{/* the actual interface — the real pill */}

{COPY.landing.demoCaption}

{/* fast */}

{COPY.landing.fastTitle}

{COPY.landing.fastBody}

{/* how it works — plain, no implementation jargon */}
{COPY.landing.howKicker}

{COPY.landing.howTitle}

{COPY.landing.howBody}

{/* rules — accurate: trigger/replace pairs, per mode, synced via git */}
{COPY.landing.rulesKicker}

{COPY.landing.rulesTitle}

{COPY.landing.rulesBody1}

{COPY.landing.rulesBody2}

{/* a small, real artifact in the actual format */}
{COPY.landing.rulesSampleFilename} 
{`rules:
  - trigger: `}{'"open brace"'}{`
    replace: `}{'"{"'}{`
  - trigger: `}{'"new line"'}{`
    replace: `}{'"\\n"'}{`
  - trigger: `}{'"brb"'}{`
    replace: `}{'"be right back"'}{``}

{COPY.landing.rulesNote}

{/* contexts — modes + auto app detection */}
{COPY.landing.contextsKicker}

{COPY.landing.contextsTitle}

{COPY.landing.contextsBody}

{/* AI — optional, bring your own key, honest about the boundary */}
{COPY.landing.aiKicker}

{COPY.landing.aiTitle}

{COPY.landing.aiBody1}

{COPY.landing.aiBody2}

{/* close, in his words */}

{COPY.landing.close}

{COPY.site.downloadBtn} {COPY.site.githubBtn}
{COPY.landing.vibeCoded}
); } // Faithful recreation of the real vx HUD: gray capsule, X, green level // meter, red stop, and the "Recording" → "Transcribed" label underneath. function RealPillDemo({ P }) { const [phase, setPhase] = React.useState('rec'); // rec | done const [lvl, setLvl] = React.useState(5); React.useEffect(() => { let t; if (phase === 'rec') t = setTimeout(() => setPhase('done'), 2600); else t = setTimeout(() => setPhase('rec'), 1900); return () => clearTimeout(t); }, [phase]); React.useEffect(() => { if (phase !== 'rec') return; const id = setInterval(() => setLvl(3 + Math.floor(Math.random() * 6)), 130); return () => clearInterval(id); }, [phase]); const SEGS = 10; const lit = phase === 'done' ? SEGS : lvl; const seg = (i) => { if (i >= lit) return 'rgba(255,255,255,0.15)'; // empty = dark slot if (phase === 'done') return '#54dd5a'; if (i === lit - 1) return '#c2e64d'; // leading edge = lime/amber return '#54dd5a'; }; return (
{/* capsule — dark */}
{/* X cancel */}
{/* level meter */}
{Array.from({ length: SEGS }).map((_, i) => (
))}
{/* stop */}
{/* status label */}
{phase === 'done' ? 'Transcribed' : 'Recording'}
); } window.DirectionDv3 = DirectionDv3;