Social motion patterns
Reactions, threads, presence and messaging. High-frequency interactions where a heavy animation becomes noise fast.
React + Motion · new patterns added daily
Avatar Stack Overflow
ReactParticipants slide into the overlapping stack and the overflow count takes over.
Bookmark Save
ReactThe mark fills from the notch up, tucks into its corner, and a ribbon slides down behind the card edge.
Comment Thread Expand
ReactReplies unfold beneath a comment while the indent guide draws down beside them.
Feed Refresh Insert
ReactPosts land above the fold and the line being read never moves — only a counter admits they arrived.
Follow Button Swap
ReactFollow becomes Following in place — the button never changes width.
Group Join
ReactA joining member's avatar drops into the stack, the others make room, and the count rolls by one.
Trending Rise
ReactTopics travel to their new ranks with direction arrows, and a tint washes over whatever climbed.
Like Button
ReactThe heart takes on its fill and settles once — no particle spray, no confetti.
Live Viewer Count
ReactOne ring per arrival, digits rolling to the new total, and the size of the jump floating off above it.
Mention Autocomplete
ReactTyping @ raises a people list that narrows with every keystroke.
Message Reaction Attach
ReactThe chosen glyph flies out of the picker and docks at the corner of the bubble it belongs to.
Message Send
ReactThe composed line lifts out of the input and lands as the newest bubble.
New Posts Pill
ReactA count of fresh items drops in at the top; tapping it returns to the top as they insert.
Notification Arrive
ReactThe bell tips once and the badge appears — restrained, because this fires all day.
Poll Vote
ReactCasting a vote fills every bar to its share and the percentages arrive behind them.
Presence Dot
ReactThe status dot eases between tints, settles once, and sends a single ring out on coming online.
Profile Header Parallax
ReactThe cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.
Quote Post Nest
ReactQuoting a post opens a slot in the composer and settles the post into it as an embedded card.
Reaction Picker
ReactHold a message and the reactions fan out along a shallow arc above it.
Read More Expand
ReactA truncated post opens to full height while the fade that hid the cut-off line lifts with it.
Share Sheet Present
ReactThe panel rises over a dimmed page and its destinations arrive in a quick wave.
Story Ring Progress
ReactA segmented ring traces around the avatar, one arc per clip, then goes quiet.
Swipe to Reply
ReactDragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.
Typing Indicator
ReactThree dots rise and fall in sequence inside the bubble a reply will occupy.
Unread Divider
ReactA marker draws across the thread where you stopped reading, then fades without moving anything.
Voice Message Play
ReactThe waveform fills left to right as the clip plays, with a head riding the boundary and bars lifting as it passes.