← All patterns

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

React

Participants slide into the overlapping stack and the overflow count takes over.

socialfriendlyminimal
interactive

Bookmark Save

React

The mark fills from the notch up, tucks into its corner, and a ribbon slides down behind the card edge.

socialsubtlepremium
interactive

Comment Thread Expand

React

Replies unfold beneath a comment while the indent guide draws down beside them.

socialcalmminimal

Feed Refresh Insert

React

Posts land above the fold and the line being read never moves — only a counter admits they arrived.

socialcalmminimal
interactive

Follow Button Swap

React

Follow becomes Following in place — the button never changes width.

socialfriendlyminimal

Group Join

React

A joining member's avatar drops into the stack, the others make room, and the count rolls by one.

socialfriendlyenergetic

Trending Rise

React

Topics travel to their new ranks with direction arrows, and a tint washes over whatever climbed.

socialenergeticminimal
interactive

Like Button

React

The heart takes on its fill and settles once — no particle spray, no confetti.

socialfriendlyenergetic

Live Viewer Count

React

One ring per arrival, digits rolling to the new total, and the size of the jump floating off above it.

socialenergeticfuturistic
interactive

Mention Autocomplete

React

Typing @ raises a people list that narrows with every keystroke.

socialminimalfriendly
interactive

Message Reaction Attach

React

The chosen glyph flies out of the picker and docks at the corner of the bubble it belongs to.

socialfriendlyenergetic
interactive

Message Send

React

The composed line lifts out of the input and lands as the newest bubble.

socialfriendlyenergetic

New Posts Pill

React

A count of fresh items drops in at the top; tapping it returns to the top as they insert.

socialminimalfriendly

Notification Arrive

React

The bell tips once and the badge appears — restrained, because this fires all day.

socialfriendlysubtle
interactive

Poll Vote

React

Casting a vote fills every bar to its share and the percentages arrive behind them.

socialenergeticfriendly

Presence Dot

React

The status dot eases between tints, settles once, and sends a single ring out on coming online.

socialsubtlefriendly

Profile Header Parallax

React

The cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.

socialpremiumelegant
interactive

Quote Post Nest

React

Quoting a post opens a slot in the composer and settles the post into it as an embedded card.

socialminimalelegant
interactive

Reaction Picker

React

Hold a message and the reactions fan out along a shallow arc above it.

socialfriendlyenergetic
interactive

Read More Expand

React

A truncated post opens to full height while the fade that hid the cut-off line lifts with it.

socialcalmminimal
interactive

Share Sheet Present

React

The panel rises over a dimmed page and its destinations arrive in a quick wave.

socialpremiumfriendly

Story Ring Progress

React

A segmented ring traces around the avatar, one arc per clip, then goes quiet.

socialenergeticpremium
interactive

Swipe to Reply

React

Dragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.

socialfriendlypremium

Typing Indicator

React

Three dots rise and fall in sequence inside the bubble a reply will occupy.

socialfriendlysubtle

Unread Divider

React

A marker draws across the thread where you stopped reading, then fades without moving anything.

socialminimalcalm
interactive

Voice Message Play

React

The waveform fills left to right as the clip plays, with a head riding the boundary and bars lifting as it passes.

socialfriendlyfuturistic