Diff Suggestion Highlight
Changed lines wash in their green and red tints one after another, then the accept bar rises beneath them.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Diff Suggestion Highlight
*
* A proposed edit arriving in place: the changed lines wash in their
* added and removed tints one after another, then the accept bar rises
* under them.About this pattern
A proposed edit landing inside the file it belongs to. The changed lines light up in reading order — a short green or red wash with an edge stripe drawn down the gutter — so the eye walks the change from top to bottom instead of meeting a wall of colour. Only the background and the edge carry the tint; the code keeps its own contrast, because a diff is read before it is judged. The accept bar arrives last and from below, so nothing destructive is under the cursor until the reader has seen what they would be agreeing to.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Code review
Suggested edits appear tinted in the editor with an accept and reject control attached.
Related patterns
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.
- AI Thinking PulseA calm breathing dot with a soft expanding ring — the app is thinking, not stuck.
- Guardrail NoticeA declined request settles in under the prompt, an amber edge draws down it, and the way forward follows.