Cache Hit Instant
Cached content gets no entrance at all; only the values that actually changed animate.
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, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Cache Hit Instant
*
* Cached data is already correct, so it gets no entrance at all — the
* panel is simply there on the first frame. Motion is spent only on whatAbout this pattern
The restraint pattern. Data served from a cache is already correct, so animating it in is a lie about how long it took — the panel is simply there on the first frame, with no fade, no lift and no placeholder. What earns motion is the revalidation: the freshness chip cross-fades from 'cached' to 'updated', and a short accent wash passes over the one or two rows whose numbers actually moved. Rows that did not change get no overlay at all, which is what makes the wash mean something. Under reduced motion the wash becomes a tint that stays, so 'what is new' survives without a single frame of movement.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Views open instantly from local state and quietly reconcile once the server answers.
Related patterns
- Background Refresh HintA two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.
- Shimmer SweepA soft highlight travels across placeholder blocks, each one a beat behind the last.
- Avatar Group LoadOverlapping faces deal themselves out along the stack, then the overflow count lands.