Citation Source Popover
Inline citations that open the actual sentence the claim came from, not just a link to go and find it.
Revenue grew twenty four percent last year, though growth in the free tier had been flat for two quarters before that.
Revenue grew 24% year over year, driven almost entirely by the enterprise tier.
Open the sourceBuild inline AI citations that open the source's actual sentence. Structure: a paragraph with small numbered citation markers, and a source panel below it with reserved height. The rule: SHOW THE QUOTE. The panel carries the actual sentence the claim came from, in italics behind a quote glyph - not merely a link. A citation you have to open in a new tab to evaluate is a citation nobody checks, and an unchecked citation is decoration. Put the DATE next to the domain. Half of judging a source is knowing when it was written, and answering that before the quote is read costs one line. The markers are real buttons (aria-expanded, aria-label) - a superscript number is neither operable nor announceable on its own. The active marker INVERTS: filled accent with paper text, while the others stay lightly tinted, so it is obvious which claim the panel belongs to. Clicking the open one closes it. Use ONE panel, swapped by key inside AnimatePresence mode="wait", so two sources can never be open and confusable at the same time. Reserve the panel's height in the layout. The paragraph above must not reflow when a source opens or closes - the sentence being read has to stay where it was. Below the quote, a plain "Open the source" link with an external-link glyph, for the reader who does want to go and check. Under prefers-reduced-motion, the panel appears and disappears in place with no slide. Colors as tokens: paper panel, hairline border, one accent for the markers and the quote glyph. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.