Citation Popover
Pointing at a citation marker floats the source card up beside it, and leaving puts it away.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { Fragment, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Citation Popover
*
* Citation markers inside a generated answer. Pointing at one floats the
* source it came from up beside the marker; leaving puts it away.About this pattern
A generated answer is only as trustworthy as the reader's ability to check it, and the check has to cost nothing. The marker is a real button, so pointer and keyboard both reach it; the card arrives on a spring that travels but never scales, because a source quote that grows into place is harder to read than one that simply appears. Late markers anchor to their right edge so a card near the end of a line stays inside the column instead of hanging off it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Numbered markers in the answer that reveal the cited page on hover.
Related patterns
- Context Pill AttachA dragged file is caught by the prompt bar and lands inside it as a context pill.
- Reasoning Steps UnfoldA collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.
- Source Fan OutA tilted deck of reference cards fans apart to show what an answer was grounded in.