Pinned Message Dock
A pinned bar opens at the top of a thread with a short eased height tween while a one-line copy of the message rises into it and a pin settles beside the original.
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, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Pinned Message Dock
*
* A message in a chat thread is pinned: a small pin settles beside it,
* and a pinned bar opens at the top of the thread with a short copy ofAbout this pattern
Pinning a message only helps if everyone can see where it went. This belongs in group chats, team channels and comment threads where one message, a date or a decision, needs to stay in view while the conversation keeps moving. The bar at the top of the thread opens as a short eased height tween, because its arrival really is a change in size and the thread should be seen moving down to make room. Inside it a one-line copy of the message rises a few pixels and fades in, a beat after a small pin settles beside the original, so the eye travels from the message to its new place. Nothing scales, there are no springs, and the rest of the thread is left exactly as it was. Under reduced motion the bar still opens and the copy and pin fade in without travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
A message in the group chat is pinned and a one-line copy of it slides into a bar under the header.
- Document page
At the top of a shared document, the pinned decision opens a bar and the page below moves down to make room.
Related patterns
- 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.
- Feed Refresh InsertPosts land above the fold and the line being read never moves — only a counter admits they arrived.