// scenes-12.jsx — "Inside the vector DB: embeddings & similarity" (RAG mechanism)
function EmbedBars({ x, y, n = 18, grow = 1, color = COLORS.purple }) {
const bars = [];
for (let i = 0; i < n; i++) {
const h = 8 + (Math.sin(i * 1.7) * 0.5 + 0.5) * 40; // deterministic
const on = i < n * grow;
bars.push();
}
return {bars}
;
}
// 2D projection of the vector space — doc points, one query point
const DOCS = [
{ nx:0.22, ny:0.30, k:'pricing' }, { nx:0.30, ny:0.42, k:'plans' },
{ nx:0.70, ny:0.24, k:'refund #1', hit:1 }, { nx:0.78, ny:0.34, k:'refund #2', hit:1 },
{ nx:0.83, ny:0.20, k:'returns', hit:1 }, { nx:0.55, ny:0.72, k:'shipping' },
{ nx:0.40, ny:0.78, k:'careers' }, { nx:0.18, ny:0.62, k:'api docs' },
];
const QUERY = { nx:0.80, ny:0.28 };
function SceneVectorDB() {
const { localTime: lt } = useSprite();
const setup = ramp(lt, 0.2, 1.0);
// pipeline (left)
const qIn = ramp(lt, 1.2, 1.9, Easing.easeOutBack);
const embIn = ramp(lt, 2.2, 2.9, Easing.easeOutBack);
const vecGrow = ramp(lt, 3.2, 4.6);
// plane
const px = 660, py = 250, pw = 520, ph = 470, pad = 46;
const PX = (nx) => px + pad + nx*(pw-2*pad);
const PY = (ny) => py + pad + ny*(ph-2*pad);
const dotAt = (i) => 4.8 + i*0.18;
const queryLand = ramp(lt, 7.4, 8.2, Easing.easeOutBack);
// similarity phase
const simPhase = lt > 8.6;
const formulaO = pulse(lt, 8.8, 24, 0.4);
const topK = lt > 13.0;
const costPhase = lt > 17.4;
const qx = PX(QUERY.nx), qy = PY(QUERY.ny);
const hits = DOCS.map((d,i)=>({...d,i})).filter(d=>d.hit);
return (
<>
{/* ── LEFT: embedding pipeline ───────────────────────────── */}
text · "refund policy?"
embedding model
{vecGrow > 0.01 && (
<>
[0.12, −0.84, 0.33, 0.07, −0.51, …]
a vector · 1,536 dimensions
)}
{/* ── CENTER: vector-space plane ─────────────────────────── */}
vector space (2-D projection)
{/* similarity lines query -> hits */}
{simPhase && hits.map((d,j)=>{
const o = ramp(lt, 9.0+j*0.4, 9.6+j*0.4);
return ;
})}
{/* doc dots */}
{DOCS.map((d,i)=>{
const o = ramp(lt, dotAt(i), dotAt(i)+0.5, Easing.easeOutBack);
if (o<=0.01) return null;
const isHit = d.hit && topK;
const c = isHit ? COLORS.green : COLORS.blue;
return (
);
})}
{/* query dot */}
{queryLand > 0.01 && (
)}
{/* ── RIGHT: cosine similarity + ranking ─────────────────── */}
{formulaO > 0.01 && (
rank by cosine similarity:
cos θ =
A · B
‖A‖ ‖B‖
1.0 = identical meaning · 0 = unrelated
{topK && [['refund #1','0.94'],['returns','0.91'],['refund #2','0.88'],['plans','0.42'],['careers','0.07']].map(([k,s],i)=>{
const o = ramp(lt, 13.2+i*0.22, 13.7+i*0.22);
const hit = i<3;
return (
{k}
{s}
);
})}
{topK &&
top-K → your retrieved chunks ↗
}
)}
{/* cost bridge */}
{costPhase && (
embed: ~$0.02 / 1M tok — cheap
the cost isn't the search — it's feeding the chunks back in
)}
An embedding model turns text into a vector — a list of numbers capturing its meaning.
Every document is a point in that space; similar meanings land close together.
Embed the query too, then measure the angle to every doc — that's cosine similarity.
The top-K nearest become the chunks you retrieve — semantic search, not keywords.
Embedding is cheap; the real bill comes from injecting those chunks — next.
);
}
Object.assign(window, { SceneVectorDB, EmbedBars });