Offline Cached Only
When the network drops, downloaded rows stay crisp while the rest dim in a wave down the list.
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 · Offline Cached Only
*
* Going offline is not an empty screen — it is a shorter list. Rows that
* are already downloaded stay exactly as they were; the ones that needAbout this pattern
Losing the network rarely empties a screen completely — it leaves a partial one, and the useful thing motion can do is say which half is which. Downloaded rows hold their full weight and pick up a small marker; rows that need the network fade to a readable dim in a wave down the list, one after another rather than all at once, so the change reads as a sweep with a cause. Nothing is removed, nothing reorders and nothing scales, because a list that rearranges itself the moment the connection drops loses the reader's place exactly when they can least afford it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Media player
Without a connection, downloaded tracks stay active while streaming-only rows fade back.
Related patterns
- Deleted Item TombstoneA removed row leaves a stub holding its slot open, with a hairline showing how long undo is on offer.
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- Chart No DataThe axes extend from the origin and a flat dashed baseline runs across, so an empty range still looks like a chart.