import { useSQLQuery } from "@motherduck/react-sql-query"; import { useRef, useEffect, useState, useMemo } from "react"; export const REQUIRED_DATABASES = [{ type: "share" as const, path: "md:_share/duckverse/8e9ed498-3f60-48f7-871d-c860c53ca99a", alias: "duckverse" }]; interface Repo { repo_name: string; owner: string; category: string; created_month: string; description: string; stars: number; } interface TEvent { ym: string; repo_name: string; title: string; } const N = (v: unknown): number => v != null ? Number(v) : 0; const S = (v: unknown): string => v != null ? String(v) : ""; const toYM = (v: unknown): string => { const s = S(v).trim(); return s.length >= 7 ? s.slice(0, 7) : "2018-01"; }; const cmpM = (a: string, b: string) => a < b ? -1 : a > b ? 1 : 0; const parseM = (m: string) => parseInt(m.slice(0, 4)) * 12 + parseInt(m.slice(5, 7)); function fmtM(ym: string): string { const MN = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]; return `${MN[(parseInt(ym.slice(5,7),10)-1)%12]} ${ym.slice(0,4)}`; } function fmtNum(n: number): string { return n>=1000?(n/1000).toFixed(1).replace(".0","")+"k":String(n); } function hexRgb(hex: string): string { return [1,3,5].map(i=>parseInt(hex.slice(i,i+2),16)).join(","); } function stableAngle(name: string): number { let h=0; for(let i=0;i>>0)/0xffffffff)*Math.PI*2; } // ─── Milestone narrative events ─────────────────────────────────────────────── // importance 3 = full screen pause + overlay; 2 = slow + card; 1 = normal speed + card const MILESTONES: Record = { "2018-10":{title:"The Spark", body:"Mark Raasveldt and Hannes Mühleisen open-source DuckDB 0.1 — an in-process analytical database with no server, no dependencies, and one yellow duck.",imp:3}, "2019-11":{title:"The First Orbit", body:"Python bindings land. Researchers replace Pandas with a single SQL query. The ecosystem has its first planet.",imp:2}, "2020-06":{title:"Systems Connect", body:"The PostgreSQL scanner ships. DuckDB learns to speak to the existing data world without moving a single byte.",imp:2}, "2021-06":{title:"Escape Velocity", body:"DuckDB-WASM arrives. Analytics in the browser, without a server. A new category of tool is born.",imp:3}, "2021-12":{title:"The Data Stack Shifts", body:"dbt-duckdb becomes production-ready. DuckDB enters the modern data stack and never leaves.",imp:2}, "2022-09":{title:"The Lakehouse Opens", body:"Iceberg and spatial extensions arrive in the same year. DuckDB now speaks every open data format.",imp:2}, "2023-06":{title:"The Cloud Appears", body:"MotherDuck launches. The open-source project and the commercial cloud become one story. The ecosystem enters a new gravity well.",imp:3}, "2023-11":{title:"Postgres Gets Superpowers", body:"pg_duckdb ships. Two of the world's most beloved databases, together at last.",imp:2}, "2024-03":{title:"AI Enters the Ecosystem", body:"The DuckDB MCP server ships. Language models can now run SQL natively. A database built for humans, adopted by machines.",imp:2}, "2025-01":{title:"DuckLake", body:"A new open lakehouse standard. DuckDB no longer just reads formats — it defines them.",imp:3}, "2026-01":{title:"An Entire Universe", body:"122 repositories. 1,966 contributors. Extensions, bindings, integrations, companies — a civilization built around a tiny duck.",imp:3}, }; // Delay for milestone months only function getMilestoneMs(ym: string): number { const m=MILESTONES[ym]; if(!m) return 0; if(m.imp===3) return 5500; if(m.imp===2) return 2800; return 1200; } // Post-milestone: ramp back from 500ms to BASE_MS over 6 steps const COOLDOWN_MS=[500,580,660,730,790,840]; const BASE_MS=900; // normal month ~900ms → total runtime ≈ 2 min // ─── Constants ──────────────────────────────────────────────────────────────── const CAT_COLOR: Record = { core:"#D49A3A", extension:"#52AECF", binding:"#72B882", integration:"#C4726A", company:"#9B8DC4", community:"#C8895E", }; const CAT_RING: Record = { core:0, extension:85, binding:148, integration:214, company:280, community:348, }; const CAT_LABEL: Record = { core:"Core", extension:"Extensions", binding:"Bindings", integration:"Integrations", company:"MotherDuck", community:"Community", }; const CAT_PERIOD: Record = { core:0, extension:55000, binding:80000, integration:105000, company:132000, community:93000, }; const TILT_DEF = 0.40; const BGSTARS = Array.from({length:260},(_,i)=>({ xr:((i*1619)%1000)/1000, yr:((i*1151)%1000)/1000, r:[0.4,0.7,1.1,0.5,1.4][i%5] as number, base:0.05+(i%10)*.022, speed:.22+(i%7)*.16, phase:(i*2.4)%(Math.PI*2), hue:i%7===0?220:i%11===0?35:i%13===0?0:-1, })); // ─── Draw helpers ───────────────────────────────────────────────────────────── function drawBg(ctx: CanvasRenderingContext2D, W: number, H: number, t: number) { const bg=ctx.createRadialGradient(W*.5,H*.44,0,W*.5,H*.44,Math.max(W,H)*.95); bg.addColorStop(0,"#0C0720"); bg.addColorStop(.5,"#060412"); bg.addColorStop(1,"#020108"); ctx.fillStyle=bg; ctx.fillRect(0,0,W,H); const mw=ctx.createLinearGradient(0,H*.15,W,H*.85); mw.addColorStop(0,"rgba(30,15,55,0)"); mw.addColorStop(.35,"rgba(35,18,60,.07)"); mw.addColorStop(.5,"rgba(40,20,65,.10)"); mw.addColorStop(.65,"rgba(35,18,60,.07)"); mw.addColorStop(1,"rgba(30,15,55,0)"); ctx.fillStyle=mw; ctx.fillRect(0,0,W,H); for(const s of BGSTARS){ const op=s.base+Math.sin(t*s.speed*.001+s.phase)*.05; ctx.beginPath(); ctx.arc(s.xr*W,s.yr*H,s.r,0,Math.PI*2); ctx.fillStyle=s.hue>=0?`hsla(${s.hue},42%,82%,${op})`:`rgba(205,193,172,${op})`; ctx.fill(); } } function drawRings(ctx: CanvasRenderingContext2D, CX: number, CY: number, sc: number, tilt: number, hovCat: string|null, litCats: Set) { for(const [cat,baseR] of Object.entries(CAT_RING)){ if(baseR===0) continue; const rx=baseR*sc, lit=cat===hovCat||litCats.has(cat); ctx.beginPath(); ctx.ellipse(CX,CY,rx,rx*tilt,0,0,Math.PI*2); ctx.strokeStyle=lit?`rgba(${hexRgb(CAT_COLOR[cat])},.45)`:"rgba(60,42,80,.22)"; ctx.lineWidth=lit?1.5:.75; if(!lit) ctx.setLineDash([4,7]); ctx.stroke(); ctx.setLineDash([]); if(rx>12){ ctx.font="7px ui-monospace,monospace"; ctx.textAlign="left"; ctx.fillStyle=lit?`rgba(${hexRgb(CAT_COLOR[cat])},.55)`:"rgba(100,80,130,.42)"; ctx.fillText(CAT_LABEL[cat].toUpperCase(),CX+rx+4,CY+3); } } } function drawSun(ctx: CanvasRenderingContext2D, CX: number, CY: number, stars: number, sc: number, t: number) { const base=Math.max(16,Math.min(32,Math.sqrt(stars)*.58))*sc; const r=base+Math.sin(t*.0018)*2.5*sc; const rgb=hexRgb(CAT_COLOR.core); for(const [rad,a] of [[r*8,.01],[r*5,.028],[r*3,.07],[r*1.8,.14]] as [number,number][]){ const g=ctx.createRadialGradient(CX,CY,0,CX,CY,rad); g.addColorStop(0,`rgba(${rgb},${a})`); g.addColorStop(1,`rgba(${rgb},0)`); ctx.beginPath(); ctx.arc(CX,CY,rad,0,Math.PI*2); ctx.fillStyle=g; ctx.fill(); } ctx.save(); ctx.globalAlpha=.045; for(let i=0;i<6;i++){ const a=(i/6)*Math.PI*2+t*.00022; const len=r*(2.8+Math.sin(t*.003+i)*.7); ctx.beginPath(); ctx.moveTo(CX,CY); ctx.lineTo(CX+Math.cos(a)*len,CY+Math.sin(a)*len); ctx.strokeStyle=`rgba(${rgb},1)`; ctx.lineWidth=r*.55; ctx.stroke(); } ctx.restore(); const core=ctx.createRadialGradient(CX-r*.22,CY-r*.18,0,CX,CY,r); core.addColorStop(0,"#fffde8"); core.addColorStop(.25,CAT_COLOR.core); core.addColorStop(.75,`rgba(${rgb},.8)`); core.addColorStop(1,`rgba(${rgb},.4)`); ctx.beginPath(); ctx.arc(CX,CY,r,0,Math.PI*2); ctx.fillStyle=core; ctx.fill(); } function drawPlanet(ctx: CanvasRenderingContext2D, repoName: string, category: string, stars: number, CX: number, CY: number, sc: number, tilt: number, alpha: number, sizeMul: number, angle: number, hovered: boolean, selected: boolean, posOut: Record|null) { const ring=(CAT_RING[category]||0)*sc; const px=CX+ring*Math.cos(angle), py=CY+ring*Math.sin(angle)*tilt; if(posOut) posOut[repoName]=[px,py]; const depth=Math.sin(angle), ds=1+depth*.26; const r=Math.max(3,Math.min(22,Math.sqrt(stars)*.46))*sc*sizeMul*ds; if(r<1) return; const color=CAT_COLOR[category]||"#888", rgb=hexRgb(color); const boost=(hovered||selected)?1.45:1; if(alpha>.3){ ctx.beginPath(); ctx.ellipse(px,py+r*1.8,r*2.1,r*.32,0,0,Math.PI*2); const sg=ctx.createRadialGradient(px,py+r*1.9,0,px,py+r*1.9,r*2.6); sg.addColorStop(0,`rgba(0,0,0,${.13*alpha*ds})`); sg.addColorStop(1,"rgba(0,0,0,0)"); ctx.fillStyle=sg; ctx.fill(); } const gR=r*2.9*boost, g=ctx.createRadialGradient(px,py,0,px,py,gR); g.addColorStop(0,`rgba(${rgb},${.17*alpha*boost})`); g.addColorStop(1,`rgba(${rgb},0)`); ctx.beginPath(); ctx.arc(px,py,gR,0,Math.PI*2); ctx.fillStyle=g; ctx.fill(); const body=ctx.createRadialGradient(px-r*.38,py-r*.32,r*.04,px,py,r*boost); body.addColorStop(0,`rgba(255,255,255,${.36*alpha})`); body.addColorStop(.32,`rgba(${rgb},${.9*alpha})`); body.addColorStop(1,`rgba(${rgb},${.42*alpha})`); ctx.beginPath(); ctx.arc(px,py,r*boost,0,Math.PI*2); ctx.fillStyle=body; ctx.fill(); ctx.beginPath(); ctx.arc(px,py,r*boost,0,Math.PI*2); ctx.strokeStyle=`rgba(255,255,255,${.16*alpha*boost})`; ctx.lineWidth=.7; ctx.stroke(); if(r*boost>8*sc||hovered||selected){ const label=repoName.replace(/^duckdb[-_]/,"").replace(/^duckdb$/,"duckdb"); ctx.font=`${Math.round(Math.min(9,7+r*boost*.12))}px ui-monospace,monospace`; ctx.textAlign="center"; ctx.fillStyle=`rgba(190,175,148,${.65*alpha})`; ctx.fillText(label,px,py+r*boost+12); } } // ─── Component ──────────────────────────────────────────────────────────────── export default function DuckverseDive() { const {data:repoData,status:rS}=useSQLQuery(`SELECT repo_name,owner,category,LEFT(CAST(created_at AS VARCHAR),7) AS cm,COALESCE(description,'') AS description,COALESCE(stars,0) AS stars FROM "duckverse"."main"."repositories" WHERE COALESCE(stars,0)>=5`); const {data:starData,status:sS}=useSQLQuery(`SELECT repo_name,LEFT(CAST(month AS VARCHAR),7) AS ym,stars FROM "duckverse"."main"."star_history" ORDER BY month`); const {data:evData}=useSQLQuery(`SELECT LEFT(CAST(event_date AS VARCHAR),7) AS ym,COALESCE(repo_name,'') AS repo_name,title FROM "duckverse"."main"."timeline_events" ORDER BY event_date`); const {data:relData}=useSQLQuery(`SELECT source_repo,target_repo FROM "duckverse"."main"."relationships"`); const {data:releaseData}=useSQLQuery(`SELECT repo_name,LEFT(CAST(release_date AS VARCHAR),7) AS ym FROM "duckverse"."main"."releases" ORDER BY release_date`); const loading=rS==="loading"||sS==="loading"; const hasError=rS==="error"||sS==="error"; // Palette const G="#06050F", T="#D8C9A8", DIM="#5A4A72", ACC="#D49A3A", BORDER="rgba(255,255,255,.07)", PANEL="rgba(6,5,16,.95)"; const [monthIdx,setMonthIdx]=useState(0); const [playing,setPlaying]=useState(false); const [selectedRepo,setSelectedRepo]=useState(null); const [overlay,setOverlay]=useState<{title:string;body:string;ym:string}|null>(null); const [overlayVisible,setOverlayVisible]=useState(false); const [tiltState,setTiltState]=useState(TILT_DEF); const [intro,setIntro]=useState<'in'|'out'|'done'>('in'); const canvasRef=useRef(null); const midxRef=useRef(0); const selRef=useRef(null); const hovRef=useRef(null); const posRef=useRef>({}); const birthRef=useRef>({}); const prevVisRef=useRef>(new Set()); const animRef=useRef(0); const animTimeRef=useRef(0); const releasePulsesRef=useRef<{cx:number;cy:number;born:number;color:string}[]>([]); const releasesByMonthRef=useRef>({}); const hasAutoStartedRef=useRef(false); const timerRef=useRef|null>(null); const overlayTimerRef=useRef|null>(null); const overlayFadeRef=useRef|null>(null); const cooldownRef=useRef(0); const zoomRef=useRef(1.0); const tiltRef=useRef(TILT_DEF); const isDraggingRef=useRef(false); const dragStartRef=useRef({x:0,y:0,tilt:TILT_DEF,moved:false}); const reposRef=useRef([]); const monthsRef=useRef([]); const starsRef=useRef>({}); const relsRef=useRef>({}); const baseAnglesRef=useRef>({}); const repos=useMemo(()=>{ if(!repoData) return []; return (repoData as any[]).map(row=>({repo_name:S(row.repo_name),owner:S(row.owner),category:S(row.category),created_month:toYM(row.cm),description:S(row.description),stars:N(row.stars)})); },[repoData]); const months=useMemo(()=>{ if(!starData) return []; const set=new Set(); for(const row of (starData as any[])) set.add(toYM(row.ym)); return Array.from(set).sort(cmpM); },[starData]); const starsByRepo=useMemo>(()=>{ if(!starData) return {}; const raw: Record>={}; for(const row of (starData as any[])){ const r=S(row.repo_name),ym=toYM(row.ym),v=N(row.stars); if(!raw[r]) raw[r]={}; raw[r][ym]=Math.max(raw[r][ym]??0,v); } const out: Record={}; for(const [r,m] of Object.entries(raw)) out[r]=Object.entries(m).sort((a,b)=>cmpM(a[0],b[0])) as [string,number][]; return out; },[starData]); const events=useMemo(()=>{ if(!evData) return []; return (evData as any[]).map(row=>({ym:toYM(row.ym),repo_name:S(row.repo_name),title:S(row.title)})); },[evData]); const relationships=useMemo>(()=>{ if(!relData) return {}; const m: Record={}; for(const row of (relData as any[])){ const s=S(row.source_repo),t=S(row.target_repo); if(!m[s]) m[s]=[]; if(!m[t]) m[t]=[]; if(!m[s].includes(t)) m[s].push(t); if(!m[t].includes(s)) m[t].push(s); } return m; },[relData]); const releasesByMonth=useMemo>(()=>{ if(!releaseData) return {}; const m: Record={}; for(const row of (releaseData as any[])){ const ym=toYM(row.ym),rn=S(row.repo_name); if(!m[ym]) m[ym]=[]; if(!m[ym].includes(rn)) m[ym].push(rn); } return m; },[releaseData]); useEffect(()=>{reposRef.current=repos;},[repos]); useEffect(()=>{monthsRef.current=months;},[months]); useEffect(()=>{starsRef.current=starsByRepo;},[starsByRepo]); useEffect(()=>{relsRef.current=relationships;},[relationships]); useEffect(()=>{releasesByMonthRef.current=releasesByMonth;},[releasesByMonth]); useEffect(()=>{const m: Record={};for(const r of repos) m[r.repo_name]=stableAngle(r.repo_name);baseAnglesRef.current=m;},[repos]); function starsAt(repoName: string, ym: string): number { const history=starsRef.current[repoName]; if(!history||history.length===0){const repo=reposRef.current.find(r=>r.repo_name===repoName);if(repo&&cmpM(repo.created_month,ym)<=0)return Math.max(5,repo.stars);return 0;} if(cmpM(ym,history[0][0])<0) return 0; const last=history[history.length-1]; if(cmpM(ym,last[0])>=0) return last[1]; let lo=0,hi=history.length-1; while(lo>1;if(cmpM(history[mid][0],ym)<=0)lo=mid;else hi=mid;} const [m0,s0]=history[lo],[m1,s1]=history[hi]; return Math.round(s0+(s1-s0)*Math.max(0,Math.min(1,(parseM(ym)-parseM(m0))/(parseM(m1)-parseM(m0)||1)))); } function starsAtR(repoName: string, ym: string): number { const history=starsByRepo[repoName]; if(!history||history.length===0) return 0; if(cmpM(ym,history[0][0])<0) return 0; const last=history[history.length-1]; if(cmpM(ym,last[0])>=0) return last[1]; let val=0; for(const [m,s] of history){if(cmpM(m,ym)<=0)val=s;else break;} return val; } // ─── Animation loop ──────────────────────────────────────────────────────── useEffect(()=>{ if(loading) return; const canvas=canvasRef.current; if(!canvas) return; const ctx=canvas.getContext("2d"); if(!ctx) return; // Native wheel listener (passive:false so preventDefault works) const onWheel=(e: WheelEvent)=>{e.preventDefault();zoomRef.current=Math.max(.35,Math.min(3.5,zoomRef.current*(e.deltaY>0?.91:1.1)));}; canvas.addEventListener("wheel",onWheel,{passive:false}); function animate(t: number){ animRef.current=requestAnimationFrame(animate); const dpr=window.devicePixelRatio||1; const rect=canvas!.getBoundingClientRect(); const W=rect.width*dpr,H=rect.height*dpr; if(W<2||H<2) return; if(canvas!.width!==Math.round(W)||canvas!.height!==Math.round(H)){canvas!.width=Math.round(W);canvas!.height=Math.round(H);} const CX=W/2,OCY=H/2*.90; const zoom=zoomRef.current,tilt=tiltRef.current; const sc=Math.min(W,H)/900*zoom; ctx!.clearRect(0,0,W,H); drawBg(ctx!,W,H,t); animTimeRef.current=t; // Warm nebula haze around the sun const nG=ctx!.createRadialGradient(CX,OCY,0,CX,OCY,Math.min(W,H)*.44); nG.addColorStop(0,"rgba(130,80,28,.06)"); nG.addColorStop(.55,"rgba(80,45,15,.025)"); nG.addColorStop(1,"rgba(0,0,0,0)"); ctx!.fillStyle=nG; ctx!.fillRect(0,0,W,H); const repos=reposRef.current,ms=monthsRef.current; if(repos.length===0||ms.length===0) return; const ym=ms[Math.min(midxRef.current,ms.length-1)]; const angles: Record={}; for(const repo of repos){ const period=CAT_PERIOD[repo.category]||0; angles[repo.repo_name]=period>0?(baseAnglesRef.current[repo.repo_name]+(t/period)*Math.PI*2)%(Math.PI*2):baseAnglesRef.current[repo.repo_name]||0; } const visible=repos.filter(r=>cmpM(r.created_month,ym)<=0); const visSet=new Set(visible.map(r=>r.repo_name)); for(const name of visSet){if(!prevVisRef.current.has(name))birthRef.current[name]=t;} prevVisRef.current=visSet; const hov=hovRef.current; const hovCat=hov?(repos.find(r=>r.repo_name===hov)?.category??null):null; const connTo: string[]=hov?(relsRef.current[hov]??[]):[]; const litCats=new Set(connTo.map(n=>repos.find(r=>r.repo_name===n)?.category??"").filter(Boolean)); drawRings(ctx!,CX,OCY,sc,tilt,hovCat,litCats); const sunStars=starsAt("duckdb",ym)||50; const sorted=visible.filter(r=>r.repo_name!=="duckdb").sort((a,b)=>Math.sin(angles[a.repo_name]??0)-Math.sin(angles[b.repo_name]??0)); const posMap: Record={}; for(const repo of sorted){ const s=starsAt(repo.repo_name,ym); if(s<=0) continue; const period=CAT_PERIOD[repo.category]||0; const ta=period>0?(angles[repo.repo_name]-.055+Math.PI*2)%(Math.PI*2):angles[repo.repo_name]; drawPlanet(ctx!,repo.repo_name,repo.category,s,CX,OCY,sc,tilt,.11,.68,ta,false,false,null); } for(const repo of sorted){ const s=starsAt(repo.repo_name,ym); const angle=angles[repo.repo_name]??0; const born=birthRef.current[repo.repo_name]; const pulse=born!==undefined?Math.max(0,1-(t-born)/2000):0; const ds=Math.max(s,visSet.has(repo.repo_name)&&s<5?12:0); if(ds<1) continue; drawPlanet(ctx!,repo.repo_name,repo.category,ds,CX,OCY,sc,tilt,1,1+pulse*1.8,angle,hovRef.current===repo.repo_name,selRef.current===repo.repo_name,posMap); } posMap["duckdb"]=[CX,OCY]; posRef.current=posMap; if(hov&&posMap[hov]){ ctx!.save(); ctx!.setLineDash([2,5]); ctx!.lineWidth=.9; for(const target of connTo){ const tp=posMap[target]; if(!tp) continue; const [fx,fy]=posMap[hov]; ctx!.beginPath(); ctx!.moveTo(fx,fy); ctx!.lineTo(tp[0],tp[1]); ctx!.strokeStyle="rgba(46,240,160,.35)"; ctx!.stroke(); ctx!.setLineDash([]); ctx!.beginPath(); ctx!.arc(tp[0],tp[1],2.5,0,Math.PI*2); ctx!.fillStyle="rgba(46,240,160,.65)"; ctx!.fill(); ctx!.setLineDash([2,5]); } ctx!.restore(); } drawSun(ctx!,CX,OCY,sunStars,sc,t); // Release pulses — expanding rings from planets const livePulses=releasePulsesRef.current.filter(p=>t-p.born<2200); releasePulsesRef.current=livePulses; for(const p of livePulses){ const age=(t-p.born)/2200; const pr=(18+age*90)*sc; const pa=(1-age)*.6; ctx!.beginPath(); ctx!.arc(p.cx,p.cy,pr,0,Math.PI*2); ctx!.strokeStyle=`rgba(${hexRgb(p.color)},${pa})`; ctx!.lineWidth=(1.8-age*1.2); ctx!.stroke(); if(age>.2){ const pr2=(18+(age-.2)*70)*sc; const pa2=(1-(age-.2))*.28; ctx!.beginPath(); ctx!.arc(p.cx,p.cy,pr2,0,Math.PI*2); ctx!.strokeStyle=`rgba(${hexRgb(p.color)},${pa2})`; ctx!.lineWidth=.8; ctx!.stroke(); } } } animRef.current=requestAnimationFrame(animate); return ()=>{cancelAnimationFrame(animRef.current);canvas.removeEventListener("wheel",onWheel);}; },[loading]); // ─── Hit test ───────────────────────────────────────────────────────────── function findAt(mx: number, my: number): string|null { const dpr=window.devicePixelRatio||1, px=mx*dpr, py=my*dpr; let best: string|null=null, bestD=Infinity; for(const [name,[rx,ry]] of Object.entries(posRef.current)){const d=Math.hypot(px-rx,py-ry);if(d){ const rect=canvasRef.current!.getBoundingClientRect(); const found=findAt(e.clientX-rect.left,e.clientY-rect.top); isDraggingRef.current=!found; dragStartRef.current={x:e.clientX,y:e.clientY,tilt:tiltRef.current,moved:false}; } function handleMouseMove(e: React.MouseEvent){ const rect=canvasRef.current!.getBoundingClientRect(); if(isDraggingRef.current){ const dy=e.clientY-dragStartRef.current.y; if(Math.abs(dy)>3) dragStartRef.current.moved=true; const newTilt=Math.max(.06,Math.min(.95,dragStartRef.current.tilt-dy*.004)); tiltRef.current=newTilt; setTiltState(newTilt); if(canvasRef.current) canvasRef.current.style.cursor="ns-resize"; } else { const found=findAt(e.clientX-rect.left,e.clientY-rect.top); hovRef.current=found; if(canvasRef.current) canvasRef.current.style.cursor=found?"pointer":"crosshair"; } } function handleMouseUp(){isDraggingRef.current=false;if(canvasRef.current) canvasRef.current.style.cursor="crosshair";} function handleClick(e: React.MouseEvent){ if(dragStartRef.current.moved) return; const rect=canvasRef.current!.getBoundingClientRect(); const found=findAt(e.clientX-rect.left,e.clientY-rect.top); selRef.current=found; setSelectedRepo(found); } function handleDblClick(){zoomRef.current=1.0;tiltRef.current=TILT_DEF;setTiltState(TILT_DEF);} // ─── Playback ───────────────────────────────────────────────────────────── function stopPlay(){ if(timerRef.current){clearTimeout(timerRef.current);timerRef.current=null;} if(overlayTimerRef.current){clearTimeout(overlayTimerRef.current);overlayTimerRef.current=null;} if(overlayFadeRef.current){clearTimeout(overlayFadeRef.current);overlayFadeRef.current=null;} cooldownRef.current=0; setOverlayVisible(false); setTimeout(()=>setOverlay(null),700); } function tick(){ const idx=midxRef.current, ms=monthsRef.current; if(idx>=ms.length-1){setPlaying(false);setOverlayVisible(false);setTimeout(()=>setOverlay(null),700);return;} const ni=idx+1, nextYm=ms[ni]; midxRef.current=ni; setMonthIdx(ni); // Emit release pulses for this month const rels=releasesByMonthRef.current[nextYm]||[]; for(const rn of rels){ const pos=posRef.current[rn]; if(!pos) continue; const cat=reposRef.current.find(r=>r.repo_name===rn)?.category||'core'; releasePulsesRef.current.push({cx:pos[0],cy:pos[1],born:animTimeRef.current,color:CAT_COLOR[cat]||'#D49A3A'}); } const milestone=MILESTONES[nextYm]; if(milestone&&milestone.imp>=2){ setOverlay({title:milestone.title,body:milestone.body,ym:nextYm}); cooldownRef.current=0; requestAnimationFrame(()=>setOverlayVisible(true)); const pauseMs=getMilestoneMs(nextYm); const fadeOutAt=Math.max(pauseMs-750,300); if(overlayFadeRef.current) clearTimeout(overlayFadeRef.current); overlayFadeRef.current=setTimeout(()=>{ setOverlayVisible(false); if(overlayTimerRef.current) clearTimeout(overlayTimerRef.current); overlayTimerRef.current=setTimeout(()=>setOverlay(null),700); },fadeOutAt); timerRef.current=setTimeout(tick,pauseMs); } else { let delay=BASE_MS; if(cooldownRef.current=2){delay=BASE_MS*(0.55+d*.09);break;} } } timerRef.current=setTimeout(tick,delay); } } function togglePlay(){ if(playing){stopPlay();setPlaying(false);} else{ if(midxRef.current>=monthsRef.current.length-1){midxRef.current=0;setMonthIdx(0);} setPlaying(true); cooldownRef.current=0; timerRef.current=setTimeout(tick,BASE_MS); } } useEffect(()=>()=>{stopPlay();},[]); // Auto-start after intro useEffect(()=>{ if(loading||months.length===0||repos.length===0||hasAutoStartedRef.current) return; hasAutoStartedRef.current=true; const t1=setTimeout(()=>setIntro('out'),2400); const t2=setTimeout(()=>{ setIntro('done'); midxRef.current=0; setMonthIdx(0); setPlaying(true); cooldownRef.current=0; timerRef.current=setTimeout(tick,BASE_MS); },3150); return ()=>{clearTimeout(t1);clearTimeout(t2);}; },[loading,months.length,repos.length]); // ─── Render values ──────────────────────────────────────────────────────── const currentMonth=months.length>0?(months[monthIdx]??months[months.length-1]):"2018-01"; const currentYear=parseInt(currentMonth.slice(0,4),10); const ERA=currentYear<2020?"Research Era":currentYear<2022?"Adoption Era":currentYear<2024?"Expansion Era":"Ecosystem Era"; const visibleNow=repos.filter(r=>cmpM(r.created_month,currentMonth)<=0); const duckdbStars=starsAtR("duckdb",currentMonth); const selRepo=repos.find(r=>r.repo_name===selectedRepo); const selStars=selRepo?starsAtR(selRepo.repo_name,currentMonth):0; const currentEvent=useMemo(()=>{ const cur=parseM(currentMonth); return [...events].reverse().find(e=>{const em=parseM(e.ym);return em<=cur&&em>=cur-2;})??null; },[events,currentMonth]); // ─── Loading / error ────────────────────────────────────────────────────── if(loading) return(

LOADING DUCKVERSE DATA...

{[0,1,2,3].map(i=>

)}

); if(hasError) return(

DUCKVERSE: CONNECTION FAILED

Check that the duckverse share is accessible

); return(

{/* Header */}

DUCKVERSE THE EVOLUTION OF DUCKDB

{ERA.toUpperCase()} {fmtM(currentMonth)}

{/* Cinematic intro */} {intro!=='done'&&(

2018 — 2026

Duckverse

The Evolution of DuckDB

Watch an entire universe emerge
from a single repository.

)} {/* Universe */}

Duckverse: The Evolution of DuckDB

Comments