// The work on the left, what it costs on the right, and an arrow in the gutter // saying the first causes the second. Hovering a group of work lights the // consequences it drives; when nobody is interacting the section walks itself // through the groups. function TheWork() { const groups = [ { key: 'close', label: 'Books & close', items: [ 'A chart of accounts built for your model', 'Expenses categorized correctly, every month', 'The monthly close run and landed on a date', 'Your accountants managed', ], slips: [0, 3], }, { key: 'cash', label: 'Cash & payables', items: [ 'Bills paid on time', 'Enough cash in the operating account to cover them', 'Idle balances earning interest', ], slips: [1, 3], }, { key: 'billing', label: 'Billing & collections', items: [ 'Accurate invoices out on the first', 'Customers paying on terms', ], slips: [1, 3], }, { key: 'planning', label: 'Planning & modeling', items: [ 'An operating model tied to your hiring plan', 'The annual plan and budget', 'Expense rules and budgets so costs don’t drift', 'Salary and equity numbers that hold up', ], slips: [1, 2], }, { key: 'board', label: 'Investors & board', items: [ 'The metrics your next raise turns on, tracked', 'Board decks that show progress and name the problems', 'Investor updates written and sent', ], slips: [2, 4], }, { key: 'capital', label: 'Capital & transactions', items: [ 'Cloud commitments negotiated', 'Debt facilities sourced and negotiated', 'Buy-side or sell-side diligence', '409A valuations on schedule', 'Audit readiness', ], slips: [2, 3], }, ]; const slips = [ 'Books close late.', 'Cash flow is poorly modeled and runway is uncertain.', 'The metrics that matter go untracked and unimproved.', 'Your time goes to clerical work instead of the decisions that determine whether this works.', 'Board decks become a scramble.', ]; const CYCLE_MS = 3600; const [active, setActive] = React.useState(0); const [pinned, setPinned] = React.useState(false); const [seen, setSeen] = React.useState(false); const [stacked, setStacked] = React.useState(false); const ref = React.useRef(null); // Below 900px the two columns stack and the spotlight has nothing left to // point at, so the whole thing goes static rather than tinting labels for a // connection the reader can no longer see. React.useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia('(max-width: 900px)'); const sync = () => setStacked(mq.matches); sync(); mq.addEventListener('change', sync); return () => mq.removeEventListener('change', sync); }, []); // Don't animate a section nobody is looking at React.useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === 'undefined') { setSeen(true); return; } const io = new IntersectionObserver(([e]) => setSeen(e.isIntersecting), { threshold: 0.25 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => { if (pinned || !seen || stacked) return; const id = setTimeout(() => setActive((i) => (i + 1) % groups.length), CYCLE_MS); return () => clearTimeout(id); }, [active, pinned, seen, stacked]); const lit = stacked ? [] : groups[active].slips; return (
{/* Line one ends on "time". The cap is in ems, not pixels, so the break holds as the clamp scales the type down: line one is 9.86em and pulling "that" up would take 11.31em, so 10.5em splits them at every size. Instrument Serif ships regular and italic only - no bold - so "time" is emphasised with the italic and the moss accent rather than a weight the browser would have to fake. */}

Running finance requires{' '} time {' '}that founders don’t have.

{/* LEFT: the work */}
setPinned(false)}> Core finance tasks
{groups.map((g, i) => { const on = !stacked && i === active; return (
{setPinned(true);setActive(i);}} style={{ position: 'relative', opacity: on ? 1 : 0.78, transition: 'opacity 320ms ease', cursor: 'default', }}>
{g.label}
{on && !pinned && }
    {g.items.map((t, j) =>
  • {t}
    • )}
); })}
{/* MIDDLE: the causation arrow */} {/* RIGHT: what it costs */}
What often slips
{slips.map((t, i) => { const on = lit.indexOf(i) !== -1; return (
{t}
); })}
); } // One label treatment for both columns, centred over the content it heads and // set to a common width so the two read as a matched pair. function ColumnLabel({ children }) { return (
{children}
); } window.TheWork = TheWork;