Follow-up Suggestion Chips
Suggested follow-ups rise into place under a reply as pill buttons, staggered on a spring with a blur, then a single glint passes across each one. Real buttons with hover and focus styles.
Also known as: ai suggestion chips animation, suggested prompts ui, follow up questions chips, related questions animation.
Ask a follow-up
HTML
<div class="aia-follow-up-chips">
<p class="aia-follow-up-chips-label"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5v6a4 4 0 0 0 4 4h10m-4-4 4 4-4 4"/></svg>Ask a follow-up</p>
<div class="aia-follow-up-chips-list">
<button class="aia-follow-up-chips-chip" type="button" style="--i: 0">Compare it with Postgres 17</button>
<button class="aia-follow-up-chips-chip" type="button" style="--i: 1">Show the migration steps</button>
<button class="aia-follow-up-chips-chip" type="button" style="--i: 2">What does it cost at 10M rows?</button>
</div>
</div>CSS
.aia-follow-up-chips {
--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;
width: 24em;
max-width: 100%;
}
.aia-follow-up-chips-label {
display: flex;
align-items: center;
gap: 0.45em;
margin: 0 0 0.6em;
font-size: 0.82em;
font-weight: 500;
color: color-mix(in srgb, currentColor 55%, transparent);
animation: aia-follow-up-chips-label 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.aia-follow-up-chips-label svg {
width: 1.15em;
height: 1.15em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.aia-follow-up-chips-list {
display: flex;
flex-wrap: wrap;
gap: 0.45em;
}
.aia-follow-up-chips-chip {
position: relative;
overflow: hidden;
padding: 0.5em 0.9em;
border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
border-radius: 99em;
background: color-mix(in srgb, currentColor 3%, transparent);
color: inherit;
font: inherit;
font-size: 0.9em;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
animation: aia-follow-up-chips-in 6s infinite both;
animation-delay: calc(var(--i) * 0.12s);
}
.aia-follow-up-chips-chip::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c) 22%, transparent) 50%, transparent 70%);
transform: translateX(-110%);
animation: aia-follow-up-chips-glint 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: calc(var(--i) * 0.12s);
}
.aia-follow-up-chips-chip:hover {
border-color: color-mix(in srgb, var(--c) 55%, transparent);
background: color-mix(in srgb, var(--c) 8%, transparent);
}
.aia-follow-up-chips-chip:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
@keyframes aia-follow-up-chips-label {
0%, 4% { opacity: 0; }
10%, 88% { opacity: 1; }
94%, 100% { opacity: 0; }
}
@keyframes aia-follow-up-chips-in {
0%, 7% {
opacity: 0;
transform: translateY(0.7em) scale(0.94);
filter: blur(0.15em);
animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
}
16%, 86% { opacity: 1; transform: none; filter: blur(0); }
92%, 100% { opacity: 0; transform: translateY(-0.2em); filter: blur(0); }
}
@keyframes aia-follow-up-chips-glint {
0%, 28% { transform: translateX(-110%); }
42%, 100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
.aia-follow-up-chips-label,
.aia-follow-up-chips-chip,
.aia-follow-up-chips-chip::after { animation: none; }
.aia-follow-up-chips-chip::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-follow-up-chips, .aia-follow-up-chips *, .aia-follow-up-chips::before, .aia-follow-up-chips::after, .aia-follow-up-chips *::before, .aia-follow-up-chips *::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.