import { useRef, useState, useEffect, useCallback } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; export const REQUIRED_DATABASES = [{ type: "share" as const, path: "md:_share/duckverse/8e9ed498-3f60-48f7-871d-c860c53ca99a", alias: "duckverse" }]; const VOID = "#04020A"; const TXT = "#D0C8E0"; const ACC = "#5DE8B8"; const CRIMSON = "#E84455"; const GOLD = "#C8A840"; const PANEL = "rgba(4,2,10,.93)"; const CAT_COLOR: Record = { core: CRIMSON, extension: ACC, binding: "#4098E0", integration: "#60C870", company: "#9060D0", community: "#E09040", }; const CHAPTERS = [ { id: 1, title: "The Spark", sub: "Origins 2018 – 2019", start: "2018-01", end: "2019-12", hi: null as string | null }, { id: 2, title: "First Contact", sub: "Bindings 2020 – 2021", start: "2020-01", end: "2021-05", hi: "binding" as string | null }, { id: 3, title: "Escape Velocity", sub: "Extensions 2021 – 2022", start: "2021-06", end: "2022-12", hi: "extension" as string | null }, { id: 4, title: "The Cloud Arrives", sub: "Companies 2023 – 2024", start: "2023-01", end: "2024-12", hi: "company" as string | null }, { id: 5, title: "An Entire Universe", sub: "Convergence 2025 –", start: "2025-01", end: "2026-12", hi: null as string | null }, ]; // Fallback milestones — used only if timeline_events DB table is empty // Dates verified: duckdblabs.com/news/2021/07/14, motherduck.com/blog/announcing-motherduck-duckdb-in-the-cloud const FALLBACK_MILESTONES: Record = { "2018-10": { title: "DuckDB is Born", body: "Mark Raasveldt and Hannes Mühleisen at CWI Amsterdam begin building an in-process analytical database. The duck takes flight.", imp: 3 }, "2019-06": { title: "Open Source Release", body: "DuckDB is released as open source. The data community takes notice.", imp: 3 }, "2020-06": { title: "Python Binding Ships", body: "DuckDB lands natively in the Python ecosystem. Data scientists everywhere take notice.", imp: 3 }, "2021-07": { title: "DuckDB Labs Founded", body: "Raasveldt and Mühleisen spin out DuckDB Labs from CWI. The project gains commercial backing while staying MIT-licensed.", imp: 3 }, "2022-06": { title: "Extensions Era Begins", body: "Third-party extensions unlock a new dimension of power. An ecosystem of tools starts forming around the core.", imp: 2 }, "2023-06": { title: "MotherDuck Launches", body: "DuckDB meets the cloud. MotherDuck ships hybrid execution — your laptop and the cloud, working as one.", imp: 3 }, "2024-06": { title: "DuckDB 1.0 · SnowDuck", body: "Six years of research crystallises into v1.0.0. Production-ready, backwards-compatible, and faster than ever.", imp: 3 }, "2025-01": { title: "An Entire Universe", body: "Hundreds of integrations. Every data tool wants a duck. The ecosystem keeps expanding.", imp: 2 }, }; const PI2 = Math.PI * 2; const ARM_ANGLE: Record = { extension: -Math.PI / 2, binding: -Math.PI / 2 + PI2 / 5, integration: -Math.PI / 2 + (2 * PI2) / 5, company: -Math.PI / 2 + (3 * PI2) / 5, community: -Math.PI / 2 + (4 * PI2) / 5, }; const BASE_MS = 900; const COOLDOWN_MS = [500, 580, 660, 730, 790, 840]; const SPEEDS = [0.5, 1, 2, 4]; function hexA(hex: string, a: number): string { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r},${g},${b},${a})`; } function stableHash(s: string): number { let h = 0; for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0; return (h >>> 0) / 4294967296; } type MilestoneMap = Record; function getMilestoneMs(ym: string, milestones: MilestoneMap): number { const m = milestones[ym]; return m && m.imp >= 3 ? 5500 : 2800; } function getChapter(ym: string) { for (const ch of CHAPTERS) if (ym >= ch.start && ym <= ch.end) return ch; return CHAPTERS[CHAPTERS.length - 1]; } function buildPositions(repos: Repo[], cx: number, cy: number, maxR: number): Record { const pos: Record = {}; const core = repos.filter(r => r.category === "core"); core.forEach((r, i) => { const angle = (i / Math.max(1, core.length)) * PI2; pos[r.repo_name] = [cx + Math.cos(angle) * (0.04 + i * 0.028) * maxR, cy + Math.sin(angle) * (0.04 + i * 0.028) * maxR]; }); for (const cat of ["extension","binding","integration","company","community"]) { const catR = repos.filter(r => r.category === cat); catR.forEach((r, i) => { const h1 = stableHash(r.repo_name), h2 = stableHash(r.repo_name + "r"); const frac = Math.min(0.18 + i * 0.048 + h2 * 0.03, 0.88); const angle = ARM_ANGLE[cat] + i * 0.36 + (h1 - 0.5) * 0.2; pos[r.repo_name] = [cx + Math.cos(angle) * frac * maxR, cy + Math.sin(angle) * frac * maxR]; }); } return pos; } function applyRotation(pos: Record, cx: number, cy: number, angle: number): Record { if (angle === 0) return pos; const cos = Math.cos(angle), sin = Math.sin(angle); const out: Record = {}; for (const k of Object.keys(pos)) { const [x, y] = pos[k]; const dx = x - cx, dy = y - cy; out[k] = [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos]; } return out; } // Tilt: yScale=1 is top-down flat, yScale=0.35 is aggressive angle like duckverse function applyTilt(pos: Record, cx: number, cy: number, yScale: number): Record { const out: Record = {}; for (const k of Object.keys(pos)) { const [x, y] = pos[k]; out[k] = [x, cy + (y - cy) * yScale]; } return out; } const STAR_FIELD = Array.from({ length: 240 }, (_, i) => ({ x: stableHash("sx" + i), y: stableHash("sy" + i), r: 0.35 + stableHash("sr" + i) * 1.2, a: 0.06 + stableHash("sa" + i) * 0.42, })); type Repo = { repo_name: string; category: string; description: string; created_ym: string }; type StarRow = { ym: string; repo_name: string; total_stars: number }; type Rel = { source_repo: string; target_repo: string; rel_type: string }; type Event = { ym: string; title: string; description: string; importance: number }; type Nova = { cx: number; cy: number; born: number; color: string }; type FloatText = { text: string; cx: number; cy: number; born: number; color: string }; type SelRepo = { name: string; category: string; description: string; stars: number }; export default function Chronicles() { const { data: repoData, loading: rL } = useSQLQuery(`SELECT repo_name, category, description, strftime(created_at, '%Y-%m') AS created_ym FROM "duckverse"."main"."repositories" ORDER BY created_at, repo_name`); const { data: starData, loading: sL } = useSQLQuery(`SELECT strftime(month, '%Y-%m') AS ym, repo_name, stars AS total_stars FROM "duckverse"."main"."star_history" ORDER BY month, repo_name`); const { data: relData, loading: relL } = useSQLQuery(`SELECT source_repo, target_repo, relationship_type AS rel_type FROM "duckverse"."main"."relationships"`); const { data: evData, loading: evL } = useSQLQuery(`SELECT strftime(event_date, '%Y-%m') AS ym, title, description, importance FROM "duckverse"."main"."timeline_events" ORDER BY event_date`); const loading = rL || sL || relL || evL; const repos = (repoData || []) as Repo[]; const starRows = (starData || []) as StarRow[]; const rels = (relData || []) as Rel[]; const months = [...new Set(starRows.map(s => s.ym))].sort(); const [monthIdx, setMonthIdx] = useState(0); const [playing, setPlaying] = useState(false); const [sel, setSel] = useState(null); const [overlay, setOverlay] = useState<{ title: string; body: string; ym: string } | null>(null); const [overlayVis, setOverlayVis] = useState(false); const [chapCard, setChapCard] = useState<{ id: number; title: string; sub: string } | null>(null); const [chapCardVis, setChapCardVis] = useState(false); const [intro, setIntro] = useState<"in" | "out" | "done">("in"); const [autoRot, setAutoRot] = useState(true); const [hoveredName, setHoveredName] = useState(null); const [speed, setSpeed] = useState(1); const canvasRef = useRef(null); const midxRef = useRef(0); const monthsRef = useRef([]); const reposRef = useRef([]); const relsRef = useRef([]); const posRef = useRef>({}); const visRef = useRef>(new Set()); const starsByMonthRef = useRef>>({}); const curStarsRef = useRef>({}); const novasRef = useRef([]); const floatTextsRef = useRef([]); const adjRef = useRef>({}); const displaySizesRef = useRef>({}); const animTRef = useRef(0); const rafRef = useRef(0); const timerRef = useRef | null>(null); const ovTimerRef = useRef | null>(null); const ovFadeRef = useRef | null>(null); const chapFadeRef = useRef | null>(null); const coolRef = useRef(0); const mouseRef = useRef({ x: 0, y: 0 }); const autoStartedRef = useRef(false); const lastChapRef = useRef(0); const rotRef = useRef(0); const zoomRef = useRef(1); const hoveredRef = useRef(null); const speedRef = useRef(1); const eventsRef = useRef(FALLBACK_MILESTONES); const autoRotRef = useRef(true); const tiltRef = useRef(1.0); const curYmRef = useRef(""); const focusAlphaRef = useRef>({}); useEffect(() => { monthsRef.current = months; }, [months.join(",")]); useEffect(() => { reposRef.current = repos; }, [repos.length]); useEffect(() => { relsRef.current = rels; }, [rels.length]); useEffect(() => { speedRef.current = speed; }, [speed]); useEffect(() => { autoRotRef.current = autoRot; }, [autoRot]); useEffect(() => { const events = (evData || []) as Event[]; if (events.length === 0) { eventsRef.current = FALLBACK_MILESTONES; return; } const map: MilestoneMap = {}; for (const ev of events) { if (!map[ev.ym] || ev.importance > map[ev.ym].imp) { map[ev.ym] = { title: ev.title, body: ev.description || "", imp: ev.importance || 1 }; } } eventsRef.current = map; }, [(evData || []).length]); useEffect(() => { const bm: Record> = {}; for (const s of starRows) { if (!bm[s.ym]) bm[s.ym] = {}; bm[s.ym][s.repo_name] = s.total_stars; } starsByMonthRef.current = bm; }, [starRows.length]); useEffect(() => { const adj: Record = {}; for (const rel of rels) { if (!adj[rel.source_repo]) adj[rel.source_repo] = []; if (!adj[rel.target_repo]) adj[rel.target_repo] = []; adj[rel.source_repo].push(rel.target_repo); adj[rel.target_repo].push(rel.source_repo); } adjRef.current = adj; }, [rels.length]); // ── Animation loop ────────────────────────────────────────────────────────── useEffect(() => { const canvas = canvasRef.current; if (!canvas || loading || repos.length === 0) return; function draw(t: number) { rafRef.current = requestAnimationFrame(draw); animTRef.current = t; const rect = canvas!.getBoundingClientRect(); const dpr = window.devicePixelRatio || 1; const pw = Math.round(rect.width * dpr), ph = Math.round(rect.height * dpr); if (canvas!.width !== pw || canvas!.height !== ph) { canvas!.width = pw; canvas!.height = ph; } const ctx = canvas!.getContext("2d")!; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const w = rect.width, h = rect.height; const CX = w / 2, CY = h / 2; const maxR = Math.min(w, h) * 0.44 * zoomRef.current; if (autoRotRef.current) rotRef.current += 0.00022; // Tilt oscillates: yScale 1.0 (top-down flat) ↔ 0.35 (aggressive angle, ~120s cycle) tiltRef.current = 0.35 + 0.65 * ((Math.sin(t * 0.000052) + 1) / 2); const rawPos = buildPositions(reposRef.current, CX, CY, maxR); const rotPos = applyRotation(rawPos, CX, CY, rotRef.current); const pos = applyTilt(rotPos, CX, CY, tiltRef.current); posRef.current = pos; const pmx = (mouseRef.current.x - CX) * 0.018; const pmy = (mouseRef.current.y - CY) * 0.018; const ym = monthsRef.current[midxRef.current] || ""; const ch = getChapter(ym); const vis = new Set(); for (const r of reposRef.current) if (r.created_ym <= ym) vis.add(r.repo_name); visRef.current = vis; if (curYmRef.current !== ym) { curYmRef.current = ym; const newCur: Record = {}; const bm = starsByMonthRef.current; for (const m of Object.keys(bm)) { if (m <= ym) for (const [rn, cnt] of Object.entries(bm[m])) newCur[rn] = cnt; } curStarsRef.current = newCur; } const cur = curStarsRef.current; // Background ctx.fillStyle = VOID; ctx.fillRect(0, 0, w, h); const yScale = tiltRef.current; function tiltY(y: number): number { return CY + (y - CY) * yScale; } // Stars (background — minimal tilt so they feel like distant backdrop) const starTilt = 1 - (1 - yScale) * 0.45; for (const s of STAR_FIELD) { const sy = CY + (s.y * h - CY) * starTilt; ctx.beginPath(); ctx.arc(s.x * w, sy, s.r, 0, PI2); ctx.fillStyle = hexA(TXT, s.a); ctx.fill(); } // Nebulas const nebulas = [ { x: 0.28, y: 0.38, r: 0.32, c: [42,10,30] }, { x: 0.72, y: 0.62, r: 0.28, c: [10,28,42] }, { x: 0.50, y: 0.26, r: 0.22, c: [26,10,42] }, { x: 0.55, y: 0.70, r: 0.20, c: [10,42,30] }, ]; for (const n of nebulas) { const drift = Math.sin(t * 0.00008 + n.x * 10) * 9; const nx = n.x * w + drift, ny = CY + (n.y * h - CY) * yScale, nr = n.r * w; const g = ctx.createRadialGradient(nx, ny, 0, nx, ny, nr); g.addColorStop(0, `rgba(${n.c[0]},${n.c[1]},${n.c[2]},0.18)`); g.addColorStop(1, `rgba(${n.c[0]},${n.c[1]},${n.c[2]},0)`); ctx.beginPath(); ctx.ellipse(nx, ny, nr, nr * yScale, 0, 0, PI2); ctx.fillStyle = g; ctx.fill(); } // Ghost year (behind galaxy, very faint) const year = ym.slice(0, 4); if (year) { const ys = Math.min(w, h) * 0.20; ctx.font = `bold ${ys}px 'SF Mono',monospace`; ctx.textAlign = "center"; ctx.fillStyle = hexA(TXT, 0.020); ctx.fillText(year, CX, CY + ys * 0.36); ctx.textAlign = "left"; } // Orbit rings — concentric ellipses (galaxy disk seen at tilt angle) ctx.save(); ctx.translate(CX, CY); ctx.scale(1, yScale); ctx.translate(-CX, -CY); for (let ri = 0; ri < 5; ri++) { const rr = maxR * (0.11 + ri * 0.185); ctx.beginPath(); ctx.arc(CX, CY, rr, 0, PI2); ctx.strokeStyle = hexA(TXT, 0.028 - ri * 0.003); ctx.lineWidth = 0.5; ctx.stroke(); } ctx.restore(); // Galactic core glow const coreBreath = 0.16 + Math.sin(t * 0.0009) * 0.04; const cg = ctx.createRadialGradient(CX, CY, 0, CX, CY, maxR * 0.24); cg.addColorStop(0, hexA(CRIMSON, coreBreath)); cg.addColorStop(0.35, hexA(CRIMSON, coreBreath * 0.4)); cg.addColorStop(1, hexA(CRIMSON, 0)); ctx.beginPath(); ctx.ellipse(CX, CY, maxR * 0.24, maxR * 0.24 * yScale, 0, 0, PI2); ctx.fillStyle = cg; ctx.fill(); // Chapter sector glow (tilt-aware via canvas transform) if (ch.hi) { const sAngle = ARM_ANGLE[ch.hi] + rotRef.current; const sColor = CAT_COLOR[ch.hi] || CRIMSON; ctx.save(); ctx.translate(CX, CY); ctx.scale(1, yScale); ctx.translate(-CX, -CY); ctx.beginPath(); ctx.moveTo(CX, CY); ctx.arc(CX, CY, maxR * 1.18, sAngle - PI2 / 10, sAngle + PI2 / 10); ctx.closePath(); ctx.clip(); const sg = ctx.createRadialGradient(CX, CY, 0, CX, CY, maxR * 1.18); sg.addColorStop(0, hexA(sColor, 0)); sg.addColorStop(0.3, hexA(sColor, 0.08)); sg.addColorStop(1, hexA(sColor, 0.02)); ctx.fillStyle = sg; ctx.fillRect(0, 0, w, h); ctx.restore(); } // Arm lines — endpoints tilt with galaxy for (const cat of ["extension","binding","integration","company","community"]) { const angle = ARM_ANGLE[cat] + rotRef.current; const color = CAT_COLOR[cat]; const active = ch.hi === cat; const ex = CX + Math.cos(angle) * maxR * 0.95 + pmx * 0.6; const ey = tiltY(CY + Math.sin(angle) * maxR * 0.95) + pmy * 0.6 * yScale; ctx.beginPath(); ctx.moveTo(CX + pmx * 0.1, CY + pmy * 0.1 * yScale); ctx.lineTo(ex, ey); ctx.strokeStyle = hexA(color, active ? 0.07 : 0.028); ctx.lineWidth = active ? 1.5 : 0.5; ctx.setLineDash([4, 8]); ctx.stroke(); ctx.setLineDash([]); } // Arm labels — tilt Y positions ctx.textAlign = "center"; for (const cat of ["extension","binding","integration","company","community"]) { const angle = ARM_ANGLE[cat] + rotRef.current; const color = CAT_COLOR[cat]; const active = ch.hi === cat; const lr = maxR * 1.08; const lx = CX + Math.cos(angle) * lr + pmx * 0.8; const ly = tiltY(CY + Math.sin(angle) * lr) + pmy * 0.8 * yScale; ctx.font = `${active ? "bold" : "normal"} 10px 'SF Mono',monospace`; ctx.fillStyle = hexA(color, active ? 0.78 : 0.3); ctx.fillText(cat.toUpperCase(), lx, ly + 4); } ctx.textAlign = "left"; // Edges + traveling dots const hov = hoveredRef.current; for (const rel of relsRef.current) { const sp = pos[rel.source_repo], tp = pos[rel.target_repo]; if (!sp || !tp || !vis.has(rel.source_repo) || !vis.has(rel.target_repo)) continue; const srcCat = reposRef.current.find(r => r.repo_name === rel.source_repo)?.category || "core"; const color = CAT_COLOR[srcCat] || CRIMSON; const isHovEdge = !!(hov && (rel.source_repo === hov || rel.target_repo === hov)); const sd = 0.38, td = 0.35; const sx = sp[0] + pmx * sd, sy = sp[1] + pmy * sd; const tx = tp[0] + pmx * td, ty = tp[1] + pmy * td; ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(tx, ty); ctx.strokeStyle = hexA(color, isHovEdge ? 0.6 : 0.07); ctx.lineWidth = isHovEdge ? 1.8 : 0.5; ctx.stroke(); const hash = stableHash(rel.source_repo + rel.target_repo); const spd2 = isHovEdge ? 0.00065 : 0.00025; const prog = ((t * spd2 + hash) % 1 + 1) % 1; const dx = sx + (tx - sx) * prog, dy = sy + (ty - sy) * prog; ctx.beginPath(); ctx.arc(dx, dy, isHovEdge ? 2.8 : 1.7, 0, PI2); ctx.fillStyle = hexA(color, isHovEdge ? 0.95 : 0.6); ctx.fill(); } // Nodes const maxSt = Math.max(1, ...Object.values(cur)); for (const r of reposRef.current) { if (!vis.has(r.repo_name)) continue; const p = pos[r.repo_name]; if (!p) continue; const color = CAT_COLOR[r.category] || CRIMSON; const depth = r.category === "core" ? 0.18 : 0.35 + stableHash(r.repo_name) * 0.35; const px = p[0] + pmx * depth, py = p[1] + pmy * depth; // Depth factor: when tilted, nodes at top/bottom of the ellipse are "farther" from viewer // yScale=1 → no depth variation; yScale=0.35 → strong depth variation const tiltStrength = 1 - yScale; // 0 when flat, 0.65 at max tilt const zDepth = (py - CY) * tiltStrength; // proxy for z-distance const depthScale = Math.max(0.55, 1 - zDepth * 0.0020); // Smooth size lerp const targetR = (3.5 + Math.sqrt((cur[r.repo_name] || 0) / maxSt) * 8.5) * depthScale; if (!displaySizesRef.current[r.repo_name]) displaySizesRef.current[r.repo_name] = 0.5; const nodeR = displaySizesRef.current[r.repo_name] + (targetR - displaySizesRef.current[r.repo_name]) * 0.07; displaySizesRef.current[r.repo_name] = nodeR; const isFocused = !ch.hi || r.category === ch.hi || r.category === "core"; const targetAlpha = isFocused ? 1 : 0.14; const prevAlpha = focusAlphaRef.current[r.repo_name] ?? 1; const smoothAlpha = prevAlpha + (targetAlpha - prevAlpha) * 0.04; focusAlphaRef.current[r.repo_name] = smoothAlpha; const alpha = smoothAlpha * Math.max(0.3, depthScale); const isHovNode = hov === r.repo_name; const isSelNode = !!(sel && sel.name === r.repo_name); const isNeighbor = !!(hov && hov !== r.repo_name && adjRef.current[hov]?.includes(r.repo_name)); // Neighbor glow if (isNeighbor) { const ng = ctx.createRadialGradient(px, py, nodeR * 0.5, px, py, nodeR * 5.5); ng.addColorStop(0, hexA(color, 0.38)); ng.addColorStop(1, hexA(color, 0)); ctx.beginPath(); ctx.arc(px, py, nodeR * 5.5, 0, PI2); ctx.fillStyle = ng; ctx.fill(); } // Main glow if (alpha > 0.25 || isNeighbor || isHovNode) { const gR = isHovNode ? nodeR * 4.2 : nodeR * 2.8; const gA = isHovNode ? 0.38 : 0.26; const gg = ctx.createRadialGradient(px, py, 0, px, py, gR); gg.addColorStop(0, hexA(color, gA * Math.max(alpha, 0.5))); gg.addColorStop(1, hexA(color, 0)); ctx.beginPath(); ctx.arc(px, py, gR, 0, PI2); ctx.fillStyle = gg; ctx.fill(); } // Core sun rays (tilt-aware — Y component compressed) if (r.category === "core") { const rayCount = 8; for (let i = 0; i < rayCount; i++) { const ra = (i / rayCount) * PI2 + t * 0.00038; const len = nodeR * (2.5 + Math.sin(t * 0.0018 + i * 1.4) * 0.5); ctx.beginPath(); ctx.moveTo(px + Math.cos(ra) * nodeR * 1.15, py + Math.sin(ra) * nodeR * 1.15 * yScale); ctx.lineTo(px + Math.cos(ra) * len, py + Math.sin(ra) * len * yScale); ctx.strokeStyle = hexA(CRIMSON, 0.26); ctx.lineWidth = 1; ctx.stroke(); } } // Node circle ctx.beginPath(); ctx.arc(px, py, nodeR, 0, PI2); ctx.fillStyle = hexA(color, Math.max(0.14, alpha)); ctx.fill(); // Hover / selected ring if (isHovNode || isSelNode) { const pulse = isSelNode ? (Math.sin(t * 0.004) + 1) * 1.5 : 0; ctx.beginPath(); ctx.arc(px, py, nodeR + 3 + pulse, 0, PI2); ctx.strokeStyle = hexA("#ffffff", isSelNode ? 0.78 : 0.45); ctx.lineWidth = isSelNode ? 1.5 : 1; ctx.stroke(); } // Canvas label (hovered or neighbor) — strip org prefix for readability if (isHovNode || isNeighbor) { const label = r.repo_name.split("/").pop() || r.repo_name; ctx.font = `${isHovNode ? "bold" : "normal"} 11px 'SF Mono',monospace`; ctx.fillStyle = hexA(TXT, isHovNode ? 0.92 : 0.5); ctx.fillText(label, px + nodeR + 7, py - 3); } } // Nova flashes novasRef.current = novasRef.current.filter(n => t - n.born < 1500); for (const n of novasRef.current) { const age = (t - n.born) / 1500; const nr = age * 55, na = (1 - age) * 0.9; const ng = ctx.createRadialGradient(n.cx, n.cy, 0, n.cx, n.cy, nr); ng.addColorStop(0, hexA("#ffffff", na)); ng.addColorStop(0.2, hexA(n.color, na * 0.8)); ng.addColorStop(1, hexA(n.color, 0)); ctx.beginPath(); ctx.arc(n.cx, n.cy, nr, 0, PI2); ctx.fillStyle = ng; ctx.fill(); } // Floating birth text floatTextsRef.current = floatTextsRef.current.filter(f => t - f.born < 2400); for (const f of floatTextsRef.current) { const age = (t - f.born) / 2400; const rise = age * 45; const fa = age < 0.15 ? age / 0.15 : Math.max(0, 1 - (age - 0.15) / 0.85); ctx.font = "bold 11px 'SF Mono',monospace"; ctx.fillStyle = hexA(f.color, fa * 0.9); ctx.fillText(f.text, f.cx + 14, f.cy - rise); } // Vignette const vig = ctx.createRadialGradient(CX, CY, Math.min(w, h) * 0.35, CX, CY, Math.min(w, h) * 0.72); vig.addColorStop(0, "rgba(0,0,0,0)"); vig.addColorStop(1, "rgba(0,0,0,0.48)"); ctx.fillStyle = vig; ctx.fillRect(0, 0, w, h); } rafRef.current = requestAnimationFrame(draw); return () => cancelAnimationFrame(rafRef.current); }, [loading, repos.length, sel, monthIdx]); // ── Tick ──────────────────────────────────────────────────────────────────── function tick() { const idx = midxRef.current, ms = monthsRef.current; if (idx >= ms.length - 1) { setPlaying(false); return; } const ni = idx + 1; midxRef.current = ni; setMonthIdx(ni); const nextYm = ms[ni]; const ch = getChapter(nextYm); if (ch.id !== lastChapRef.current) { lastChapRef.current = ch.id; setChapCard({ id: ch.id, title: ch.title, sub: ch.sub }); requestAnimationFrame(() => setChapCardVis(true)); if (chapFadeRef.current) clearTimeout(chapFadeRef.current); chapFadeRef.current = setTimeout(() => { setChapCardVis(false); setTimeout(() => setChapCard(null), 600); }, 2200); } const newRepos = reposRef.current.filter(r => r.created_ym === nextYm); for (const r of newRepos) { const p = posRef.current[r.repo_name]; if (p) { const color = CAT_COLOR[r.category] || CRIMSON; novasRef.current.push({ cx: p[0], cy: p[1], born: animTRef.current, color }); const label = r.repo_name.split("/").pop() || r.repo_name; floatTextsRef.current.push({ text: `+ ${label}`, cx: p[0], cy: p[1], born: animTRef.current, color }); } } const evMap = eventsRef.current; const milestone = evMap[nextYm]; if (milestone && milestone.imp >= 2) { setOverlay({ title: milestone.title, body: milestone.body, ym: nextYm }); coolRef.current = 0; requestAnimationFrame(() => setOverlayVis(true)); const pauseMs = getMilestoneMs(nextYm, evMap); if (ovFadeRef.current) clearTimeout(ovFadeRef.current); ovFadeRef.current = setTimeout(() => { setOverlayVis(false); if (ovTimerRef.current) clearTimeout(ovTimerRef.current); ovTimerRef.current = setTimeout(() => setOverlay(null), 700); }, Math.max(pauseMs - 750, 300)); timerRef.current = setTimeout(tick, pauseMs / speedRef.current); } else { let delay = BASE_MS; if (coolRef.current < COOLDOWN_MS.length) { delay = COOLDOWN_MS[coolRef.current++]; } else { for (let d = 1; d <= 5; d++) { const fym = ms[ni + d]; if (fym && evMap[fym] && evMap[fym].imp >= 2) { delay = BASE_MS * (0.55 + d * 0.09); break; } } } timerRef.current = setTimeout(tick, delay / speedRef.current); } } useEffect(() => { if (loading || months.length === 0 || repos.length === 0 || autoStartedRef.current) return; autoStartedRef.current = true; lastChapRef.current = 1; const t1 = setTimeout(() => setIntro("out"), 2700); const t2 = setTimeout(() => { setIntro("done"); midxRef.current = 0; setMonthIdx(0); setPlaying(true); coolRef.current = 0; timerRef.current = setTimeout(tick, BASE_MS); }, 3500); return () => { clearTimeout(t1); clearTimeout(t2); }; }, [loading, months.length, repos.length]); const togglePlay = useCallback(() => { setPlaying(p => { if (p) { if (timerRef.current) clearTimeout(timerRef.current); return false; } timerRef.current = setTimeout(tick, BASE_MS / speedRef.current); return true; }); }, []); useEffect(() => { function onKey(e: KeyboardEvent) { if (e.code === "Space") { e.preventDefault(); togglePlay(); } else if (e.code === "ArrowRight") { e.preventDefault(); const j = e.shiftKey ? 12 : 1; const ni = Math.min(midxRef.current + j, monthsRef.current.length - 1); midxRef.current = ni; setMonthIdx(ni); } else if (e.code === "ArrowLeft") { e.preventDefault(); const j = e.shiftKey ? 12 : 1; const ni = Math.max(midxRef.current - j, 0); midxRef.current = ni; setMonthIdx(ni); } else if (e.code === "Escape") setSel(null); else if (e.key >= "1" && e.key <= "5") { const c = CHAPTERS[parseInt(e.key) - 1]; if (c) { const ti = monthsRef.current.findIndex(m => m >= c.start); if (ti >= 0) { midxRef.current = ti; setMonthIdx(ti); } } } } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [togglePlay]); useEffect(() => { function onWheel(e: WheelEvent) { e.preventDefault(); zoomRef.current = Math.max(0.25, Math.min(4.5, zoomRef.current * (e.deltaY > 0 ? 0.92 : 1.09))); } window.addEventListener("wheel", onWheel, { passive: false }); return () => window.removeEventListener("wheel", onWheel); }, []); useEffect(() => { function onMove(e: MouseEvent) { mouseRef.current = { x: e.clientX, y: e.clientY }; const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const mx = e.clientX - rect.left, my = e.clientY - rect.top; const pmx = (e.clientX - rect.width / 2) * 0.018; const pmy = (e.clientY - rect.height / 2) * 0.018; let closest: string | null = null, minDist = 30; for (const r of reposRef.current) { if (!visRef.current.has(r.repo_name)) continue; const p = posRef.current[r.repo_name]; if (!p) continue; const depth = r.category === "core" ? 0.18 : 0.35 + stableHash(r.repo_name) * 0.35; const px = p[0] + pmx * depth, py = p[1] + pmy * depth; const dist = Math.hypot(mx - px, my - py); if (dist < minDist) { minDist = dist; closest = r.repo_name; } } if (closest !== hoveredRef.current) { hoveredRef.current = closest; setHoveredName(closest); } } window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, []); function onCanvasClick(e: React.MouseEvent) { const rect = (e.target as HTMLCanvasElement).getBoundingClientRect(); const cx = e.clientX - rect.left, cy = e.clientY - rect.top; const pmx = (mouseRef.current.x - rect.width / 2) * 0.018; const pmy = (mouseRef.current.y - rect.height / 2) * 0.018; let closest: string | null = null, minDist = 22; for (const r of reposRef.current) { if (!visRef.current.has(r.repo_name)) continue; const p = posRef.current[r.repo_name]; if (!p) continue; const depth = r.category === "core" ? 0.18 : 0.35 + stableHash(r.repo_name) * 0.35; const px = p[0] + pmx * depth, py = p[1] + pmy * depth; const dist = Math.hypot(cx - px, cy - py); if (dist < minDist) { minDist = dist; closest = r.repo_name; } } if (closest) { const r = reposRef.current.find(r => r.repo_name === closest); if (r) setSel({ name: r.repo_name, category: r.category, description: r.description, stars: curStarsRef.current[r.repo_name] || 0 }); } else setSel(null); } const ym = months[monthIdx] || ""; const ch = getChapter(ym); const progress = months.length > 1 ? monthIdx / (months.length - 1) : 0; const totalStars = Object.values(curStarsRef.current).reduce((a, b) => a + b, 0); const visCount = visRef.current.size; const focusedName = hoveredName || sel?.name || null; const focusedRepo = focusedName ? repos.find(r => r.repo_name === focusedName) : null; const focusedStars = focusedName ? (curStarsRef.current[focusedName] || 0) : 0; const focusedIsPinned = !!(sel && sel.name === focusedName); const focusedConnections = focusedName ? (adjRef.current[focusedName]?.length || 0) : 0; const glass = (extra?: React.CSSProperties): React.CSSProperties => ({ background: hexA(VOID, 0.9), backdropFilter: "blur(16px)", border: `1px solid ${hexA(TXT, 0.07)}`, borderRadius: 6, ...extra, }); return (

Duckverse Chronicles

Comments