AI CSS Animations

Model Fallback Switch

A reply that hits an overloaded primary model: the Opus chip rings amber through three retries, gets struck out and swaps to Sonnet with a fallback note, then the answer streams in after all.

Also known as: llm fallback model, model overloaded retry, ai provider failover ui.

OpusprimarySonnetfallback SendingStreamingDone in 4.8s

Opus is overloaded. Using Sonnet for this reply.

Here is the plan for the users table:

1. Add a nullable email_lower column.

2. Backfill it in batches of 5,000.

HTML

<div class="aia-model-fallback-switch" role="status" aria-label="Primary model overloaded, answering with the fallback model">
  <div class="aia-model-fallback-switch-head">
    <span class="aia-model-fallback-switch-chip">
      <span class="aia-model-fallback-switch-glyph" aria-hidden="true"><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>
      <span class="aia-model-fallback-switch-names"><span>Opus<i>primary</i></span><span>Sonnet<i>fallback</i></span></span>
    </span>
    <span class="aia-model-fallback-switch-state"><span>Sending</span><span class="aia-model-fallback-switch-busy"></span><span class="aia-model-fallback-switch-live">Streaming</span><span>Done in 4.8s</span></span>
  </div>
  <p class="aia-model-fallback-switch-note"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 4.2 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4M12 17.2v.1"/></svg><span>Opus is overloaded. Using Sonnet for this reply.</span></p>
  <div class="aia-model-fallback-switch-body">
    <p>Here is the plan for the users table:</p>
    <p>1. Add a nullable email_lower column.</p>
    <p>2. Backfill it in batches of 5,000.</p>
  </div>
</div>

CSS

@property --aia-model-fallback-switch-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-model-fallback-switch-r {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}
.aia-model-fallback-switch {
  --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-model-fallback-switch-t);
  --warn: color-mix(in srgb, #d97706 84%, currentColor);
  --sw: clamp(0, (var(--t) - 0.36) * 16.6667, 1);
  width: 22em;
  padding: 0.75em 0.95em 0.85em;
  animation: aia-model-fallback-switch-clock var(--d) linear infinite;
}
.aia-model-fallback-switch > * {
  animation: aia-model-fallback-switch-fade var(--d) linear infinite;
}
.aia-model-fallback-switch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aia-model-fallback-switch-chip {
  --hot: calc(clamp(0, (var(--t) - 0.08) * 50, 1) * (1 - clamp(0, (var(--t) - 0.38) * 25, 1)));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.65em 0.3em 0.4em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent),
    0 0 0 calc(var(--hot) * 0.18em) color-mix(in srgb, #d97706 45%, transparent);
}
.aia-model-fallback-switch-glyph {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.aia-model-fallback-switch-glyph svg {
  width: 0.9em;
  height: 0.9em;
  fill: currentColor;
  stroke: none;
  transform: rotate(calc(var(--sw) * 180deg));
}
.aia-model-fallback-switch-names {
  display: grid;
  height: 1.35em;
  overflow: hidden;
  font-size: 0.85em;
  font-weight: 600;
}
.aia-model-fallback-switch-names > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.45em;
  line-height: 1.35em;
  white-space: nowrap;
}
.aia-model-fallback-switch-names > span:first-child {
  position: relative;
  opacity: calc(1 - var(--sw));
  transform: translateY(calc(var(--sw) * -1.3em));
}
.aia-model-fallback-switch-names > span:first-child::after {
  content: "";
  position: absolute;
  left: -0.1em;
  top: 52%;
  width: 2.6em;
  height: 0.09em;
  background: var(--warn);
  transform: scaleX(clamp(0, (var(--t) - 0.31) * 25, 1));
  transform-origin: left;
}
.aia-model-fallback-switch-names > span:last-child {
  opacity: var(--sw);
  transform: translateY(calc((1 - var(--sw)) * 1.3em));
}
.aia-model-fallback-switch-names i {
  padding: 0.05em 0.45em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 500 0.72em system-ui, sans-serif;
}
.aia-model-fallback-switch-state {
  display: grid;
  justify-items: end;
  font-size: 0.74em;
  font-weight: 600;
}
.aia-model-fallback-switch-state > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.aia-model-fallback-switch-state > :first-child {
  color: color-mix(in srgb, currentColor 50%, transparent);
  opacity: calc(1 - clamp(0, (var(--t) - 0.08) * 50, 1));
}
.aia-model-fallback-switch-state > :last-child {
  color: color-mix(in srgb, currentColor 50%, transparent);
  opacity: clamp(0, (var(--t) - 0.79) * 50, 1);
}
.aia-model-fallback-switch-busy {
  --aia-model-fallback-switch-r: calc(1 + clamp(0, (var(--t) - 0.19) * 100, 1) + clamp(0, (var(--t) - 0.28) * 100, 1));
  counter-reset: r var(--aia-model-fallback-switch-r);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--warn);
  opacity: calc(clamp(0, (var(--t) - 0.09) * 50, 1) * (1 - clamp(0, (var(--t) - 0.39) * 33.3333, 1)));
}
.aia-model-fallback-switch-busy::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--warn);
  animation: aia-model-fallback-switch-blink 0.9s ease-in-out infinite;
}
.aia-model-fallback-switch-busy::after { content: "Overloaded, retry " counter(r) "/3"; }
.aia-model-fallback-switch-live {
  background: linear-gradient(90deg, var(--c) 35%, color-mix(in srgb, currentColor 90%, transparent) 50%, var(--c) 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: calc(clamp(0, (var(--t) - 0.42) * 33.3333, 1) * (1 - clamp(0, (var(--t) - 0.78) * 50, 1)));
  animation: aia-model-fallback-switch-shine 1.6s linear infinite;
}
.aia-model-fallback-switch-note {
  --o: clamp(0, (var(--t) - 0.38) * 16.6667, 1);
  display: flex;
  align-items: center;
  gap: 0.45em;
  box-sizing: border-box;
  height: calc(var(--o) * 2.1em);
  margin: calc(var(--o) * 0.6em) 0 0;
  padding: 0 0.6em;
  overflow: hidden;
  border-radius: 0.5em;
  background: color-mix(in srgb, #d97706 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 calc(var(--o) * 30%), transparent);
  color: var(--warn);
  font-size: 0.74em;
  font-weight: 500;
  white-space: nowrap;
  opacity: var(--o);
}
.aia-model-fallback-switch-note svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}
.aia-model-fallback-switch-body {
  position: relative;
  margin-top: 0.6em;
  font-size: 0.8em;
  line-height: 1.55;
}
.aia-model-fallback-switch-body p {
  --p: 0;
  margin: 0;
  white-space: nowrap;
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}
.aia-model-fallback-switch-body p:nth-child(1) { --p: clamp(0, (var(--t) - 0.46) * 10, 1); }
.aia-model-fallback-switch-body p:nth-child(2) { --p: clamp(0, (var(--t) - 0.56) * 10, 1); color: color-mix(in srgb, currentColor 75%, transparent); }
.aia-model-fallback-switch-body p:nth-child(3) { --p: clamp(0, (var(--t) - 0.66) * 10, 1); color: color-mix(in srgb, currentColor 75%, transparent); }
/* skeleton bars hold the space while the request waits */
.aia-model-fallback-switch-body::before {
  content: "";
  position: absolute;
  inset: 0.35em 0 0.35em;
  background:
    linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 0 0) 0 0 / 82% 0.7em no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 0 0) 0 50% / 64% 0.7em no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 0 0) 0 100% / 72% 0.7em no-repeat;
  opacity: calc(1 - clamp(0, (var(--t) - 0.44) * 25, 1));
  animation: aia-model-fallback-switch-blink 1.4s ease-in-out infinite;
}
@keyframes aia-model-fallback-switch-clock {
  from { --aia-model-fallback-switch-t: 0; }
  to { --aia-model-fallback-switch-t: 1; }
}
@keyframes aia-model-fallback-switch-fade {
  0% { opacity: 0; }
  3%, 93% { opacity: 1; }
  97.5%, 100% { opacity: 0; }
}
@keyframes aia-model-fallback-switch-blink {
  0%, 100% { filter: opacity(1); }
  50% { filter: opacity(0.4); }
}
@keyframes aia-model-fallback-switch-shine {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-model-fallback-switch,
  .aia-model-fallback-switch > *,
  .aia-model-fallback-switch-live,
  .aia-model-fallback-switch-busy::before,
  .aia-model-fallback-switch-body::before {
    animation: none;
    --aia-model-fallback-switch-t: 0.8;
  }
}

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