Source Fan Out
A tilted deck of reference cards fans apart to show what an answer was grounded in.
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 { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Source Fan Out
*
* The references an answer was grounded in, kept as a tidy stack until
* asked for. On expand the deck fans apart into a readable column; onAbout this pattern
Evidence kept out of the way until it is wanted. Closed, the references sit as one card's worth of space with the others peeking behind it at a slight tilt; opening deals them into a readable column, each card a beat behind the one above. Only the front card carries legible text while the deck is stacked — the rest fade their contents in once they are square again, so nothing is ever read at an angle. The cards are page-opaque, because a stack whose lower layers show through is not a stack.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Answers carry a collapsed source set that expands into readable cards.
Related patterns
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.
- Model Switch MorphChoosing another model glides the selection across and eases the badge into that model's name and accent.
- Summary CondenseThe dropped lines fade out from the bottom up, and only then does the card close the height they held.