AI Result Reveal
The result card rises into place while its confidence value counts up to the final number.
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 { useEffect } from "react";
import {
animate,
motion,
useMotionValue,
useReducedMotion,
useTransform,
type Variants,About this pattern
The payoff frame after an AI task: the ticket is classified, the document parsed, the risk scored. The card lifts in on a near-critically-damped spring and the score climbs from zero, with the meter driven by the same value so the two can never disagree. The count is not decoration — watching the number arrive says it was computed rather than fetched, and the hard deceleration keeps the last digits readable.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Fraud evaluation presented as a numeric risk score beside a meter.
Related patterns
- Streaming Text RevealWords arrive one at a time behind a soft caret — the answer is being written, not loaded.
- Translate CrossfadeCopy hands over to its translation while the block eases to the new text's height.
- Source Fan OutA tilted deck of reference cards fans apart to show what an answer was grounded in.