// vx-shared.jsx — shared tokens + components for all vx landing directions. // Exports to window at the bottom (separate babel scopes don't share scope). const VXP = { ink: '#161618', // darkest ink900: '#1b1b1e', ink850: '#212125', ink800: '#27272c', // panels ink750: '#2e2e33', // site theme color line: 'rgba(255,255,255,0.09)', line2: 'rgba(255,255,255,0.16)', text: '#ECEAE6', mute: '#9c9ba2', faint: '#6c6b72', blue: '#6f9fe8', blueBright: '#8fb6f2', blueDim: 'rgba(111,159,232,0.14)', coral: '#e8825f', coralDim: 'rgba(232,130,95,0.16)', green: '#5fb98e', display: '"Space Grotesk", "Helvetica Neue", system-ui, sans-serif', mono: '"JetBrains Mono", ui-monospace, "SF Mono", monospace', poster: '"Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif', body: '"Space Grotesk", "Helvetica Neue", system-ui, sans-serif', }; // ── Pixel mascot ─────────────────────────────────────────────── // Original little ghost/critter rendered from a char-map of squares. // '#' = body, 'o' = eye (transparent), '.' = empty. const VX_CRITTER = [ '..######..', '.########.', '########..', // antenna nub handled separately if needed '#oo##oo###', '#oo##oo###', '##########', '##########', '####..####', '###.##.###', '##.####.##', ]; function PixelMascot({ px = 6, color = VXP.coral, eye = VXP.ink, blink = true, style = {} }) { const rows = VX_CRITTER; const w = rows[0].length, h = rows.length; const [closed, setClosed] = React.useState(false); React.useEffect(() => { if (!blink) return; let t; const loop = () => { t = setTimeout(() => { setClosed(true); setTimeout(() => setClosed(false), 130); loop(); }, 2200 + Math.random() * 2600); }; loop(); return () => clearTimeout(t); }, [blink]); const cells = []; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const c = rows[y][x]; if (c === '.') continue; const isEye = c === 'o'; cells.push( React.createElement('div', { key: y + '-' + x, style: { gridColumn: x + 1, gridRow: y + 1, background: isEye ? (closed ? color : 'transparent') : color, borderRadius: 1, }, }) ); } } return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: `repeat(${w}, ${px}px)`, gridTemplateRows: `repeat(${h}, ${px}px)`, gap: 0, ...style, }, }, cells); } // ── Inline copy helpers ──────────────────────────────────────── // Let copy strings carry emphasis/code cleanly (see copy.jsx). function S({ children }) { return {children}; } // emphasis function C({ children }) { return {children}; } // inline code // ── Minimal line icons ───────────────────────────────────────── function Icon({ name, size = 20, stroke = 'currentColor', sw = 1.7 }) { const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { lock: <>, bolt: , feather: <>, chip: <>, cloudOff: <>, mic: <>, cursor: <>, github: , download: <>, arrow: , check: , yaml: <>, }; return {paths[name]}; } // ── Animated waveform bars ───────────────────────────────────── function Waveform({ bars = 11, color = VXP.green, active = true, h = 22, w = 5, gap = 3 }) { return (
{Array.from({ length: bars }).map((_, i) => (
))}
); } // ── Recording pill (mirrors the app's floating tooltip) ──────── function RecordPill({ label = 'Recording', dark = true, scale = 1 }) { return (
✕
{label && (
{label}
)}
); } // ── Typing hook: cycles through phrases, typing then pausing ─── function useTyping(phrases, { speed = 46, hold = 1500, erase = 22 } = {}) { const [idx, setIdx] = React.useState(0); const [text, setText] = React.useState(''); const [phase, setPhase] = React.useState('type'); // type | hold | erase React.useEffect(() => { const target = phrases[idx]; let t; if (phase === 'type') { if (text.length < target.length) t = setTimeout(() => setText(target.slice(0, text.length + 1)), speed); else t = setTimeout(() => setPhase('hold'), 60); } else if (phase === 'hold') { t = setTimeout(() => setPhase('erase'), hold); } else { if (text.length > 0) t = setTimeout(() => setText(target.slice(0, text.length - 1)), erase); else { setIdx((i) => (i + 1) % phrases.length); setPhase('type'); } } return () => clearTimeout(t); }, [text, phase, idx, phrases, speed, hold, erase]); return { text, active: phase !== 'hold' }; } // ── Dictation demo: faux text field + the spoken rewrite + pill ─ // Shows speech ("brb in 5") becoming written output, demonstrating rules. function DictationDemo({ width = 560 }) { const phrases = [ 'kubectl get pods, then brb', 'be right back in five minutes', 'fix up the grammar and ship it', ]; const { text, active } = useTyping(phrases, { speed: 42, hold: 1700 }); return (
{/* window chrome */}
untitled — vx
hold ⌥ space · speak · release
{text}
✕
); } // ── Buttons ──────────────────────────────────────────────────── function DownloadBtn({ children = 'Download for macOS', sub, big = false }) { return ( {children}{sub && {sub}} ); } function GhostBtn({ children = 'View on GitHub', big = false }) { return ( {children} ); } // Inject keyframes + base once. if (typeof document !== 'undefined' && !document.getElementById('vx-kf')) { const s = document.createElement('style'); s.id = 'vx-kf'; s.textContent = ` @keyframes vxwave { 0%,100%{ transform: scaleY(0.45);} 50%{ transform: scaleY(1.6);} } @keyframes vxblink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} } @keyframes vxfloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} } @keyframes vxmarquee { from{ transform: translateX(0);} to{ transform: translateX(-50%);} } @keyframes vxrise { from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform: translateY(0);} } @keyframes vxflash { 0%{ background: rgba(111,159,232,0.40);} 100%{ background: transparent;} } @keyframes vxstrike { from{ width:0;} to{ width:100%;} } .vx-link{ color:${VXP.blue}; text-decoration:none; } .vx-link:hover{ text-decoration:underline; } `; document.head.appendChild(s); } Object.assign(window, { VXP, S, C, PixelMascot, Icon, Waveform, RecordPill, useTyping, DictationDemo, DownloadBtn, GhostBtn });