/* Project animations — one small, restrained SVG vignette per project. Apple-style: subtle motion, monochrome + accent, no decorative noise. */ // ---------- BloomBee: P2P pipeline of transformer-block shards ---------- const BloomBeeAnim = () => { const W = 280, H = 160; // 4 peer nodes on a single baseline — clean horizontal pipeline. const BOX_W = 36, BOX_H = 22; const BASE_Y = 86; const peers = [ { label: "L0–7", geo: "us-w" }, { label: "L8–15", geo: "eu-c" }, { label: "L16–23", geo: "ap-e" }, { label: "L24–31", geo: "us-e" }, ]; // distribute evenly with margins for in/out labels const LEFT_PAD = 36, RIGHT_PAD = 36; const span = W - LEFT_PAD - RIGHT_PAD; const xs = peers.map((_, i) => LEFT_PAD + (span * (i + 0.5)) / peers.length); return ( {/* header */} LLAMA 3.1 · 405B P2P · 4 PEERS {/* hop arcs ABOVE the boxes — activations travel through the internet */} {peers.slice(0, -1).map((_, i) => { const x1 = xs[i] + BOX_W / 2; const x2 = xs[i + 1] - BOX_W / 2; const yEnd = BASE_Y; const cx = (x1 + x2) / 2; const cy = BASE_Y - 26; // arc apex sits above the boxes const d = `M ${x1} ${yEnd} Q ${cx} ${cy}, ${x2} ${yEnd}`; return ( ); })} {/* peer nodes */} {peers.map((p, i) => ( {/* busy tick */} {/* layer-range label */} {p.label} {/* geo tag underneath */} {p.geo} ))} {/* in/out endpoints — sit cleanly outside the peer chain */} {(() => { const inX = xs[0] - BOX_W / 2; const outX = xs[xs.length - 1] + BOX_W / 2; const labelGap = 18; return ( in out ); })()} {/* footer caption */} layer-sharded pipeline · hivemind ); }; // ---------- RoboRacer: top-down car following a track ---------- const RoboRacerAnim = () => { const W = 280, H = 160; // a smooth S-curve track const track = `M 24 ${H - 30} C 80 ${H - 30}, 90 30, 150 30 S 250 ${H - 30}, ${W - 20} ${H - 30}`; return ( {/* lane edges */} {/* centerline dashes */} {/* start / end markers */} {/* the car — small rounded rect with sensor rays */} {/* sensor cone */} {/* sensor rays */} {/* body */} {/* readout */} AUTO · PID LANE LOCKED ); }; // ---------- Speech CNN: waveform → spectrogram → text ---------- const SpeechAnim = () => { const W = 280, H = 160; // 22 waveform bars on the left const BARS = 24; const barX0 = 18; const barW = 4; const barGap = 3; const barAreaH = 70; const barCY = 92; // pseudo-random but stable heights const heights = Array.from({ length: BARS }, (_, i) => { const v = Math.sin(i * 0.7) * Math.cos(i * 0.3) * 0.5 + 0.55; return Math.max(0.18, Math.min(0.95, v)); }); return ( {/* baseline */} {/* waveform bars */} {heights.map((h, i) => { const x = barX0 + i * (barW + barGap); const hh = h * barAreaH * 0.5; return ( ); })} {/* arrow → */} {/* transcript box */} TRANSCRIPT 侬好 ， 世界 {/* model label */} DIALECT · CNN ↓ STT ); }; // ---------- Churn: scatter classified into risk buckets ---------- const ChurnAnim = () => { const W = 280, H = 160; // 3 vertical buckets: low / med / high const bucketY = 110; const bucketH = 32; const bucketW = 70; const gap = 12; const startX = (W - (bucketW * 3 + gap * 2)) / 2; const buckets = [ { label: "LOW", x: startX, color: "var(--ink-faint)" }, { label: "MED", x: startX + (bucketW + gap), color: "var(--ink-mute)" }, { label: "HIGH", x: startX + (bucketW + gap) * 2, color: "var(--accent)" }, ]; // dots that fall from top into a bucket const dots = [ { x: 70, bucket: 0, delay: 0.0 }, { x: 110, bucket: 2, delay: 0.4 }, { x: 150, bucket: 1, delay: 0.8 }, { x: 90, bucket: 0, delay: 1.2 }, { x: 180, bucket: 2, delay: 1.6 }, { x: 130, bucket: 1, delay: 2.0 }, { x: 200, bucket: 2, delay: 2.4 }, { x: 60, bucket: 0, delay: 2.8 }, ]; return ( {/* header */} CHURN RISK RF · LR {/* incoming user lane (top dashed line) */} USERS → {/* falling dots, each classified */} {dots.map((d, i) => { const target = buckets[d.bucket]; const tx = target.x + bucketW / 2; return ( ); })} {/* 3 buckets */} {buckets.map((b, i) => ( {/* fill bar — taller for HIGH to imply detection */} {b.label} ))} ); }; // ---------- registry ---------- const PROJECT_ANIMS = { bloombee: BloomBeeAnim, roboracer: RoboRacerAnim, speech: SpeechAnim, churn: ChurnAnim, }; window.PROJECT_ANIMS = PROJECT_ANIMS;