Feed Refresh Insert
Posts land above the fold and the line being read never moves — only a counter admits they arrived.
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, useLayoutEffect, useRef, useState } from "react";
import { AnimatePresence, animate, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Feed Refresh Insert
*
* New items arrive above the fold and the line being read does not move.
* The insert is compensated in the same frame it happens — scroll offsetAbout this pattern
The failure this pattern exists to prevent is losing your place: content is inserted at the top of a feed, the page grows, and the sentence you were halfway through jumps out from under you. The fix is not an animation, it is an accounting — the height added above the viewport is handed straight to the scroll offset in the same frame, before the browser paints, so the visible rows are mathematically pinned. What is left to animate is small on purpose: the new rows fade up in the space nobody is looking at, and a counter drops in from the top edge to say how many are waiting. Tapping it glides the feed home; scrolling up by hand clears it, because arriving at the top is the same event as acknowledging them.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
New posts accumulate behind a counter instead of pushing the timeline down.
Related patterns
- New Posts PillA count of fresh items drops in at the top; tapping it returns to the top as they insert.
- Unread DividerA marker draws across the thread where you stopped reading, then fades without moving anything.
- Comment Thread ExpandReplies unfold beneath a comment while the indent guide draws down beside them.