Inline Ghost Text Suggestion
A focused message field where an AI completion streams in as faint ghost text after the caret, a Tab key hint appears and presses, and the suggestion turns solid as the caret jumps to the end.
Also known as: ai autocomplete animation, copilot ghost text, inline ai suggestion, tab to accept autocomplete.
Thanks for the quick turnaround. Could we move the review to Thursday afternoon instead?
Tab to accept
HTML
<div class="aia-ghost-suggestion" role="status" aria-label="Suggestion ready, press Tab to accept"> <p class="aia-ghost-suggestion-field">Thanks for the quick turnaround. Could we<span class="aia-ghost-suggestion-caret" aria-hidden="true"></span><span class="aia-ghost-suggestion-ghost"> <span style="--i: 0">move</span> <span style="--i: 1">the</span> <span style="--i: 2">review</span> <span style="--i: 3">to</span> <span style="--i: 4">Thursday</span> <span style="--i: 5">afternoon</span> <span style="--i: 6">instead?</span><span class="aia-ghost-suggestion-caret aia-ghost-suggestion-end" aria-hidden="true"></span></span></p> <p class="aia-ghost-suggestion-hint"><kbd>Tab</kbd> to accept</p> </div>
CSS
@property --aia-ghost-suggestion-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-ghost-suggestion {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
--t: var(--aia-ghost-suggestion-t);
/* acc: 0 while it is a suggestion, 1 once accepted; press: the Tab key going down */
--acc: clamp(0, calc((var(--t) - 7.6) * 5), 1);
--ready: clamp(0, calc((var(--t) - 6.8) * 5), 1);
--press: calc(clamp(0, calc((var(--t) - 7.3) * 8), 1) * (1 - clamp(0, calc((var(--t) - 7.6) * 8), 1)));
width: 24em;
max-width: 100%;
animation: aia-ghost-suggestion-run 9s linear infinite;
}
.aia-ghost-suggestion-field {
margin: 0;
padding: 0.75em 0.9em;
border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
border-radius: 0.8em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: 0 0 0 0.22em color-mix(in srgb, var(--c) 14%, transparent);
line-height: 1.55;
}
.aia-ghost-suggestion-ghost {
animation: aia-ghost-suggestion-clear 9s linear infinite;
}
.aia-ghost-suggestion-ghost span:not(.aia-ghost-suggestion-caret) {
--r: clamp(0, calc((var(--t) - var(--i)) * 2.5), 1);
opacity: calc(var(--r) * (0.42 + 0.58 * var(--acc)));
filter: blur(calc((1 - var(--r)) * 0.12em));
}
.aia-ghost-suggestion-caret {
position: relative;
display: inline-block;
width: 0;
height: 1.2em;
vertical-align: -0.25em;
opacity: calc(1 - var(--acc));
}
.aia-ghost-suggestion-end {
opacity: var(--acc);
}
.aia-ghost-suggestion-caret::before {
content: "";
position: absolute;
left: 0.03em;
top: 0;
bottom: 0;
width: 0.1em;
border-radius: 0.05em;
background: var(--c);
animation: aia-ghost-suggestion-blink 1.05s steps(1) infinite;
}
.aia-ghost-suggestion-hint {
display: flex;
align-items: center;
gap: 0.45em;
margin: 0.6em 0 0 0.2em;
font-size: 0.8em;
color: color-mix(in srgb, currentColor 55%, transparent);
opacity: calc(var(--ready) * (1 - var(--acc)));
}
.aia-ghost-suggestion-hint kbd {
padding: 0.12em 0.45em;
border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
border-bottom-width: 2px;
border-radius: 0.35em;
background: color-mix(in srgb, currentColor 4%, transparent);
color: inherit;
font: 600 0.9em / 1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
transform: translateY(calc(var(--press) * 0.1em)) scale(calc(1 - var(--press) * 0.08));
}
@keyframes aia-ghost-suggestion-run {
0%, 12% { --aia-ghost-suggestion-t: 0; }
44% { --aia-ghost-suggestion-t: 7; }
58% { --aia-ghost-suggestion-t: 7; }
64%, 100% { --aia-ghost-suggestion-t: 8; }
}
@keyframes aia-ghost-suggestion-clear {
0%, 90% { opacity: 1; }
97%, 100% { opacity: 0; }
}
@keyframes aia-ghost-suggestion-blink {
0% { opacity: 1; }
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-ghost-suggestion,
.aia-ghost-suggestion-ghost,
.aia-ghost-suggestion-caret::before { animation: none; }
.aia-ghost-suggestion { --aia-ghost-suggestion-t: 7; }
}
@media (prefers-reduced-motion: reduce) {
.aia-ghost-suggestion, .aia-ghost-suggestion *, .aia-ghost-suggestion::before, .aia-ghost-suggestion::after, .aia-ghost-suggestion *::before, .aia-ghost-suggestion *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.