// Act 4 — Offer · accept · end card (0:45 – 1:00) // ── Scene 10: Offer composed (45-50s) ────────────────────────────────── function Scene10() { const { localTime } = useSprite(); const sendRef = React.useRef(null); const bodyRef = React.useRef(null); const [target, setTarget] = React.useState({ x: 1400, y: 620 }); React.useLayoutEffect(() => { if (sendRef.current && bodyRef.current) { const p = offsetWithin(sendRef.current, bodyRef.current); setTarget({ x: p.x + p.w * 0.45, y: p.y + p.h * 0.5 }); } }, [localTime > 1.5]); // Paper fade-in 0..0.5s const paperT = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1)); // Salary count-up 0.3..1.8s const countT = Easing.easeOutCubic(clamp((localTime - 0.3) / 1.5, 0, 1)); const salary = Math.round(countT * 7500); const formatted = salary.toLocaleString('en-IE'); // Total package: salary * 12 + equity + bonus ≈ 112k const packageT = Easing.easeOutCubic(clamp((localTime - 1.0) / 1.2, 0, 1)); const pkg = Math.round(packageT * 112); // CTA states const hovering = localTime > 2.6 && localTime < 3.6; const pressed = localTime > 3.6 && localTime < 3.9; // Cursor: fades in, approaches the SEND OFFER button, presses at 3.6s const cursorX = interpolate([0, 3.0, 3.6], [target.x + 140, target.x + 30, target.x], Easing.easeOutCubic)(localTime); const cursorY = interpolate([0, 3.0, 3.6], [target.y + 100, target.y + 20, target.y], Easing.easeOutCubic)(localTime); const cursorOpacity = clamp((localTime - 2.2) / 0.4, 0, 1); const rippleT = clamp((localTime - 3.6) / 0.55, 0, 1); const terms = [ { k: 'Start', v: 'Mon · 8 Jun 2026', icon: 'M4 5h16M4 10h16M4 15h16M4 20h16' }, { k: 'Location', v: 'Reykjavík · hybrid 2/3', icon: 'M12 21s-7-7.5-7-12a7 7 0 1 1 14 0c0 4.5-7 12-7 12z|M12 11.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z' }, { k: 'Equity', v: '0.15% · 4 yr vest', icon: 'M4 12l5 5L20 6' }, ]; return (
Draft · pre-filled}>
{/* Letter card */}
{/* Accent band at top */}
{/* Letter header */}
Offer · Fjörður Labs
Ocean Systems Engineer
Prepared for Ragna Eiríksdóttir · Apr 2026
{/* Recipient chip */}
RE
Ragna Eiríksdóttir ragna@opusfutura.com
{/* Salary + package */}
Base salary
€{formatted} / mo
Total package
€{pkg}k / yr
Salary · bonus · equity
{/* Terms */}
{terms.map(({ k, v }) => (
{k}
{v}
))}
{/* Benefits strip */}
Includes
{[ 'Health · dental · vision', '30 days paid leave', 'Remote work setup', 'Annual learning budget', ].map((b, i) => (
{b}
))}
{/* CTA footer */}
Encrypted · signed by Fjörður Labs
Save draft
Send offer
); } // ── Scene 11: Accepted (50-55s) ──────────────────────────────────────── function Scene11() { const { localTime } = useSprite(); // Check scales in 0..0.7 const checkT = Easing.easeOutBack(clamp(localTime / 0.7, 0, 1)); // KPI count-ups const kpiT = clamp((localTime - 0.8) / 0.8, 0, 1); const days = Math.round(kpiT * 19); const matches = Math.round(kpiT * 12); const cvs = Math.round(kpiT * 0); // Confetti const confetti = Math.max(0, localTime - 0.4); return (
● COMPLETED}>
{/* Confetti */} {confetti > 0 && Array.from({ length: 22 }).map((_, i) => { const seed = (i * 9301 + 49297) % 233280 / 233280; const delay = (i % 8) * 0.05; const t = Math.max(0, confetti - delay); const fallY = t * 700; const drift = Math.sin(t * 2 + i) * 30; const spin = t * 540; const colors = [WP.brand, WP.purple, WP.yellow, WP.green, '#ffd101']; return (
); })}
Offer accepted.
Ragna starts Monday, 8 June.
{[ { big: days, unit: 'days' }, { big: matches, unit: 'matches' }, ].map((k, i) => (
{k.big}
{k.unit}
))}
); } // ── Scene 12: End card (55-60s) ──────────────────────────────────────── function Scene12() { const { localTime } = useSprite(); const logoT = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1)); const wordT = clamp((localTime - 0.4) / 0.4, 0, 1); const urlT = clamp((localTime - 0.8) / 0.4, 0, 1); const tagT = clamp((localTime - 1.3) / 0.4, 0, 1); // (no drift — keep the end card still) const drift = 0; return (
{/* Subtle dot grid */}
{/* Logo mark */}
Opus Futura
Opus Futura
Workplace.
opusfutura.com / workplace
{/* Yellow tagline card */}
Match people to what they want to do.
); } Object.assign(window, { Scene10, Scene11, Scene12 });