Streaming List Append
Live matches dock at the bottom of the list as they arrive, nudging the tally in the header.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Streaming List Append
*
* Matches arrive from a live query and dock at the bottom of the list,
* each one nudging the tally in the header. New arrivals enter fromAbout this pattern
A query that returns as it finds rather than all at once: crawls, log tails, federated lookups. Each arrival enters from below and docks at the end of the list, which is the whole trick — everything already on screen holds absolutely still, so a reader midway down keeps their place while the panel grows under them. The tally in the header changes by translation and a crossfade, never a scale, so the figure stays legible while it moves. A live marker breathes only while the stream is open and stops the moment it closes, making the end of the run as clear as the start.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Events dock at the end of the stream with a running count above them.
Related patterns
- Search Results SwapStale answers dim and stay put while the fresh set cross-fades over them.
- Chart Bars GrowBars rise out of the baseline in reading order, with the axis landing first so there is something to measure against.
- Dashboard Tiles CascadeMetric tiles resolve corner to corner in a diagonal wave instead of arriving as one slab.