{STAGES.map(([k, v, val], i) => {
const g = MOTION.draw({ from: 0, to: 1, start: 1.1 + i * 0.13, end: 2.3 + i * 0.13 })(T);
const on = i === hi ? hiOn : 0;
return (
0.4 ? C.deep : C.ink3, letterSpacing: '-0.005em' }}>{k}
0.4 ? C.accent : `rgba(20,53,42,${(0.14 + (1 - i / 5) * 0.5).toFixed(2)})`,
borderRadius: 5,
}} />
{Math.round(v * g)}
{val}
);
})}
);
}
const MIX = [['Pension funds', 38, C.deep], ['Family offices', 24, C.deepest], ['Endowments', 21, '#9FB53F'], ['Insurance', 17, C.accent]];
function WMix({ x, y, w, h }) {
const { T, CUES } = useComposition();
const life = useLife(3, BASE.x + 1027.8);
const p = clamp(MOTION.draw({ from: 0, to: 1, start: CUES.Raise + 1.1, end: CUES.Raise + 2.8 })(T), 0, 1);
const R = 46, SW = 15, CIRC = 2 * Math.PI * R;
let acc = 0;
return (
}>
{Math.round(84 * p)}
investors
{MIX.map(([k, v, col], i) => {
const o = clamp(MOTION.enter({ from: 0, to: 1, start: CUES.Raise + 1.3 + i * 0.14, end: CUES.Raise + 1.9 + i * 0.14 })(T), 0, 1);
return (
{k}
{v}%
);
})}
);
}
const MILES = [['Fund IV second close', '12 Oct', '£190M expected'], ['LP advisory board', '24 Oct', 'Agenda circulated'], ['Q3 valuations due', '31 Oct', '4 portfolio cos']];
function WMilestones({ x, y, w, h }) {
const { T, CUES } = useComposition();
const life = useLife(4, BASE.x + 1498.9);
const done = clamp(MOTION.pop({ from: 0, to: 1, start: CUES.Close + 0.25, end: CUES.Close + 1.0 })(T), 0, 1);
return (
}>
{MILES.map(([k, d, sub], i) => {
const o = clamp(MOTION.enter({ from: 0, to: 1, start: 1.5 + i * 0.14, end: 2.2 + i * 0.14 })(T), 0, 1);
const lit = i === 0 ? done : 0;
return (
0.2 ? `rgba(247,255,210,${lit.toFixed(2)})` : C.w2,
border: '1px solid ' + (lit > 0.2 ? `rgba(203,232,28,${(0.7 * lit).toFixed(2)})` : C.w4),
opacity: o, transform: `translateY(${((1 - o) * 8).toFixed(2)}px)`,
}}>
0.4 ? C.accent : C.w1, border: '1px solid ' + (lit > 0.4 ? C.accent : C.w7),
}}>
{lit > 0.4 ? : null}
{d}
);
})}
);
}
const FEED_NEW = [
['MO', 'Maria Okonjo', 'Ardent Pension Trust', 'Call', 'Confirmed £75M for the second close', 'just now'],
['DL', 'David Lindqvist', 'Nordwall Family Office', 'Email', 'Side letter returned, no amendments', '6m ago'],
];
const FEED_OLD = [
['PR', 'Priya Raman', 'Kingsmere Endowment', 'Meeting', 'IC pack walkthrough, follow-up booked', '41m ago'],
['TH', 'Tom Halvorsen', 'Thornbury Insurance', 'Call', 'Allocation increased to £60M', '1h ago'],
['SO', 'Sofia Oduya', 'Meridian Advisors', 'Email', 'Introduction to Fund IV', '2h ago'],
];
const TYPE_COL = { Call: [C.tint, C.deepest], Email: ['#E8F0FF', C.blue], Meeting: [C.w3, C.ink3] };
function FeedRow({ r, o }) {
const [av, name, acct, type, note, when] = r;
const tc = TYPE_COL[type] || [C.w3, C.ink3];
return (
);
}
function WFeed({ x, y, w, h }) {
const { T, CUES } = useComposition();
const life = useLife(5, BASE.x + 1027.8);
const a1 = clamp(MOTION.enter({ from: 0, to: 1, start: CUES.Feed + 0.35, end: CUES.Feed + 1.15 })(T), 0, 1);
const a2 = clamp(MOTION.enter({ from: 0, to: 1, start: CUES.Feed + 1.5, end: CUES.Feed + 2.3 })(T), 0, 1);
/* a1 lands the older of the two new rows (David) at the clip top; a2 slides
Maria in above him - so the list never exposes an ungated slot. */
const rows = [[FEED_NEW[0], a2], [FEED_NEW[1], a1], [FEED_OLD[0], 1], [FEED_OLD[1], 1], [FEED_OLD[2], 1]];
const shift = -((1 - a1) + (1 - a2)) * 44;
return (
0.5 ? '+' + Math.round(a1 + a2) + ' new' : 'Last 24 hours'} bg={a1 + a2 > 0.5 ? C.accent : C.w3} fg={a1 + a2 > 0.5 ? C.deep : C.ink3} />