New Posts Pill
A count of fresh items drops in at the top; tapping it returns to the top as they insert.
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 · New Posts Pill
*
* Fresh items are announced, never forced in. The pill drops from the
* top edge and waits as long as it takes; only on the tap does the feedAbout this pattern
Inserting new items above someone who is mid-read is the rudest thing a feed can do, so nothing moves until it is asked to. The pill drops in from the top edge, waits as long as it takes, and only on the tap does the feed return to the top and the new items arrive on a short stagger. The pill leaves the way it came, which is what makes the return trip legible rather than a sudden scroll.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
A floating count waits above the timeline until the reader asks for it.
Related patterns
- Feed Refresh InsertPosts land above the fold and the line being read never moves — only a counter admits they arrived.
- Avatar Stack OverflowParticipants slide into the overlapping stack and the overflow count takes over.
- Follow Button SwapFollow becomes Following in place — the button never changes width.