Inline Citation Pills
An answer writes itself sentence by sentence and a numbered citation pill springs in after each one. Then pill 2 lights up and its source card rises underneath, like a hovered reference.
Also known as: perplexity citation animation, ai answer with sources, numbered citation chips, footnote pills css.
The Air runs about 18 hours of video playback.1 It stays silent under load because it has no fan.2 Memory now starts at 16 GB.3
V
theverge.com
MacBook Air review: silent and it lasts
HTML
<div class="aia-citation-pills" role="status" aria-label="Answer with sources">
<p class="aia-citation-pills-text"><span style="--i: 0">The Air runs about 18 hours of video playback.</span><sup style="--i: 0">1</sup> <span style="--i: 1">It stays silent under load because it has no fan.</span><sup style="--i: 1">2</sup> <span style="--i: 2">Memory now starts at 16 GB.</span><sup style="--i: 2">3</sup></p>
<div class="aia-citation-pills-card">
<b>V</b>
<span class="aia-citation-pills-site">theverge.com</span>
<span class="aia-citation-pills-title">MacBook Air review: silent and it lasts</span>
</div>
</div>CSS
@property --aia-citation-pills-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-citation-pills {
--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-citation-pills-t);
--h: clamp(0, calc((var(--t) - 3) * 4), 1);
width: 24em;
max-width: 100%;
animation: aia-citation-pills-run 9s linear infinite;
}
.aia-citation-pills-text {
margin: 0;
line-height: 1.65;
}
.aia-citation-pills-text span {
--r: clamp(0, calc((var(--t) - var(--i)) * 1.5), 1);
opacity: var(--r);
filter: blur(calc((1 - var(--r)) * 0.15em));
}
.aia-citation-pills-text sup {
/* r: 0 to 1 as the pill pops, with a little overshoot in the scale */
--r: clamp(0, calc((var(--t) - var(--i) - 0.7) * 3.3), 1);
--on: calc(var(--h) * (1 - clamp(0, calc((var(--i) - 1) * (var(--i) - 1)), 1)));
display: inline-grid;
place-items: center;
min-width: 1.55em;
height: 1.55em;
margin-left: 0.3em;
padding: 0 0.35em;
border-radius: 99em;
vertical-align: 0.15em;
font-size: 0.68em;
font-weight: 600;
line-height: 1;
background: color-mix(in srgb, var(--c) calc(var(--on) * 100%), color-mix(in srgb, currentColor 9%, transparent));
color: color-mix(in srgb, #fff calc(var(--on) * 100%), color-mix(in srgb, currentColor 65%, transparent));
opacity: var(--r);
transform: scale(calc(0.4 + 0.6 * var(--r) + 1.2 * var(--r) * (1 - var(--r))));
}
.aia-citation-pills-card {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.55em;
align-items: center;
width: fit-content;
margin-top: 0.7em;
padding: 0.55em 0.85em 0.6em 0.6em;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 0.7em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: 0 0.5em 1.3em -0.6em rgb(0 0 0 / 0.18);
opacity: var(--h);
transform: translateY(calc((1 - var(--h)) * 0.5em)) scale(calc(0.97 + 0.03 * var(--h)));
}
.aia-citation-pills-card b {
grid-row: span 2;
display: grid;
place-items: center;
width: 1.9em;
height: 1.9em;
border-radius: 0.45em;
background: #5a2ee0;
color: #fff;
font-size: 0.85em;
}
.aia-citation-pills-site {
font-size: 0.75em;
color: color-mix(in srgb, currentColor 55%, transparent);
}
.aia-citation-pills-title {
font-size: 0.88em;
font-weight: 500;
}
@keyframes aia-citation-pills-run {
0% { --aia-citation-pills-t: 0; opacity: 1; }
60% { --aia-citation-pills-t: 3; }
64% { --aia-citation-pills-t: 3; }
70% { --aia-citation-pills-t: 4; }
90% { opacity: 1; }
97%, 100% { --aia-citation-pills-t: 4; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.aia-citation-pills { animation: none; --aia-citation-pills-t: 4; }
}
@media (prefers-reduced-motion: reduce) {
.aia-citation-pills, .aia-citation-pills *, .aia-citation-pills::before, .aia-citation-pills::after, .aia-citation-pills *::before, .aia-citation-pills *::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.