AI CSS Animations

Composer @ Mention File Picker

Typing @lim into a chat composer opens a file picker above it. The highlight steps down to limiter.ts as the arrow key presses, Enter lands it as a file chip in the text and the prompt keeps typing.

Also known as: at mention autocomplete, file picker popover, mention input animation.

Use Redis in @limlimiter.ts and keep its tests

HTML

<div class="aia-composer-mention-picker" role="status" aria-label="Mentioning a file in the composer">
  <div class="aia-composer-mention-picker-pop" aria-hidden="true">
    <p class="aia-composer-mention-picker-cap">Files</p>
    <ul class="aia-composer-mention-picker-list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg><span>limits.md</span><em>docs</em></li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg><span>limiter.ts</span><em>src/server</em></li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg><span>limiter.test.ts</span><em>src/server</em></li>
    </ul>
    <p class="aia-composer-mention-picker-keys"><kbd class="aia-composer-mention-picker-down">↓</kbd>navigate<kbd class="aia-composer-mention-picker-enter">↵</kbd>insert</p>
  </div>
  <div class="aia-composer-mention-picker-box">
    <p class="aia-composer-mention-picker-text">Use Redis in <span class="aia-composer-mention-picker-q" style="--k: 1">@</span><span class="aia-composer-mention-picker-q" style="--k: 1.4">l</span><span class="aia-composer-mention-picker-q" style="--k: 1.8">i</span><span class="aia-composer-mention-picker-q" style="--k: 2.2">m</span><span class="aia-composer-mention-picker-chip"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>limiter.ts</span></span><span class="aia-composer-mention-picker-w" style="--k: 6"> and</span><span class="aia-composer-mention-picker-w" style="--k: 6.5"> keep</span><span class="aia-composer-mention-picker-w" style="--k: 7"> its</span><span class="aia-composer-mention-picker-w" style="--k: 7.5"> tests</span><span class="aia-composer-mention-picker-caret" aria-hidden="true"></span></p>
    <div class="aia-composer-mention-picker-bar" aria-hidden="true">
      <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 11.5-8.2 8.2a5 5 0 0 1-7-7l8.6-8.6a3.4 3.4 0 0 1 4.8 4.8l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4l7.9-7.9"/></svg></span><span>@</span>
      <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg></i>
    </div>
  </div>
</div>

CSS

@property --aia-composer-mention-picker-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-composer-mention-picker {
  --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;
  --d: 9s;
  --t: var(--aia-composer-mention-picker-t);
  --open: clamp(0, min(var(--t) - 1, 5 - var(--t)) * 5, 1);
  display: grid;
  gap: 0.45em;
  width: 23em;
  animation:
    aia-composer-mention-picker-clock var(--d) linear infinite,
    aia-composer-mention-picker-fade var(--d) linear infinite;
}
.aia-composer-mention-picker-pop {
  justify-self: start;
  box-sizing: border-box;
  width: 15.5em;
  margin-left: 6.2em;
  padding: 0.4em;
  border-radius: 0.75em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
  opacity: var(--open);
  transform: translateY(calc((1 - var(--open)) * 0.5em)) scale(calc(0.96 + var(--open) * 0.04));
  transform-origin: 1em 100%;
}
.aia-composer-mention-picker-cap {
  margin: 0.1em 0.45em 0.25em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.aia-composer-mention-picker-list {
  --hl: clamp(0, var(--t) - 3, 1);
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aia-composer-mention-picker-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hl) * 1.7em);
  height: 1.7em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0.14em 0 0 var(--c);
}
.aia-composer-mention-picker-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 1.7em;
  padding: 0 0.5em;
  font-size: 1em;
}
.aia-composer-mention-picker-list svg {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.aia-composer-mention-picker-list span {
  font: 500 0.78em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-composer-mention-picker-list em {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: normal 0.68em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-composer-mention-picker-keys {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.3em 0.45em 0.1em;
  color: color-mix(in srgb, currentColor 48%, transparent);
  font-size: 0.66em;
}
.aia-composer-mention-picker-keys kbd {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: 0.35em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 -0.1em 0 color-mix(in srgb, currentColor 14%, transparent);
  font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-composer-mention-picker-keys kbd + kbd,
.aia-composer-mention-picker-keys .aia-composer-mention-picker-enter { margin-left: 0.5em; }
.aia-composer-mention-picker-down {
  --p: clamp(0, min(var(--t) - 3, 3.8 - var(--t)) * 5, 1);
}
.aia-composer-mention-picker-enter {
  --p: clamp(0, min(var(--t) - 4.6, 5 - var(--t)) * 8, 1);
}
.aia-composer-mention-picker-keys .aia-composer-mention-picker-down,
.aia-composer-mention-picker-keys .aia-composer-mention-picker-enter {
  background: color-mix(in srgb, var(--c) calc(var(--p) * 30%), color-mix(in srgb, currentColor 7%, transparent));
  color: color-mix(in srgb, var(--c) calc(var(--p) * 100%), currentColor);
  transform: translateY(calc(var(--p) * 0.08em));
}
.aia-composer-mention-picker-box {
  box-sizing: border-box;
  padding: 0.7em 0.75em 0.5em 0.9em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
}
.aia-composer-mention-picker-text {
  min-height: 2.4em;
  margin: 0 0 0.3em;
  font-size: 0.92em;
  line-height: 1.5;
}
.aia-composer-mention-picker-q,
.aia-composer-mention-picker-w,
.aia-composer-mention-picker-chip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: pre;
}
.aia-composer-mention-picker-q {
  --s: calc(clamp(0, (var(--t) - var(--k)) * 20, 1) * clamp(0, (5 - var(--t)) * 20, 1));
  max-width: calc(var(--s) * 1em);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 500;
}
.aia-composer-mention-picker-w {
  --s: clamp(0, (var(--t) - var(--k)) * 10, 1);
  max-width: calc(var(--s) * 4em);
  opacity: var(--s);
}
.aia-composer-mention-picker-chip {
  --s: clamp(0, (var(--t) - 5) * 6, 1);
  max-width: calc(var(--s) * 7em);
  vertical-align: middle;
  opacity: var(--s);
}
.aia-composer-mention-picker-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0.1em;
  padding: 0.05em 0.45em 0.05em 0.35em;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  color: color-mix(in srgb, var(--c) 75%, currentColor);
  font: 500 0.82em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  transform: scale(calc(0.6 + var(--s) * 0.4));
}
.aia-composer-mention-picker-chip svg {
  width: 1em;
  height: 1em;
}
.aia-composer-mention-picker-caret {
  display: inline-block;
  width: 0.09em;
  height: 1.15em;
  margin-left: 0.05em;
  vertical-align: -0.2em;
  background: var(--c);
  animation: aia-composer-mention-picker-blink 1s steps(1) infinite;
}
.aia-composer-mention-picker-bar {
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.aia-composer-mention-picker-bar span {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.5em;
  font: 600 0.9em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-composer-mention-picker-bar span svg {
  width: 1em;
  height: 1em;
}
.aia-composer-mention-picker-bar i {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.aia-composer-mention-picker-bar i svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2.4;
}
@keyframes aia-composer-mention-picker-clock {
  0%, 5% { --aia-composer-mention-picker-t: 0.6; }
  10% { --aia-composer-mention-picker-t: 1.2; }
  18% { --aia-composer-mention-picker-t: 2.4; }
  30% { --aia-composer-mention-picker-t: 3; }
  36% { --aia-composer-mention-picker-t: 4; }
  45% { --aia-composer-mention-picker-t: 4.6; }
  50% { --aia-composer-mention-picker-t: 5.2; }
  58% { --aia-composer-mention-picker-t: 6; }
  72%, 97% { --aia-composer-mention-picker-t: 7.7; }
  98%, 100% { --aia-composer-mention-picker-t: 0.6; }
}
@keyframes aia-composer-mention-picker-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes aia-composer-mention-picker-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-composer-mention-picker {
    animation: none;
    --aia-composer-mention-picker-t: 3.4;
  }
  .aia-composer-mention-picker-caret { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-composer-mention-picker, .aia-composer-mention-picker *, .aia-composer-mention-picker::before, .aia-composer-mention-picker::after, .aia-composer-mention-picker *::before, .aia-composer-mention-picker *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. 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.

Similar ai animations

Thought For Reasoning Disclosure
Web Search Source Chips
Streaming Reply With Soft Caret
Inline Citation Pills