Inline Completion Ghost
A faint prediction appears ahead of the caret and firms up to real content when it is accepted.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Inline Completion Ghost
*
* The prediction an editor offers ahead of the caret: it fades in faint
* and grey, and on accept it firms up to real text while the caret movesAbout this pattern
A prediction offered inside the field has to be obviously provisional and obviously free to ignore. Opacity does that work: the continuation resolves in at around 40% and simply stays there, contributing nothing but a suggestion, until it is taken and firms up to full strength. The caret and the prediction are keyed siblings that swap order on accept, so a position-only layout animation slides the caret to the new end of the line — the one movement in the pattern, and the one that says the offer became real.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A dimmed continuation rendered ahead of the caret and taken with a single key.
Related patterns
- Autocomplete RiseA completion panel lifts into place under the field, its rows landing a beat apart.
- Token Budget MeterThe fill climbs to the conversation's usage while its colour walks to amber, and the trim notice fades in at the threshold.
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.