/* Birthday effects — all visible-always pieces. Loaded only when birthday === true. */ const { useEffect, useRef, useState } = React; /* 1. Persistent confetti drift — sparse + slow, never stops */ function BirthdayDrift() { const [pieces] = useState(() => { const colors = ['#F5C518', '#B8362B', '#F3E6C4']; const shapes = ['rect', 'diamond', 'circle']; return Array.from({ length: 14 }, (_, i) => ({ id: i, left: Math.random() * 100, delay: Math.random() * 14, duration: 16 + Math.random() * 14, size: 5 + Math.random() * 7, color: colors[i % colors.length], shape: shapes[i % shapes.length], drift: (Math.random() - 0.5) * 120, rot: Math.random() * 360, rotEnd: Math.random() * 720 })); }); return ( ); } /* 2. Bunting — triangle flags strung across the top */ function Bunting() { const colors = ['#F5C518', '#B8362B', '#F3E6C4', '#1A1613', '#F5C518', '#B8362B', '#F3E6C4', '#1A1613']; const flags = Array.from({ length: 28 }, (_, i) => colors[i % colors.length]); // Hangs INTO the hero, below the ribbon. Absolute so it doesn't push layout. return ( ); } /* 3. Animated cake logo — little birthday cake with a flickering candle */ function CandleLogo({ size = 28 }) { return ( ); } /* 4. "+1 YEAR" lapel sticker for the hero corner */ function BirthdaySticker() { return ( ); } /* 5. Edge balloons — slow rising SVG balloons, looping */ function Balloons() { const configs = [ { side: 'left', x: '2%', color: '#B8362B', delay: 0, dur: 22, sway: 30 }, { side: 'right', x: '94%', color: '#F5C518', delay: 7, dur: 26, sway: -24 }, { side: 'left', x: '8%', color: '#F3E6C4', delay: 14, dur: 30, sway: 18 }, { side: 'right', x: '88%', color: '#B8362B', delay: 20, dur: 24, sway: -20 } ]; return ( ); } /* 6. Section streamer — wavy divider */ function Streamer({ flip = false }) { return ( ); } /* 7. Sparkle glints — small ✦ marks around the Ben headline */ function Sparkles() { const s = [ { top: '8%', left: '12%', size: 14, delay: 0 }, { top: '22%', left: '78%', size: 22, delay: 0.6 }, { top: '55%', left: '6%', size: 18, delay: 1.1 }, { top: '70%', left: '82%', size: 14, delay: 1.7 }, { top: '40%', left: '45%', size: 12, delay: 2.2 } ]; return ( ); } /* 9. Cursor sparkle trail */ function CursorTrail() { const [dots, setDots] = useState([]); const idRef = useRef(0); useEffect(() => { let last = 0; const onMove = (e) => { const now = performance.now(); if (now - last < 40) return; last = now; const id = ++idRef.current; setDots(d => [...d.slice(-12), { id, x: e.clientX, y: e.clientY }]); setTimeout(() => setDots(d => d.filter(x => x.id !== id)), 700); }; window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, []); return ( ); } /* 11. Floating envelope — opens a card overlay */ function BirthdayCard() { const [open, setOpen] = useState(false); return ( <> {open && (
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.7)', display: 'grid', placeItems: 'center', padding: 20, backdropFilter: 'blur(4px)', animation: 'bcb-fadein 280ms ease' }}>
e.stopPropagation()} style={{ maxWidth: 560, background: 'var(--cream)', color: 'var(--ink)', padding: '40px 44px', position: 'relative', border: '2px solid var(--ink)', boxShadow: '14px 14px 0 var(--brick)', fontFamily: 'Inter, sans-serif', animation: 'bcb-cardopen 380ms cubic-bezier(.2,.7,.2,1)' }}>
FROM THE TEAM · 04.23

Happy Birthday, Ben.

Thanks for the quiet fixes, the calm pages, and the code reviews that say more in two lines than most of us say in thirty. The on-call rotation feels safer because you're in it.

Take today off. We'll be fine. (We'll call if we aren't.)

— Signed, the team · all of us
)} ); } /* Bundle them — one component to mount */ function BirthdayLayer() { return ( <> ); } Object.assign(window, { BirthdayDrift, Bunting, CandleLogo, BirthdaySticker, Balloons, Streamer, Sparkles, CursorTrail, BirthdayCard, BirthdayLayer });