# Lab prototypes — gaganmalik.io Last-Updated: 2026-08-14 Interactive demos are described in plain text; React widgets are not included. ## Lab prototypes ### Selection Quote [View lab](https://www.gaganmalik.io/en/newsroom/fight-the-line-not-the-thread) [Retrieval brief — selection-quote] Category: design Thesis: Chat products that treat the whole reply as the only follow-up unit force retyping; Ask highlight-to-quote puts a second cursor on the line you mean. Answers: What is the Selection Quote lab and what does it demonstrate? | How does Ask highlight-to-quote work? | Can I try Ask about this without opening the Ask page? | What did Gagan ship for passage-level follow-up on Ask? Implication: Fund a second cursor on the reply — do not make prose the only pointer into a long answer. Proof: Selection Quote interactive lab on gaganmalik.io/newsroom/fight-the-line-not-the-thread; Ask highlight-to-quote (PB-200) on gaganmalik.io/ask Related essays: fight-the-line-not-the-thread Concepts: selection-quote, highlight-to-quote, follow-up, Ask, Ask about this Selection Quote Highlight a line in an Ask reply and attach it to the follow-up. Fight the line, not the thread. Selection Quote lab by Gagan Malik. Interactive Ask demo of highlight-to-quote: select assistant prose, tap Ask about this, pin a quote chip above the follow-up field. Companion to Fight the Line, Not the Thread. When to use Use when a chat product treats the whole reply as the only follow-up unit and readers retype passages they can already see. Anatomy Demo window mirrors Ask: selectable assistant prose, Ask about this floater, quote chip above the composer. Scripted; no live chat API. Companion essay Fight the Line, Not the Thread. Argument and live embed on the essay page. Production gesture ships on Ask (PB-200). --- ### Thought Process Sheet [View lab](https://www.gaganmalik.io/en/lab/thought-process-sheet) [Retrieval brief — thought-process-sheet] Category: design Thesis: An AI chat wait state must choose which honesty surface it funds — presence, work, or judgment — and a Thought process bottom sheet is the lid for judgment, not a spinner upgrade. Answers: What is the Thought Process Sheet lab and what pattern does it demonstrate? | Can I compare presence, work, and judgment transparency side by side? | When should a product use a thought process sheet instead of a spinner? | How does Gagan Malik’s lab differ from shipping chain-of-thought on Ask? | What is the difference between Cursor agent steps and Claude’s Thought process UI? Implication: Before shipping “thinking” chrome, run the lab: if the visitor cannot tell whether they are seeing presence, work, or judgment, the UI is theatre. Proof: Thought Process Sheet interactive lab — gaganmalik.io/lab/thought-process-sheet; Companion essay: Presence Is Not Proof of Judgment — gaganmalik.io/newsroom/presence-is-not-proof-of-judgment Related essays: presence-is-not-proof-of-judgment Concepts: thought-process-sheet, presence, work-transparency, judgment, bottom-sheet, AI-chat-UX Thought Process Sheet Presence, work, and judgment are three honesty surfaces — a Thought process bottom sheet is the lid for judgment, not a spinner upgrade. Thought Process Sheet lab by Gagan Malik — interactive demo comparing Presence (Ask-style spinner verbs), Work (tool chips and Sources), and Judgment (Claude-style Thought process bottom sheet). Scripted; companion essay Presence Is Not Proof of Judgment. Ask production chat stays Sources-first. When to use Use when a product team is about to ship “thinking” chrome and needs to decide which honesty surface they are funding. Presence proves life; work proves retrieval or tool steps; judgment proves (or stages) internal rationale behind an opt-in sheet. Anatomy Three mode tabs: Presence shows rotating gerund wait state; Work shows analyzing chips plus a Sources list; Judgment opens an in-frame Thought process bottom sheet with scripted planning paragraphs. Device toggle for desktop vs mobile frame. No live model API. Companion essay Presence Is Not Proof of Judgment — argument and live embed. Standalone lab at /lab/thought-process-sheet. --- ### Data Visualisation [View lab](https://www.gaganmalik.io/en/lab/data-visualisation) [Retrieval brief — data-visualisation] Category: technology Thesis: Gagan knows which comparison to draw, and what not to trust — data visualisation is a judgment system (unit, universe, uncertainty, people-not-area), not a catalogue of chart types. Answers: What is Gagan Malik's data visualisation lab about — catalogue or judgment? | How does Gagan choose which comparison to draw in a product or board chart? | When should you distrust a radar, donut, or choropleth? | What is a ChartCard method footer (unit, universe, vintage, source)? | Why prefer small multiples and forecast fans over spaghetti and single point estimates? | How does the lab encode people counts vs geographic area? Implication: Before shipping a chart to a CEO/CXO, name the comparison (vs baseline, peer, rate, or forecast), attach unit/universe/vintage, show fog where estimates are uncertain, and refuse forms that shade area instead of counting people. Proof: Data Visualisation interactive lab — gaganmalik.io/lab/data-visualisation Related essays: family-trees-grow-wide-not-tall Concepts: data-visualisation, chart-judgment, comparison-design, uncertainty, small-multiples, per-capita, method-footer, dark-mode-contrast Data Visualisation How to choose the comparison — and when not to trust the picture. Data Visualisation lab by Gagan Malik — judgment over catalogue: pick the comparison (level, rate, share, index), show fog (confidence bands, forecast fans), prefer small multiples to spaghetti, count people with waffles and per-capita maps, and refuse seductive lies (radar rankings, busy donuts, area-as-people). Forced-dark SVG on gaganmalik.io --chart-* tokens with method footers (unit, universe, vintage, source). Judgment-first gallery Thesis: Gagan knows which comparison to draw, and what not to trust — not a catalogue of every chart type. Sections: pick the comparison; show the exception; show the fog; prefer multiples; people not area; what not to trust; rates and shares; maps with caveats; strategy appendix. ChartCard method footer requires unit, universe, vintage, and source; caveats name what not to over-read. New judgment forms: small multiples, Cleveland dot plot (+ table), waffle, forecast fan, bullet, calendar heatmap, ridgeline, Lorenz, connected scatter, mirror bars, people-rate map toggle, refuse-the-lie checklist. Charts always render on a dark island; page chrome stays Maia. Series map to --chart-* tokens. --- ### Stamp Sheet Player [View lab](https://www.gaganmalik.io/en/lab/stamp-sheet) [Retrieval brief — stamp-sheet] Category: design Thesis: A microdrama season is a film with perforations punched first — every cliffhanger after the free sample is a priced boundary, and coins exist to obscure the dollar math until you switch the ledger on. Answers: What is the Stamp Sheet Player lab and what does it demonstrate? | How does the microdrama coin unlock paywall work in the demo? | Can I see Industry vs Honest ledger mode for vertical serial drama monetisation? | Why are the first twelve episodes free in the stamp sheet demo? | How much does each microdrama episode cost when coins are converted to dollars? | What does Gagan Malik mean by a microdrama season being a perforated stamp sheet? Implication: When auditing a vertical serial product, map every cliffhanger to a payment boundary and run the honest ledger — if leadership cannot see dollars per cut, the UI is doing its job too well. Proof: Stamp Sheet Player interactive lab — gaganmalik.io/lab/stamp-sheet; Companion essay — gaganmalik.io/newsroom/why-does-every-episode-end-right-there; Demo economics: 18 coins ≈ $0.20 per unlock (WSJ/ReelShort reference in essay) Related essays: why-does-every-episode-end-right-there Concepts: microdrama, stamp-sheet, cliffhanger-as-transaction, coin-unlock, honest-ledger, vertical-serial-monetisation, perforation-boundary Stamp Sheet Player A microdrama season as a perforated stamp sheet — free sample cuts, then a priced pause at every cliffhanger; Honest ledger mode shows the dollars coins hide. Stamp Sheet Player is a mobile usability lab by Gagan Malik on /lab/stamp-sheet — Industry mode mirrors coin-unlock paywalls; Honest ledger reveals ~$0.20 per cut, running spend, and film progress on a compressed 20-episode demo sheet. Companion essay: Why Does Every Episode End Right There? When to use Teach vertical-serial monetisation when executives need to feel the transaction, not just read about cliffhangers. Use after explaining free episodes 8–15, coin unlocks, and perforation-as-boundary. Demo is mobile-only inside a phone frame; no real IAP. Anatomy Twenty episode cells (5×4 stamp sheet): episodes 1–12 are the sample zone; 13+ show lock overlays and coin CTAs in Industry mode. Honest ledger keeps the same shell but labels unlocks in dollars, running spend, cuts left, and film progress. Play/Next loop ends each cut on a cliffhanger beat. Accessibility Mode and unlock changes announce via aria-live polite. Stamp cells and primary CTAs meet 44×44 touch targets. Respect prefers-reduced-motion with instant cliffhanger beats. Lock overlay is a dialog with labelled unlock action. Companion essay Why Does Every Episode End Right There? — microdrama economics and the stamp-sheet metaphor. Interactive demo lives at /lab/stamp-sheet. --- ### Skeleton shape [View lab](https://www.gaganmalik.io/en/newsroom/a-skeleton-screen-is-a-promise-about-shape) [Retrieval brief — skeleton-shape] Category: design Thesis: A loading skeleton is a structural promise about shape, not a decorative pulse; the lab shows the same wait state built honest (matched to the real layout) versus built as generic chrome. Answers: What is the Skeleton Shape lab and what pattern does it demonstrate? | How can I compare a shape-matched loading skeleton to a generic spinner side by side? | What does Gagan Malik mean by a skeleton screen being a promise about shape? | How should Ask or a newsroom hub signal loading without lying about the destination layout? | What breaks trust in a loading skeleton: mismatched shape or missing motion? Implication: Before shipping a loading.tsx skeleton, hold it against the real component's shape and against the lab's mismatched example — if a visitor can't tell what's about to render, the skeleton is decoration, not a contract. Proof: Skeleton Shape interactive lab embedded on A Skeleton Screen Is a Promise About Shape — gaganmalik.io/newsroom/a-skeleton-screen-is-a-promise-about-shape; Companion essay — gaganmalik.io/newsroom/a-skeleton-screen-is-a-promise-about-shape Related essays: a-skeleton-screen-is-a-promise-about-shape Concepts: skeleton-screen, shape-drift, loading-states, perceived-performance, wait-state-honesty Skeleton shape A skeleton screen is a promise about shape: wireframe the layout before content lands. Skeleton Shape lab by Gagan Malik — interactive demo of Ask vs Newsroom wait states showing that loading placeholders should match the destination layout (composer, rails, card frames), not a generic spinner. When to use Use shape-matched skeletons when the page has a known layout and wait time is visible. Prefer rails, frames, and title lines over a lone spinner so the visitor learns where content will land. Anatomy Toggle Ask (composer, greeting, chrome) versus Newsroom hub (rails, card frames, title lines). Device switch shows desktop vs mobile wireframes. Pulse is optional; the outline is the contract. Companion essay A Skeleton Screen Is a Promise About Shape — argument and live embed on the essay page. --- ### What's new modal [View lab](https://www.gaganmalik.io/en/lab/capability-spotlight) [Retrieval brief — capability-spotlight] Category: design Thesis: A What's New surface earns its interruption only when it previews three concrete jobs a release unlocks, live, in the visitor's own context — not when it lists features shipped. Answers: What is the Capability Spotlight lab and what pattern does it demonstrate? | How does a What's New modal show a job instead of a feature list? | Can I see a live demo of the pill-tab, preview-card What's New pattern Gagan Malik writes about? | What is the difference between a changelog wall and a job-preview spotlight? | How should the footer CTAs on a What's New modal be sequenced (primary, dismiss, changelog)? Implication: Before shipping the next What's New modal, test it against the lab: does each tab preview a job the visitor can finish this week, or does it just restate a changelog line in bigger type? Proof: Capability Spotlight interactive lab — gaganmalik.io/lab/capability-spotlight; Companion essay: Show the Job, Not the Feature — gaganmalik.io/newsroom/show-the-job-not-the-feature Related essays: show-the-job-not-the-feature Concepts: whats-new-modal, job-board-ux, capability-spotlight, release-notes, carousel-tour, post-update What's new modal A post-update spotlight that shows users what shipped — before they return to a blank workspace. What's New modal lab by Gagan Malik — design pattern for post-update feature announcements with a dismissible modal, pill-tab use-case menu, live preview cards, and contextual footer CTAs. Interactive demo based on Claude's update spotlight. When to use Show a What's new modal on first open after a meaningful software update — not on every patch, and not before users have context for why it matters. It replaces release-note walls with three concrete jobs the update unlocks (plan, create, refine). Works especially well for AI assistants and creative tools where value depends on the task, not a feature checklist. Anatomy New badge (ties the moment to the release) and dismiss control (respects agency — mark seen, don't nag). Headline in display serif; subheadline in muted sans sets scope. A fit-to-content pill tab menu switches example use cases — active tab gets a clear outline. Preview card swaps per tab with realistic sample output. Footer: primary CTA per tab, secondary Do it later to dismiss, tertiary release notes for the changelog. Accessibility Use native tab semantics with arrow-key navigation between use cases. Announce tab changes to screen readers. Keep preview content readable at 200% zoom. Respect prefers-reduced-motion: cross-fade or instant swap instead of sliding carousels. Ensure dismiss and primary CTA meet 44×44pt touch targets. Reference The interactive demo recreates Anthropic's Claude update spotlight (tabbed trip, recipe, and email previews). --- ### Honest Clockstrip [View lab](https://www.gaganmalik.io/en/newsroom/feeding-the-meter) [Retrieval brief — honest-clockstrip] Category: design Thesis: A usage meter that shows only a percentage hides the contract; pairing remaining allowance with the reset clock at the point of send is the honest version of the same pixel budget. Answers: What is the Honest Clockstrip lab and what does it demonstrate? | How should a product show AI usage limits: percentage bar or remaining time plus reset clock? | Can I see a demo comparing a bare usage gauge to a clock-plus-remaining strip? | What is the difference between a rolling-window usage meter and a prepaid-credit balance display? | Where should usage status live in an AI chat UI — under the composer or buried in Settings? Implication: Move usage status out of Settings and under the composer; show the clock next to the number so a visitor can tell in one glance whether they're spending time or spending money. Proof: Honest Clockstrip interactive lab embedded on Feeding the Meter — gaganmalik.io/newsroom/feeding-the-meter; Companion essay: Feeding the Meter — gaganmalik.io/newsroom/feeding-the-meter Related essays: feeding-the-meter Concepts: usage-meter, clockstrip, rolling-window, prepaid-credit-expiry, AI-pricing-UX, wait-state-transparency Honest Clockstrip Put remaining allowance and the reset clock under the composer so percentage alone never pretends to be the contract. Honest Clockstrip is a usability lab by Gagan Malik showing best-practice AI usage UX: remaining time plus reset clock under a composer, and prepaid credit expiry treated as a calendar, not a capacity gauge. When to use Show usage at the point of send whenever the product meters allowance, on-demand spend, or prepaid credit. Prefer this over burying clocks in Settings → Usage. Use it for AI assistants, API dashboards, and any plan with a rolling window or calendar expiry. Anatomy Composer stays primary. Under it, a flat status strip pairs remaining with the clock: state icon beside the glance line, no gauge on the strip itself. Hover or focus (desktop) or tap (mobile) opens plan usage limits with session and weekly bars; prepaid shows balance, not a gauge. Accessibility The strip reveals usage details on hover or focus (desktop) or tap (mobile sheet). Meter fill in the details panel is decorative; meaning lives in text. Announce state changes with aria-live polite. Colour is never the only signal. Touch targets stay at least 44×44. Respect prefers-reduced-motion with instant fill updates. Companion essay Feeding the Meter — argument and live embed on the essay page. --- ### My family tree [View lab](https://www.gaganmalik.io/en/newsroom/family-trees-grow-wide-not-tall) [Retrieval brief — my-family-tree] Category: design Thesis: Genealogy interfaces default to a single node-link pedigree that scales wide, not tall; the lab lets a visitor toggle Tree, Pedigree, and Fan on the same dataset to feel why one layout can't carry orient, locate, and edit at once. Answers: What is the My Family Tree lab and what does it demonstrate? | Can I compare Tree, Pedigree, and Fan chart layouts on the same family dataset? | What is focus-is-viewport navigation in a kinship visualization? | Why do genealogy apps default to pedigree sprawl instead of fan or hourglass charts? | How does the lab illustrate the orient / locate / edit split from genealogy UX research? Implication: Before defaulting a genealogy or org-chart product to one layout, run the three views the lab demonstrates against real orient, locate, and edit tasks — not against which chart looks best in a screenshot. Proof: My Family Tree interactive lab embedded on Family Trees Grow Wide, Not Tall — gaganmalik.io/newsroom/family-trees-grow-wide-not-tall; Companion essay — gaganmalik.io/newsroom/family-trees-grow-wide-not-tall Related essays: family-trees-grow-wide-not-tall Concepts: genealogy-ux, fan-chart, hourglass-chart, pedigree-sprawl, focus-is-viewport, orient-locate-edit, kinship-visualization My family tree Genealogy apps default to the chart that scales worst. The fan and hourglass layouts already exist, and the industry ships the sprawl anyway. Family Trees Grow Wide, Not Tall — Gagan Malik lab essay on genealogy information architecture: node-link pedigree sprawl vs ego-centric fan and hourglass charts, with a live craft demo (marriage units, filter dimming, seven-ring fan, focus-is-viewport navigation). Interactive lab Focus-is-viewport hourglass for dense kinship graphs. Toggle Tree, Pedigree, and Fan on a public subset. Tap to refocus; use the profile control to inspect without travelling. Marriage units, filter dimming, and seven-ring fan encode orientation for wide families. Companion essay Family Trees Grow Wide, Not Tall — design hypothesis with a testable prototype embedded in the essay. --- ### My Design System [View lab](https://www.gaganmalik.io/en/lab/design-system) [Retrieval brief — design-system] Category: design Thesis: A design system worth citing is inspectable in the browser — tokens, spacing, radius, and component states a visitor can click through — not a static style-guide PDF. Answers: What is Gagan Malik's design system lab and what can I inspect in it? | What tokens, spacing scale, and radius does gaganmalik.io use (radix-maia / shadcn)? | Can I see the shadcn Maia components and dropdown patterns used across the site live? | How does Gagan Malik document his own design system for hiring managers or peers to review? | What is the spacing and radius convention behind gaganmalik.io's UI? Implication: Point a hiring manager or collaborator at the live lab instead of a deck — the tokens, components, and Maia dropdown conventions are the artifact, inspectable in the browser rather than described secondhand. Proof: Design System interactive lab — gaganmalik.io/lab/design-system Concepts: design-system, radix-maia, shadcn, design-tokens, spacing-scale, component-library My Design System Tokens, components, and Maia patterns used in my website. Design System lab by Gagan Malik — inspect radix-maia tokens, shadcn components, spacing, radius, typography, and Maia dropdown patterns in the browser. Interactive gallery Foundation: semantic colors from app/globals.css, radius scale from --radius, spacing 4/8/16/24/32, Inter typography tokens. Components: shadcn Maia primitives used across gaganmalik.io — buttons, inputs, selects, dialogs, and attached dropdowns. Patterns: Maia dropdown radius and sideOffset conventions; form fields; switch and touch targets. Technical docs for design-system and ui-components are linked from the lab detail page. ---