Trending Rise
Topics travel to their new ranks with direction arrows, and a tint washes over whatever climbed.
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 · Trending Rise
*
* A trending list that reorders in front of you: rows travel to their new
* ranks instead of blinking into them, movement arrows say whichAbout this pattern
A ranking that changes by re-rendering teaches the reader nothing: the third row is suddenly first and there is no way to know it moved. Here every row travels to its new position, so the change is legible as movement rather than as a difference between two screenshots. Rows carry type, so they move with position-only layout animation and land without rebound — a list that overshoots is a list you have to read twice. Direction is stated twice over, as an arrow glyph and as a brief tint on whatever climbed, since color alone is not a message everyone receives. Ranks and counts crossfade inside fixed-width tabular slots, so a figure changing never nudges the row it sits in.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
The trends panel reorders topics with post counts beside them as interest shifts.
Related patterns
- Avatar Stack OverflowParticipants slide into the overlapping stack and the overflow count takes over.
- Feed Refresh InsertPosts land above the fold and the line being read never moves — only a counter admits they arrived.
- Group JoinA joining member's avatar drops into the stack, the others make room, and the count rolls by one.