RAG story

'use client';import { RAG_RESTING, RAG_STORY_GRID } from '@/components/visuals/stories/rag-story-scenes';import { DotStory, type LoadDotStory } from '@/components/visuals/dot-engine/dot-story';const loadRagStory: LoadDotStory = async (stage) => {	const { createRagStoryPlayer } = await import('@/components/visuals/stories/rag-story-player');	return createRagStoryPlayer(stage);};/** * The "Ground RAG in fresh content" card's picture: a question is typed into a search field, the field becomes a * brain, and the brain hands out the pages that answer it. With reduced motion it shows the brain with its pages. */export function RagStory({ className }: { className?: string }) {	return <DotStory grid={RAG_STORY_GRID} resting={RAG_RESTING} load={loadRagStory} className={className} />;}

import { BRAIN, QUERY, RAG_RESTING, RAG_STORY_GRID, SEARCH, SEARCH_BAND, SEARCH_FILLED, SEARCH_INSIDE, SOURCE_CARDS } from '@/components/visuals/stories/rag-story-scenes';import type { GlyphCell } from '@/components/visuals/dot-engine/dot-glyph-cells';import { createGlyphShader, drawGlyphCells } from '@/components/visuals/dot-engine/dot-glyph-morph';import { DOT_FILLED, DOT_HOLLOW } from '@/components/visuals/dot-engine/dot-morph-dots';import { cellIndexIn, cellState, clamp01, hasRippleReached } from '@/components/visuals/dot-engine/dot-story-cells';import { createDotStoryPlayer, dotStoryFont, paintDotStoryCursor, paintDotStoryText, type DotStoryPlayer, type DotStoryStage } from '@/components/visuals/dot-engine/dot-story-player';/** * One question, played as a loop: it is typed into the search field, a scan runs round the field while the search is * out, the field fills and melts into a brain, and the brain hands out the pages that answer it, one card at a time. * Then it all melts back into the field, which empties for the next question. */const TYPING = { startsAt: 0.4, charactersPerSecond: 12 };const TYPED_AT = TYPING.startsAt + QUERY.text.length / TYPING.charactersPerSecond;const SCAN = { startsAt: TYPED_AT + 0.2, seconds: 0.8, length: 10 };const WIPE_SECONDS = 0.35;const FILL_AT = SCAN.startsAt + SCAN.seconds;const THINK = { startsAt: FILL_AT + WIPE_SECONDS, seconds: 1.1 };const RETRIEVED_AT = THINK.startsAt + THINK.seconds;const CARD = { firstAt: RETRIEVED_AT + 0.4, everySeconds: 0.8, linkSeconds: 0.3, seconds: 0.45, titleSeconds: 0.3 };const PAGE = { everySeconds: 1.1, length: 2 };const SHIMMER = { startsAt: CARD.firstAt + SOURCE_CARDS.length * CARD.everySeconds + 0.4, seconds: 1.1, width: 1.5 };const RESET = { startsAt: SHIMMER.startsAt + SHIMMER.seconds + 1.2, seconds: 1.1 };const EMPTY_AT = RESET.startsAt + RESET.seconds;const LOOP_SECONDS = EMPTY_AT + WIPE_SECONDS + 0.3;// Everything has been handed out and the shimmer has passed: the picture the static art shows.const RESTING_AT_SECONDS = SHIMMER.startsAt + SHIMMER.seconds + 0.2;const TEXT_FADE_SECONDS = 0.3;const CURSOR_GAP = 3;const CURSOR_BLINKS_PER_SECOND = 1.4;const { columns, rows, pitch } = RAG_STORY_GRID;const cellIndex = cellIndexIn(RAG_STORY_GRID);const WHOLE_GRID = { left: 0, top: 0, cellsPerSide: Math.max(columns, rows) };const BRAIN_RINGS = BRAIN.cells.filter((cell) => !cell.filled);const DIAGONALS = BRAIN_RINGS.map((cell) => cell.column + cell.row);const FIRST_DIAGONAL = Math.min(...DIAGONALS) - SHIMMER.width;const LAST_DIAGONAL = Math.max(...DIAGONALS) + SHIMMER.width;const cardStartsAt = (index: number) => CARD.firstAt + index * CARD.everySeconds;const melt = (from: GlyphCell[], into: GlyphCell[]) => createGlyphShader({ grid: RAG_STORY_GRID, box: WHOLE_GRID, cells: from, drawTarget: (target) => drawGlyphCells(target, into, pitch) });export function createRagStoryPlayer({ canvas, dotColor, surfaceColor, fontFamily, onFirstFrame }: DotStoryStage): DotStoryPlayer {	const states = new Uint8Array(columns * rows);	const think = melt(SEARCH_FILLED.cells, BRAIN.cells);	const reset = melt(RAG_RESTING.cells, SEARCH_FILLED.cells);	// The canvas draws with whatever is loaded at the time, so the fonts are asked for before any text is typed.	for (const text of [QUERY, ...RAG_RESTING.texts]) void document.fonts.load(dotStoryFont(text, fontFamily), text.text);	const paintScan = (seconds: number) => {		const since = seconds - SCAN.startsAt;		if (since < 0 || since >= SCAN.seconds) return;		const head = Math.floor((since / SCAN.seconds) * SEARCH_BAND.length);		for (let step = 0; step < SCAN.length; step++) states[cellIndex(SEARCH_BAND[(head + step) % SEARCH_BAND.length])] = DOT_FILLED;	};	const paintCards = (seconds: number) => {		SOURCE_CARDS.forEach((card, index) => {			const since = seconds - cardStartsAt(index);			if (since <= 0) return;			card.link.forEach((cell, step) => {				if (hasRippleReached(step / card.link.length, since / CARD.linkSeconds)) states[cellIndex(cell)] = DOT_HOLLOW;			});			const arrived = (since - CARD.linkSeconds) / CARD.seconds;			if (arrived <= 0) return;			// The card draws itself from the side its link comes in on.			const entry = card.link[card.link.length - 1].column;			for (const cell of card.cells) {				if (hasRippleReached(Math.abs(cell.column - entry) / card.region.columns, arrived)) states[cellIndex(cell)] = cellState(cell);			}			if (arrived < 1) return;			const head = Math.floor((((since - CARD.linkSeconds - CARD.seconds) % PAGE.everySeconds) / PAGE.everySeconds) * (card.link.length + PAGE.length));			for (let step = 0; step < PAGE.length; step++) {				const traveling = card.link[head - step];				if (traveling) states[cellIndex(traveling)] = DOT_FILLED;			}		});	};	const paintShimmer = (seconds: number) => {		const passed = (seconds - SHIMMER.startsAt) / SHIMMER.seconds;		if (passed < 0 || passed >= 1) return;		const crest = FIRST_DIAGONAL + passed * (LAST_DIAGONAL - FIRST_DIAGONAL);		BRAIN_RINGS.forEach((cell, index) => {			if (Math.abs(DIAGONALS[index] - crest) < SHIMMER.width) states[cellIndex(cell)] = DOT_FILLED;		});	};	// The rings sweep across the field, left to right, whether they are filling it or leaving it.	const paintWipe = (wiped: number, before: Uint8Array, after: Uint8Array) => {		states.set(before);		for (let row = SEARCH_INSIDE.top; row < SEARCH_INSIDE.top + SEARCH_INSIDE.rows; row++) {			for (let step = 0; step < SEARCH_INSIDE.columns; step++) {				const cell = cellIndex({ column: SEARCH_INSIDE.left + step, row });				if (hasRippleReached(step / SEARCH_INSIDE.columns, wiped)) states[cell] = after[cell];			}		}		return states;	};	const statesAt = (seconds: number) => {		if (seconds >= EMPTY_AT) return paintWipe((seconds - EMPTY_AT) / WIPE_SECONDS, SEARCH_FILLED.states, SEARCH.states);		if (seconds >= RESET.startsAt) return reset({ morph: clamp01((seconds - RESET.startsAt) / RESET.seconds), spin: 0 });		if (seconds >= RETRIEVED_AT) {			states.set(BRAIN.states);			paintCards(seconds);			paintShimmer(seconds);			return states;		}		if (seconds >= THINK.startsAt) return think({ morph: (seconds - THINK.startsAt) / THINK.seconds, spin: 0 });		if (seconds >= FILL_AT) return paintWipe((seconds - FILL_AT) / WIPE_SECONDS, SEARCH.states, SEARCH_FILLED.states);		states.set(SEARCH.states);		paintScan(seconds);		return states;	};	const paintQuery = (context: CanvasRenderingContext2D, seconds: number) => {		const presence = 1 - clamp01((seconds - FILL_AT) / TEXT_FADE_SECONDS);		if (presence <= 0) return;		const typed = QUERY.text.slice(0, Math.max(0, Math.floor((seconds - TYPING.startsAt) * TYPING.charactersPerSecond)));		paintDotStoryText(context, fontFamily, { ...QUERY, text: typed }, presence);		const isTyping = seconds >= TYPING.startsAt && typed.length < QUERY.text.length;		if (!isTyping && Math.floor(seconds * CURSOR_BLINKS_PER_SECOND * 2) % 2 === 1) return;		context.font = dotStoryFont(QUERY, fontFamily);		paintDotStoryCursor(context, QUERY.x + context.measureText(typed).width + CURSOR_GAP, QUERY, presence);	};	const paintTitles = (context: CanvasRenderingContext2D, seconds: number) => {		const leaving = 1 - clamp01((seconds - RESET.startsAt) / TEXT_FADE_SECONDS);		SOURCE_CARDS.forEach((card, index) => paintDotStoryText(context, fontFamily, card.title, clamp01((seconds - cardStartsAt(index) - CARD.linkSeconds - CARD.seconds) / CARD.titleSeconds) * leaving));	};	return createDotStoryPlayer({		canvas,		dotColor,		surfaceColor,		onFirstFrame,		grid: RAG_STORY_GRID,		resting: { states: RAG_RESTING.states, atSeconds: RESTING_AT_SECONDS },		frameAt(storySeconds) {			const seconds = storySeconds % LOOP_SECONDS;			return {				states: statesAt(seconds),				paintAbove(context) {					paintQuery(context, seconds);					paintTitles(context, seconds);				},			};		},	});}

import { glyphCellsFromRows, type GlyphCell } from '@/components/visuals/dot-engine/dot-glyph-cells';import type { DotGrid } from '@/components/visuals/dot-engine/dot-morph-dots';import { cellStates, cellsOfStates, fillCells, isFilledAmongRings, isFilledAmongSolids, outlineCells, type Region } from '@/components/visuals/dot-engine/dot-story-cells';import type { DotStoryText } from '@/components/visuals/dot-engine/dot-story-player';/** * The "Ground RAG in fresh content" card's pictures, in the brand dot grid: a question is typed into a search field, * the field becomes a brain, and the brain hands out the pages that answer it. */// The ring pattern behind the picture already keeps clear of it, so the dots need no halo of their own.export const RAG_STORY_GRID: DotGrid = { columns: 58, rows: 38, pitch: 10, dotRadius: 3.2, ringStroke: 1, haloRadius: 0 };const { columns: COLUMNS, rows: ROWS, pitch: PITCH } = RAG_STORY_GRID;const x = (column: number) => column * PITCH;const y = (row: number) => row * PITCH;// Doto sits a third of its size below the middle of the row it is set on.const baselineOn = (row: number, size: number) => y(row + 0.5) + size / 3;export interface StoryPicture {	states: Uint8Array;	cells: GlyphCell[];}function picture(cells: GlyphCell[]): StoryPicture {	const states = cellStates(RAG_STORY_GRID, cells);	return { states, cells: cellsOfStates(RAG_STORY_GRID, states) };}const FIELD: Region = { left: 5, top: 14, columns: 48, rows: 10 };const MAGNIFIER_ROWS = [' ### ', '#   #', '#   #', ' ### ', '    #', '     #'];const MAGNIFIER = { left: FIELD.left + 3, top: FIELD.top + 2 };// A solid border with a band of rings inside it, and the corners taken off so the field reads as rounded.function searchField(): GlyphCell[] {	const cells: GlyphCell[] = [];	const right = FIELD.left + FIELD.columns - 1;	const bottom = FIELD.top + FIELD.rows - 1;	for (let row = FIELD.top; row <= bottom; row++) {		for (let column = FIELD.left; column <= right; column++) {			const depth = Math.min(column - FIELD.left, right - column, row - FIELD.top, bottom - row);			const isCorner = (column === FIELD.left || column === right) && (row === FIELD.top || row === bottom);			if (depth > 1 || isCorner) continue;			cells.push({ column, row, filled: depth === 0 });		}	}	return [...cells, ...glyphCellsFromRows(MAGNIFIER_ROWS).map((cell) => ({ ...cell, column: cell.column + MAGNIFIER.left, row: cell.row + MAGNIFIER.top }))];}export const SEARCH = picture(searchField());export const SEARCH_INSIDE: Region = { left: FIELD.left + 2, top: FIELD.top + 2, columns: FIELD.columns - 4, rows: FIELD.rows - 4 };// A field that is only a border has too little in it to melt into or out of, so it fills with rings before it// becomes the brain and empties again once it is back.export const SEARCH_FILLED = picture([...fillCells(SEARCH_INSIDE, false), ...searchField()]);/** The field's band of rings, left to right: the scan that runs along it while the search is out. */export const SEARCH_BAND = SEARCH.cells.filter((cell) => !cell.filled);export const QUERY: DotStoryText = { text: 'what changed in v3?', x: x(FIELD.left + 10), y: baselineOn(FIELD.top + FIELD.rows / 2 - 0.5, 22), size: 22, weight: 700 };const BRAIN_CENTER = { column: 29, row: 18.5 };// One hemisphere as overlapping lobes, measured out from the fissure; the other mirrors it.const LOBES = [	{ out: 4.5, down: -6.5, radius: 4.6, folds: false },	{ out: 8.5, down: -3, radius: 4.4, folds: true },	{ out: 8.5, down: 2.5, radius: 4.4, folds: false },	{ out: 4.5, down: 6, radius: 4.6, folds: true },	{ out: 3.5, down: 0, radius: 5, folds: false },];const FOLD_WIDTH = 0.5;const FOLD_DEPTH = 1.2;const lobeDistances = (column: number, row: number) => LOBES.map((lobe) => Math.hypot(Math.abs(column - BRAIN_CENTER.column) - lobe.out, row - BRAIN_CENTER.row - lobe.down));const STEM: Region = { left: BRAIN_CENTER.column - 1, top: 28, columns: 3, rows: 4 };const isInStem = (column: number, row: number) => column >= STEM.left && column < STEM.left + STEM.columns && row >= STEM.top && row < STEM.top + STEM.rows;const isInLobes = (column: number, row: number) => column !== BRAIN_CENTER.column && lobeDistances(column, row).some((distance, lobe) => distance <= LOBES[lobe].radius);const isInBrain = (column: number, row: number) => isInLobes(column, row) || isInStem(column, row);const isOnBrainEdge = (column: number, row: number) => !isInBrain(column - 1, row) || !isInBrain(column + 1, row) || !isInBrain(column, row - 1) || !isInBrain(column, row + 1);// A fold runs where a lobe's rim passes through another lobe: the dots along it drop out, the way the envelope's fold// does. Only some lobes fold, or the rims crossing each other would leave little of the brain standing.function isOnFold(column: number, row: number) {	const distances = lobeDistances(column, row);	return distances.some((distance, lobe) => LOBES[lobe].folds && Math.abs(distance - LOBES[lobe].radius) < FOLD_WIDTH && distances.some((other, otherLobe) => otherLobe !== lobe && other < LOBES[otherLobe].radius - FOLD_DEPTH));}// The brand's two circles, a hemisphere each: rings for the open web it reads, solid dots for the context it keeps.function brain(): GlyphCell[] {	const cells: GlyphCell[] = [];	for (let row = 0; row < ROWS; row++) {		for (let column = 0; column < COLUMNS; column++) {			if (!isInBrain(column, row)) continue;			if (isOnBrainEdge(column, row) || isInStem(column, row)) cells.push({ column, row, filled: column !== BRAIN_CENTER.column || !isInStem(column, row) || isOnBrainEdge(column, row) });			else if (!isOnFold(column, row)) cells.push({ column, row, filled: column < BRAIN_CENTER.column ? isFilledAmongRings(column, row) : isFilledAmongSolids(column, row) });		}	}	return cells;}export const BRAIN = picture(brain());const CARD_SIZE = { columns: 13, rows: 9 };const CARD_LINES = [	{ row: 5, columns: 9 },	{ row: 6, columns: 6 },];const CARD_TITLE_SIZE = 15;export interface SourceCard {	region: Region;	cells: GlyphCell[];	/** The rule between the brain and the card, in the order a page travels it. */	link: GlyphCell[];	title: DotStoryText;}function sourceCard(title: string, left: number, top: number): SourceCard {	const region: Region = { left, top, ...CARD_SIZE };	const lines = CARD_LINES.flatMap(({ row, columns }) => Array.from({ length: columns }, (_, index) => ({ column: left + 2 + index, row: top + row, filled: false })));	const linkRow = top + Math.floor(CARD_SIZE.rows / 2);	const isLeftOfBrain = left < BRAIN_CENTER.column;	const step = isLeftOfBrain ? -1 : 1;	const cardEdge = isLeftOfBrain ? left + CARD_SIZE.columns : left - 1;	const link: GlyphCell[] = [];	for (let column = cardEdge; !isInBrain(column, linkRow) && column > 0 && column < COLUMNS; column -= step) link.unshift({ column, row: linkRow, filled: false });	return { region, cells: [...outlineCells(region), ...lines], link, title: { text: title, x: x(left + 2), y: baselineOn(top + 2.5, CARD_TITLE_SIZE), size: CARD_TITLE_SIZE, weight: 700 } };}export const SOURCE_CARDS: SourceCard[] = [sourceCard('/changelog', 0, 7), sourceCard('/blog/v3', COLUMNS - CARD_SIZE.columns, 14), sourceCard('/docs/sdk', 0, 22)];/** Everything retrieved: what the picture shows before it plays, and instead of playing with reduced motion. */export const RAG_RESTING = {	...picture([...BRAIN.cells, ...SOURCE_CARDS.flatMap((card) => [...card.link, ...card.cells])]),	texts: SOURCE_CARDS.map((card) => card.title),};