Research story

'use client';import { RESEARCH_RESTING, RESEARCH_STORY_GRID } from '@/components/visuals/stories/research-story-scenes';import { DotStory, type LoadDotStory } from '@/components/visuals/dot-engine/dot-story';const loadResearchStory: LoadDotStory = async (stage) => {	const { createResearchStoryPlayer } = await import('@/components/visuals/stories/research-story-player');	return createResearchStoryPlayer(stage);};/** * The "Run deep research on demand" card's picture: a magnifying glass reads its way across a company's page, then * the page becomes the brand profile: typeface, colors, logo and facts. With reduced motion it shows the profile. */export function ResearchStory({ className }: { className?: string }) {	return <DotStory grid={RESEARCH_STORY_GRID} resting={RESEARCH_RESTING} load={loadResearchStory} className={className} />;}

import { CARD_FRAMES, DOMAIN, LENS_PATH, PAGE_PICTURE, PROFILE_CARDS, RESEARCH_RESTING, RESEARCH_STORY_GRID, paintMagnifier } from '@/components/visuals/stories/research-story-scenes';import { DOT_ABSENT, 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 piece of research, played as a loop: the domain is typed at the top of its page, a magnifying glass wanders the * page reading it, the page turns into four empty cards, and the brand profile fills them in one card at a time. Then * the cards turn back into the page for the next domain. * * The page and the cards are mostly outline, too little for one to melt into the other, so the change travels through * them as a wave instead: it spreads out from the glass, lighting each dot as it passes and leaving the new picture. */const TYPING = { startsAt: 0.4, charactersPerSecond: 11 };const RESEARCH = { startsAt: TYPING.startsAt + DOMAIN.text.length / TYPING.charactersPerSecond + 0.2, seconds: 3.6 };const RESOLVE = { startsAt: RESEARCH.startsAt + RESEARCH.seconds + 0.2, seconds: 1.1 };const WAVE_CREST_IN_CELLS = 2.5;const CARD = { firstAt: RESOLVE.startsAt + RESOLVE.seconds + 0.1, everySeconds: 0.5, seconds: 0.45, textSeconds: 0.3 };const SHIMMER = { startsAt: CARD.firstAt + PROFILE_CARDS.length * CARD.everySeconds + 0.6, seconds: 1.1, width: 1.5 };const RESET = { startsAt: SHIMMER.startsAt + SHIMMER.seconds + 1.6, seconds: 1.1 };const LOOP_SECONDS = RESET.startsAt + RESET.seconds + 0.3;// Every card is filled in and the shimmer has passed: the picture the static art shows.const RESTING_AT_SECONDS = SHIMMER.startsAt + SHIMMER.seconds + 0.3;const TEXT_FADE_SECONDS = 0.3;const CURSOR_GAP = 3;const { columns, rows } = RESEARCH_STORY_GRID;const cellIndex = cellIndexIn(RESEARCH_STORY_GRID);const SHIMMERING_CELLS = PROFILE_CARDS.flatMap((card) => card.contents).filter((cell) => !cell.filled);const DIAGONALS = SHIMMERING_CELLS.map((cell) => cell.column + cell.row);const FIRST_DIAGONAL = Math.min(...DIAGONALS) - SHIMMER.width;const LAST_DIAGONAL = Math.max(...DIAGONALS) + SHIMMER.width;const easeInOut = (t: number) => t * t * (3 - 2 * t);const cardStartsAt = (index: number) => CARD.firstAt + index * CARD.everySeconds;// The glass ends its round where it began, so the page it melts out of and back into is one picture.function lensAt(wandered: number) {	const turn = easeInOut(clamp01(wandered)) * Math.PI * 2;	return { column: LENS_PATH.center.column + LENS_PATH.reach.column * Math.cos(turn), row: LENS_PATH.center.row + LENS_PATH.reach.row * Math.sin(turn * 2) };}function pageWithGlass(states: Uint8Array, wandered: number) {	states.set(PAGE_PICTURE.states);	paintMagnifier(states, PAGE_PICTURE.states, lensAt(wandered), DOT_FILLED, DOT_ABSENT);	return states;}export function createResearchStoryPlayer({ canvas, dotColor, surfaceColor, fontFamily, onFirstFrame }: DotStoryStage): DotStoryPlayer {	const states = new Uint8Array(columns * rows);	const pageAtRest = pageWithGlass(new Uint8Array(columns * rows), 0);	const glassAtRest = lensAt(0);	const farthestFromGlass = Math.hypot(Math.max(glassAtRest.column, columns - glassAtRest.column), Math.max(glassAtRest.row, rows - glassAtRest.row));	const paintWave = (traveled: number, before: Uint8Array, after: Uint8Array) => {		const crest = traveled * (farthestFromGlass + WAVE_CREST_IN_CELLS);		for (let cell = 0; cell < states.length; cell++) {			const fromGlass = Math.hypot((cell % columns) - glassAtRest.column, Math.floor(cell / columns) - glassAtRest.row);			if (fromGlass > crest) states[cell] = before[cell];			else if (fromGlass <= crest - WAVE_CREST_IN_CELLS) states[cell] = after[cell];			else states[cell] = before[cell] === DOT_ABSENT && after[cell] === DOT_ABSENT ? DOT_ABSENT : DOT_FILLED;		}		return states;	};	// 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 [DOMAIN, ...RESEARCH_RESTING.texts]) void document.fonts.load(dotStoryFont(text, fontFamily), text.text);	const paintCards = (seconds: number) => {		PROFILE_CARDS.forEach((card, index) => {			const filledIn = (seconds - cardStartsAt(index)) / CARD.seconds;			if (filledIn <= 0) return;			for (const cell of card.contents) {				if (hasRippleReached((cell.column - card.region.left) / card.region.columns, filledIn)) states[cellIndex(cell)] = cellState(cell);			}		});	};	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);		SHIMMERING_CELLS.forEach((cell, index) => {			if (Math.abs(DIAGONALS[index] - crest) < SHIMMER.width && states[cellIndex(cell)] === DOT_HOLLOW) states[cellIndex(cell)] = DOT_FILLED;		});	};	const statesAt = (seconds: number) => {		if (seconds >= RESET.startsAt) return paintWave(clamp01((seconds - RESET.startsAt) / RESET.seconds), RESEARCH_RESTING.states, pageAtRest);		if (seconds >= RESOLVE.startsAt + RESOLVE.seconds) {			states.set(CARD_FRAMES.states);			paintCards(seconds);			paintShimmer(seconds);			return states;		}		if (seconds >= RESOLVE.startsAt) return paintWave((seconds - RESOLVE.startsAt) / RESOLVE.seconds, pageAtRest, CARD_FRAMES.states);		return pageWithGlass(states, (seconds - RESEARCH.startsAt) / RESEARCH.seconds);	};	const paintDomain = (context: CanvasRenderingContext2D, seconds: number) => {		const presence = 1 - clamp01((seconds - RESOLVE.startsAt) / TEXT_FADE_SECONDS);		if (presence <= 0) return;		const typed = DOMAIN.text.slice(0, Math.max(0, Math.floor((seconds - TYPING.startsAt) * TYPING.charactersPerSecond)));		paintDotStoryText(context, fontFamily, { ...DOMAIN, text: typed }, presence);		if (seconds >= RESEARCH.startsAt) return;		context.font = dotStoryFont(DOMAIN, fontFamily);		paintDotStoryCursor(context, DOMAIN.x + context.measureText(typed).width + CURSOR_GAP, DOMAIN);	};	const paintProfile = (context: CanvasRenderingContext2D, seconds: number) => {		const leaving = 1 - clamp01((seconds - RESET.startsAt) / TEXT_FADE_SECONDS);		PROFILE_CARDS.forEach((card, index) => {			const presence = clamp01((seconds - cardStartsAt(index)) / CARD.textSeconds) * leaving;			for (const text of card.texts) paintDotStoryText(context, fontFamily, text, presence);		});	};	return createDotStoryPlayer({		canvas,		dotColor,		surfaceColor,		onFirstFrame,		grid: RESEARCH_STORY_GRID,		resting: { states: RESEARCH_RESTING.states, atSeconds: RESTING_AT_SECONDS },		frameAt(storySeconds) {			const seconds = storySeconds % LOOP_SECONDS;			return {				states: statesAt(seconds),				paintAbove(context) {					paintDomain(context, seconds);					paintProfile(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, outlineCells, placeCells, type Region } from '@/components/visuals/dot-engine/dot-story-cells';import type { DotStoryText } from '@/components/visuals/dot-engine/dot-story-player';/** * The "Run deep research on demand" card's pictures, in the brand dot grid: a magnifying glass reads its way across a * company's page, then the page becomes the brand profile it was read into: typeface, colors, logo and facts. */// The ring pattern behind the picture already keeps clear of it, so the dots need no halo of their own.export const RESEARCH_STORY_GRID: DotGrid = { columns: 58, rows: 38, pitch: 10, dotRadius: 3.2, ringStroke: 1, haloRadius: 0 };const { columns: COLUMNS, rows: ROWS, pitch: PITCH } = RESEARCH_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(RESEARCH_STORY_GRID, cells);	return { states, cells: cellsOfStates(RESEARCH_STORY_GRID, states) };}const PAGE: Region = { left: 8, top: 1, columns: 42, rows: 36 };const FIRST_LINE_ROW = PAGE.top + 6;const LINE_PITCH = 2;const LINE_LEFT = PAGE.left + 3;const SHORTEST_LINE = 18;const LINE_SPREAD = 19;// Every fifth line is left out, so the lines read as paragraphs.const PARAGRAPH_LINES = 5;function lineLength(line: number) {	const hash = Math.sin(line * 91.7) * 43758.5453;	return SHORTEST_LINE + Math.floor((hash - Math.floor(hash)) * LINE_SPREAD);}function pageLines(): GlyphCell[] {	const cells: GlyphCell[] = [];	for (let line = 0, row = FIRST_LINE_ROW; row < PAGE.top + PAGE.rows - 2; line++, row += LINE_PITCH) {		if (line % PARAGRAPH_LINES === PARAGRAPH_LINES - 1) continue;		for (let step = 0; step < lineLength(line); step++) cells.push({ column: LINE_LEFT + step, row, filled: false });	}	return cells;}/** The company's page, its text as lines of rings: the open web, not yet read. */export const PAGE_PICTURE = picture([...outlineCells(PAGE), ...pageLines()]);export const DOMAIN: DotStoryText = { text: 'notion.com', x: x(LINE_LEFT), y: baselineOn(PAGE.top + 2.5, 22), size: 22, weight: 700 };export const LENS = { radius: 6.5, rim: 1, handleLength: 7, handleWidth: 1.1 };/** Where the glass wanders: once across the page and back while it goes twice down and up. */export const LENS_PATH = { center: { column: 27, row: 19 }, reach: { column: 10, row: 8 } };const SQUARE_ROOT_OF_HALF = Math.SQRT1_2;function distanceToHandle(column: number, row: number, center: { column: number; row: number }) {	const from = LENS.radius * SQUARE_ROOT_OF_HALF;	const along = Math.min(LENS.handleLength, Math.max(0, (column - center.column - from + (row - center.row - from)) * SQUARE_ROOT_OF_HALF));	const reach = from + along * SQUARE_ROOT_OF_HALF;	return Math.hypot(column - center.column - reach, row - center.row - reach);}/** * Lays the glass over the page: a solid rim and handle, and under the lens the page's rings read into solid dots * while everything else clears, so the glass shows only what it has found. */export function paintMagnifier(states: Uint8Array, page: Uint8Array, center: { column: number; row: number }, solid: number, absent: number) {	const reach = Math.ceil(LENS.radius + LENS.handleLength) + 1;	for (let row = Math.max(0, Math.floor(center.row - reach)); row <= Math.min(ROWS - 1, Math.ceil(center.row + reach)); row++) {		for (let column = Math.max(0, Math.floor(center.column - reach)); column <= Math.min(COLUMNS - 1, Math.ceil(center.column + reach)); column++) {			const cell = row * COLUMNS + column;			const fromCenter = Math.hypot(column - center.column, row - center.row);			if (Math.abs(fromCenter - LENS.radius) <= LENS.rim || distanceToHandle(column, row, center) <= LENS.handleWidth) states[cell] = solid;			else if (fromCenter < LENS.radius) states[cell] = page[cell] === absent ? absent : solid;		}	}}const CARD = { columns: 28, rows: 18 };const cardAt = (column: 0 | 1, row: 0 | 1): Region => ({ left: column * (CARD.columns + 2), top: row * (CARD.rows + 2), ...CARD });const TYPEFACE = cardAt(0, 0);const COLORS = cardAt(1, 0);const LOGO = cardAt(0, 1);const FACTS = cardAt(1, 1);const label = (text: string, card: Region): DotStoryText => ({ text, x: x(card.left + 2), y: baselineOn(card.top + 2, 13), size: 13, weight: 700, muted: true });const SPECIMEN_BASELINE_ROW = 13;const typefaceCells: GlyphCell[] = Array.from({ length: CARD.columns - 4 }, (_, step) => ({ column: TYPEFACE.left + 2 + step, row: TYPEFACE.top + SPECIMEN_BASELINE_ROW, filled: false }));const SWATCH = { columns: 5, rows: 7, gap: 1, top: 7 };const SHADES = 4;// Four shades of one color, as four densities of the brand's two circles: all solid down to all rings.const isShadeFilled = (shade: number, column: number, row: number) => [true, column % 2 === 1 || row % 2 === 1, (column + row) % 2 === 0, false][shade];const colorCells: GlyphCell[] = Array.from({ length: SHADES }, (_, shade) => {	const left = COLORS.left + 3 + shade * (SWATCH.columns + SWATCH.gap);	return Array.from({ length: SWATCH.columns * SWATCH.rows }, (_, index) => {		const column = index % SWATCH.columns;		const row = Math.floor(index / SWATCH.columns);		return { column: left + column, row: COLORS.top + SWATCH.top + row, filled: isShadeFilled(shade, column, row) };	});}).flat();// Notion's mark: a block with a rounded face and a heavy N set in it.const NOTION_MARK_ROWS = [' ########### ', '#############', '##ooooooooo##', '##o##ooo##o##', '##o###oo##o##', '##o####o##o##', '##o##o####o##', '##o##oo###o##', '##o##ooo##o##', '##ooooooooo##', '#############', ' ########### '];const MARK = { left: LOGO.left + 8, top: LOGO.top + 4 };const logoCells = () => placeCells(glyphCellsFromRows(NOTION_MARK_ROWS), MARK);const FACT_ROWS = [6, 10, 14];const FACT_TEXTS = ['Software (B2B)', 'Founded 2013', 'San Francisco'];const factCells: GlyphCell[] = FACT_ROWS.map((row) => ({ column: FACTS.left + 3, row: FACTS.top + row, filled: true }));export interface ProfileCard {	region: Region;	contents: GlyphCell[];	texts: DotStoryText[];}export const PROFILE_CARDS: ProfileCard[] = [	{ region: TYPEFACE, contents: typefaceCells, texts: [label('Typeface', TYPEFACE), { text: 'Aa', x: x(TYPEFACE.left + 3), y: y(TYPEFACE.top + SPECIMEN_BASELINE_ROW) - 4, size: 84, weight: 800 }] },	{ region: COLORS, contents: colorCells, texts: [label('Colors', COLORS)] },	{ region: LOGO, contents: logoCells(), texts: [label('Logo', LOGO)] },	{ region: FACTS, contents: factCells, texts: [label('Profile', FACTS), ...FACT_TEXTS.map((text, index) => ({ text, x: x(FACTS.left + 5), y: baselineOn(FACTS.top + FACT_ROWS[index], 15), size: 15, weight: 600 }))] },];/** The four cards with nothing in them yet: what the page melts into. */export const CARD_FRAMES = picture(PROFILE_CARDS.flatMap((card) => outlineCells(card.region)));/** The whole profile: what the picture shows before it plays, and instead of playing with reduced motion. */export const RESEARCH_RESTING = {	...picture([...CARD_FRAMES.cells, ...PROFILE_CARDS.flatMap((card) => card.contents)]),	texts: PROFILE_CARDS.flatMap((card) => card.texts),};