AI CSS Animations

Conversation Compacting

Compacting conversation: a scan reads down a stack of chat messages, the stack squeezes together into one summary block of 46 messages, and the context meter below drops from 82% to 31%.

Also known as: compacting conversation animation, summarize context ui, auto compact chat history.

Compacting conversation Conversation compacted auto at 80%

HTML

<div class="aia-context-compacting" role="status" aria-label="Compacting the conversation">
  <div class="aia-context-compacting-head">
    <span class="aia-context-compacting-label">
      <span class="aia-context-compacting-busy"><i aria-hidden="true"></i>Compacting conversation</span>
      <span class="aia-context-compacting-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5.5 12.5 4 4 9-9.5"/></svg>Conversation compacted</span>
    </span>
    <span class="aia-context-compacting-note">auto at 80%</span>
  </div>
  <div class="aia-context-compacting-stage" aria-hidden="true">
    <p class="aia-context-compacting-msg"><b>You</b><i></i></p>
    <p class="aia-context-compacting-msg"><b>Claude</b><i></i></p>
    <p class="aia-context-compacting-msg"><b>Claude</b><i></i></p>
    <p class="aia-context-compacting-msg"><b>You</b><i></i></p>
    <p class="aia-context-compacting-msg"><b>Claude</b><i></i></p>
    <div class="aia-context-compacting-sum">
      <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 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg>
      <span><b>Summary of 46 messages</b><span>Rate limiter on /login, 12 tests green, PR next</span></span>
    </div>
  </div>
  <div class="aia-context-compacting-meter" aria-hidden="true">
    <span>Context</span>
    <span class="aia-context-compacting-bar"></span>
    <span class="aia-context-compacting-pct"></span>
  </div>
</div>

CSS

@property --aia-context-compacting-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-context-compacting-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 82;
}
.aia-context-compacting {
  --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;
  position: relative;
  box-sizing: border-box;
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, 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);
  --d: 8s;
  --t: var(--aia-context-compacting-t);
  --p: clamp(0, var(--t) - 1, 1);
  --q: clamp(0, (var(--t) - 1.55) * 2.2, 1);
  width: 20.5em;
  padding: 0.85em 1em 0.8em;
  animation: aia-context-compacting-clock var(--d) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
.aia-context-compacting-head,
.aia-context-compacting-stage,
.aia-context-compacting-meter {
  animation: aia-context-compacting-fade var(--d) linear infinite;
}
.aia-context-compacting-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86em;
  font-weight: 600;
}
.aia-context-compacting-label { display: grid; }
.aia-context-compacting-label > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.aia-context-compacting-busy { opacity: calc(1 - var(--q)); }
.aia-context-compacting-busy i {
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  border: 0.15em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-context-compacting-spin 0.8s linear infinite;
}
.aia-context-compacting-done {
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 0.4em));
}
.aia-context-compacting-done svg {
  width: 1em;
  height: 1em;
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  stroke-width: 3;
}
.aia-context-compacting-note {
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: 500 0.82em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-context-compacting-stage {
  position: relative;
  height: 6.6em;
  margin-top: 0.55em;
}
.aia-context-compacting-msg {
  --i: 0;
  --lit: clamp(0, 1 - max(var(--t) * 5 - var(--i) - 0.5, var(--i) + 0.5 - var(--t) * 5) * 1.6, 1);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * 1.3em);
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 1.3em;
  margin: 0;
  opacity: calc((0.6 + var(--lit) * 0.4) * (1 - clamp(0, (var(--p) - 0.5) * 2.5, 1)));
  transform: translateY(calc(var(--p) * (2 - var(--i)) * 1.3em)) scale(calc(1 - var(--p) * 0.1), calc(1 - var(--p) * 0.7));
}
.aia-context-compacting-msg:nth-child(2) { --i: 1; }
.aia-context-compacting-msg:nth-child(3) { --i: 2; }
.aia-context-compacting-msg:nth-child(4) { --i: 3; }
.aia-context-compacting-msg:nth-child(5) { --i: 4; }
.aia-context-compacting-msg b {
  flex: none;
  width: 4.6em;
  color: color-mix(in srgb, var(--c) calc(var(--lit) * 80%), color-mix(in srgb, currentColor 50%, transparent));
  font: 600 0.66em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-context-compacting-msg i {
  height: 0.5em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 0 0 calc(var(--lit) * 0.12em) color-mix(in srgb, var(--c) 40%, transparent);
}
.aia-context-compacting-msg:nth-child(1) i,
.aia-context-compacting-msg:nth-child(4) i { background: color-mix(in srgb, var(--c) 38%, transparent); }
.aia-context-compacting-msg:nth-child(1) i { width: 52%; }
.aia-context-compacting-msg:nth-child(2) i { width: 84%; }
.aia-context-compacting-msg:nth-child(3) i { width: 68%; }
.aia-context-compacting-msg:nth-child(4) i { width: 38%; }
.aia-context-compacting-msg:nth-child(5) i { width: 76%; }
.aia-context-compacting-sum {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.6em 0.75em;
  border-radius: 0.65em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
  opacity: var(--q);
  transform: translateY(-50%) scale(calc(0.8 + var(--q) * 0.2), calc(0.3 + var(--q) * 0.7));
}
.aia-context-compacting-sum svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--c);
  fill: currentColor;
  stroke: none;
}
.aia-context-compacting-sum > span {
  display: grid;
  gap: 0.1em;
  min-width: 0;
}
.aia-context-compacting-sum b { font-size: 0.82em; }
.aia-context-compacting-sum span span {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-size: 0.7em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aia-context-compacting-meter {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.6em;
  padding-top: 0.65em;
  border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.72em;
}
.aia-context-compacting-bar {
  position: relative;
  flex: 1;
  height: 0.5em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.aia-context-compacting-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--c) calc(var(--q) * 100%), #d97706);
  transform: scaleX(calc(0.82 - var(--q) * 0.51));
  transform-origin: left;
}
.aia-context-compacting-bar::after {
  content: "";
  position: absolute;
  left: 80%;
  top: -0.25em;
  bottom: -0.25em;
  width: 0.12em;
  border-radius: 1px;
  background: color-mix(in srgb, currentColor 40%, transparent);
}
.aia-context-compacting-pct {
  width: 2.4em;
  font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-align: right;
  --aia-context-compacting-n: calc(82 - var(--q) * 51);
  counter-reset: n var(--aia-context-compacting-n);
}
.aia-context-compacting-pct::before { content: counter(n) "%"; }
@keyframes aia-context-compacting-clock {
  0%, 4% { --aia-context-compacting-t: 0; }
  34% { --aia-context-compacting-t: 1; }
  56% { --aia-context-compacting-t: 2; }
  62%, 95.5% { --aia-context-compacting-t: 2.2; }
  96.5%, 100% { --aia-context-compacting-t: 0; }
}
@keyframes aia-context-compacting-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-context-compacting-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-context-compacting,
  .aia-context-compacting-head,
  .aia-context-compacting-stage,
  .aia-context-compacting-meter,
  .aia-context-compacting-busy i {
    animation: none;
    --aia-context-compacting-t: 2.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aia-context-compacting, .aia-context-compacting *, .aia-context-compacting::before, .aia-context-compacting::after, .aia-context-compacting *::before, .aia-context-compacting *::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

Agent Tool Call Card
Agent Terminal Output
Agent File Edit Diff
Agent Plan Checklist