AI CSS Animations

Agent Generating UI Preview

A generated dashboard assembling itself in a preview pane: the sidebar slides in, stat cards pop up, a chart line draws and the skeleton resolves into real numbers before the badge reads Ready.

Also known as: dashboard skeleton, ai ui generation animation, skeleton loading dashboard.

Generating dashboard.tsxReady in 14s Preview

HTML

<div class="aia-agent-ui-preview" role="status" aria-label="Generating dashboard preview">
  <div class="aia-agent-ui-preview-head">
    <span class="aia-agent-ui-preview-badge"><i 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></i><span class="aia-agent-ui-preview-swap"><span>Generating dashboard.tsx</span><span>Ready in 14s</span></span></span>
    <span class="aia-agent-ui-preview-tab">Preview</span>
  </div>
  <div class="aia-agent-ui-preview-canvas" aria-hidden="true">
    <div class="aia-agent-ui-preview-side"><b></b><i></i><i></i><i></i></div>
    <div class="aia-agent-ui-preview-main">
      <div class="aia-agent-ui-preview-stats">
        <span><i></i><b>$48.2k</b></span>
        <span><i></i><b>1,284</b></span>
        <span><i></i><b>3.1%</b></span>
      </div>
      <div class="aia-agent-ui-preview-chart">
        <svg viewBox="0 0 100 30" preserveAspectRatio="none"><path class="aia-agent-ui-preview-area" d="M0 24 L12 20 L24 22 L36 14 L48 16 L60 9 L72 12 L84 5 L100 7 L100 30 L0 30 Z"/><path class="aia-agent-ui-preview-line" d="M0 24 L12 20 L24 22 L36 14 L48 16 L60 9 L72 12 L84 5 L100 7" pathLength="100"/></svg>
      </div>
    </div>
  </div>
</div>

CSS

@property --aia-agent-ui-preview-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-agent-ui-preview {
  --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: 9s;
  --t: var(--aia-agent-ui-preview-t);
  --ready: clamp(0, (var(--t) - 4.5) * 4, 1);
  width: 23em;
  padding: 0.7em;
  animation: aia-agent-ui-preview-clock var(--d) cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.aia-agent-ui-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.2em 0.6em;
  font-size: 0.78em;
}
.aia-agent-ui-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
}
.aia-agent-ui-preview-badge i {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
}
.aia-agent-ui-preview-badge svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  stroke: none;
  rotate: calc((1 - var(--ready)) * 1turn);
  animation: aia-agent-ui-preview-twirl 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-agent-ui-preview-swap {
  display: grid;
}
.aia-agent-ui-preview-swap > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.aia-agent-ui-preview-swap > :first-child {
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 55%, transparent) 35%, currentColor 50%, color-mix(in srgb, currentColor 55%, transparent) 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: calc(1 - var(--ready));
  animation: aia-agent-ui-preview-shine 1.8s linear infinite;
}
.aia-agent-ui-preview-swap > :last-child {
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  opacity: var(--ready);
  transform: translateY(calc((1 - var(--ready)) * 0.5em));
}
.aia-agent-ui-preview-tab {
  padding: 0.25em 0.6em;
  border-radius: 0.4em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-weight: 600;
}
.aia-agent-ui-preview-head,
.aia-agent-ui-preview-canvas {
  animation: aia-agent-ui-preview-fade var(--d) linear infinite;
}
.aia-agent-ui-preview-canvas {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  height: 8.6em;
  overflow: hidden;
  border-radius: 0.55em;
  background: color-mix(in srgb, currentColor 2%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
}
.aia-agent-ui-preview-side {
  --g: clamp(0, var(--t) * 2, 1);
  display: grid;
  align-content: start;
  gap: 0.5em;
  padding: 0.7em 0.55em;
  border-right: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  opacity: var(--g);
  transform: translateX(calc((var(--g) - 1) * 100%));
}
.aia-agent-ui-preview-side b {
  width: 1.2em;
  height: 1.2em;
  margin-bottom: 0.25em;
  border-radius: 0.35em;
  background: var(--c);
}
.aia-agent-ui-preview-side i {
  height: 0.35em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.aia-agent-ui-preview-side i:first-of-type { background: color-mix(in srgb, var(--c) 55%, transparent); }
.aia-agent-ui-preview-side i:last-of-type { width: 70%; }
.aia-agent-ui-preview-main {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5em;
  padding: 0.6em;
}
.aia-agent-ui-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45em;
}
.aia-agent-ui-preview-stats span {
  --i: 0;
  --g: clamp(0, (var(--t) - 1 - var(--i) * 0.3) * 3, 1);
  display: grid;
  gap: 0.3em;
  padding: 0.45em 0.5em;
  border-radius: 0.4em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
  opacity: var(--g);
  transform: translateY(calc((1 - var(--g)) * 0.6em)) scale(calc(0.9 + var(--g) * 0.1));
}
.aia-agent-ui-preview-stats span:nth-child(2) { --i: 1; }
.aia-agent-ui-preview-stats span:nth-child(3) { --i: 2; }
.aia-agent-ui-preview-stats i {
  width: 60%;
  height: 0.3em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.aia-agent-ui-preview-stats b {
  position: relative;
  justify-self: start;
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor calc(var(--ready) * 100%), transparent);
}
/* skeleton bar standing in for the number until the data lands */
.aia-agent-ui-preview-stats b::before {
  content: "";
  position: absolute;
  inset: 0.2em 0;
  border-radius: 0.3em;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 22%, transparent), color-mix(in srgb, currentColor 12%, transparent)) 0 0 / 200% 100%;
  opacity: calc(1 - var(--ready));
  animation: aia-agent-ui-preview-shine 1.4s linear infinite;
}
.aia-agent-ui-preview-chart {
  --g: clamp(0, (var(--t) - 2.2) * 2, 1);
  position: relative;
  border-radius: 0.4em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
  opacity: var(--g);
  overflow: hidden;
}
.aia-agent-ui-preview-chart svg {
  position: absolute;
  inset: 0.5em 0.4em 0.3em;
  width: calc(100% - 0.8em);
  height: calc(100% - 0.8em);
}
.aia-agent-ui-preview-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - clamp(0, (var(--t) - 2.6) * 0.75, 1)) * 100);
}
.aia-agent-ui-preview-area {
  fill: color-mix(in srgb, var(--c) 14%, transparent);
  opacity: clamp(0, (var(--t) - 3.6) * 2, 1);
}
@keyframes aia-agent-ui-preview-clock {
  0%, 6% { --aia-agent-ui-preview-t: 0; }
  14% { --aia-agent-ui-preview-t: 1; }
  24% { --aia-agent-ui-preview-t: 2; }
  44% { --aia-agent-ui-preview-t: 4; }
  58%, 96% { --aia-agent-ui-preview-t: 5; }
  97%, 100% { --aia-agent-ui-preview-t: 0; }
}
@keyframes aia-agent-ui-preview-fade {
  0%, 92% { opacity: 1; }
  96%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-agent-ui-preview-shine {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}
@keyframes aia-agent-ui-preview-twirl {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-ui-preview,
  .aia-agent-ui-preview-head,
  .aia-agent-ui-preview-canvas {
    animation: none;
    --aia-agent-ui-preview-t: 5;
  }
  .aia-agent-ui-preview-badge svg,
  .aia-agent-ui-preview-swap > :first-child,
  .aia-agent-ui-preview-stats b::before { animation: none; }
}

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