Unread Divider
A marker draws across the thread where you stopped reading, then fades without moving anything.
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 · Unread Divider
*
* The line that says "you stopped here". It draws across the thread at
* the boundary, holds while the reader catches up, then fades — leavingAbout this pattern
Reopening a conversation, the only question is where to start. The marker answers it by drawing across the thread at the boundary — left rule, label, right rule, in that order, so the eye is led along the line to the first message it has not seen. Then it gets out of the way: after a hold it fades, but keeps its row, because a marker that removes its own height would slide the unread messages up under the reader's eyes at the exact moment they started reading them. Nothing springs; a rule that overshoots its own width looks like a rendering fault rather than a flourish. Under reduced motion the marker still appears and still leaves, by fading instead of being drawn.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
A red rule marks the first unread message and clears itself once the channel is read.
Related patterns
- 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.
- Read More ExpandA truncated post opens to full height while the fade that hid the cut-off line lifts with it.