AI CSS Animations

Agent Booking a Calendar Slot

A scheduling agent scans a week grid day by day past the busy blocks, lands on a free Thursday 11:00 slot, outlines and holds it, then the invite to Priya waits on a Confirm button.

Also known as: ai scheduling assistant, find a time animation, calendar booking agent.

1 hour with PriyaChecking calendarsHeld Thu 11:00
Invite to priya@northwind.io

HTML

<div class="aia-calendar-agent-booking" role="status" aria-label="Agent held Thursday 11:00, waiting for you to confirm">
  <div class="aia-calendar-agent-booking-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 9.5h16M8.5 3v4M15.5 3v4"/></svg><b>1 hour with Priya</b><span class="aia-calendar-agent-booking-roll"><span>Checking calendars</span><span>Held Thu 11:00</span></span></div>
  <div class="aia-calendar-agent-booking-week" aria-hidden="true">
    <div class="aia-calendar-agent-booking-hours"><span>9</span><span>10</span><span>11</span><span>12</span></div>
    <div class="aia-calendar-agent-booking-days">
      <div><b>Mon</b><i style="--y: 0; --h: 2"></i><i style="--y: 3; --h: 1"></i></div>
      <div><b>Tue</b><i style="--y: 1; --h: 1.5"></i><i style="--y: 3; --h: 1"></i></div>
      <div><b>Wed</b><i style="--y: 0.5; --h: 3"></i></div>
      <div><b>Thu</b><i style="--y: 0; --h: 1.5"></i><i style="--y: 3; --h: 1"></i><em class="aia-calendar-agent-booking-slot">Sync</em></div>
      <div><b>Fri</b><i style="--y: 1; --h: 2"></i></div>
      <span class="aia-calendar-agent-booking-scan"></span>
    </div>
  </div>
  <div class="aia-calendar-agent-booking-foot">
    <span>Invite to priya@northwind.io</span>
    <button type="button" class="aia-calendar-agent-booking-ok">Confirm</button>
  </div>
</div>

CSS

.aia-calendar-agent-booking {
  --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;
  --amber: color-mix(in srgb, #d97706 84%, currentColor);
  --row: 1.45em;
  width: 23em;
  padding: 0.7em 0.85em 0.65em;
  animation: aia-calendar-agent-booking-fade var(--d) linear infinite;
}
.aia-calendar-agent-booking-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8em;
}
.aia-calendar-agent-booking-head > svg {
  width: 1.15em;
  height: 1.15em;
  color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-calendar-agent-booking-roll {
  display: grid;
  height: 1.4em;
  margin-left: auto;
  overflow: hidden;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.92em;
  text-align: right;
}
.aia-calendar-agent-booking-roll span {
  grid-area: 1 / 1;
  line-height: 1.4em;
  animation: aia-calendar-agent-booking-out var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-calendar-agent-booking-roll span + span {
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 600;
  animation-name: aia-calendar-agent-booking-in;
}
.aia-calendar-agent-booking-week {
  display: flex;
  gap: 0.3em;
  margin: 0.5em 0 0.55em;
}
.aia-calendar-agent-booking-hours {
  display: grid;
  grid-auto-rows: var(--row);
  padding-top: 1.35em;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-align: right;
}
.aia-calendar-agent-booking-hours span {
  margin-top: -0.5em;
  font-size: 0.62em;
}
.aia-calendar-agent-booking-days {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.2em;
}
.aia-calendar-agent-booking-days div {
  position: relative;
  height: calc(var(--row) * 4 + 1.35em);
  background:
    repeating-linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 0 1px, transparent 1px var(--row)) 0 1.35em / 100% calc(100% - 1.35em) no-repeat;
}
.aia-calendar-agent-booking-days b {
  display: block;
  height: 1.35em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.66em;
  font-weight: 600;
  text-align: center;
}
.aia-calendar-agent-booking-days i {
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  top: calc(1.35em + var(--y) * var(--row) + 1px);
  height: calc(var(--h) * var(--row) - 2px);
  border-radius: 0.3em;
  background: color-mix(in srgb, currentColor 11%, transparent);
  box-shadow: inset 0.14em 0 0 color-mix(in srgb, currentColor 25%, transparent);
}
.aia-calendar-agent-booking-slot {
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  top: calc(1.35em + 2 * var(--row) + 1px);
  height: calc(var(--row) - 2px);
  display: grid;
  place-items: center;
  border-radius: 0.3em;
  color: #fff;
  font: normal 600 0.62em system-ui, sans-serif;
  animation: aia-calendar-agent-booking-slot var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-calendar-agent-booking-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(20% - 0.16em);
  border-radius: 0.4em;
  background: linear-gradient(color-mix(in srgb, var(--c) 0%, transparent), color-mix(in srgb, var(--c) 16%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  animation: aia-calendar-agent-booking-scan var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-calendar-agent-booking-foot {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.76em;
  animation: aia-calendar-agent-booking-foot var(--d) ease infinite;
}
.aia-calendar-agent-booking-foot span {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-right: auto;
  color: color-mix(in srgb, currentColor 62%, transparent);
}
.aia-calendar-agent-booking-foot span::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--amber);
  animation: aia-calendar-agent-booking-breathe 1.6s ease-in-out infinite;
}
.aia-calendar-agent-booking-ok {
  position: relative;
  padding: 0.45em 1em;
  border: 0;
  border-radius: 0.55em;
  background: var(--c);
  color: #fff;
  font: 600 1em system-ui, sans-serif;
  cursor: pointer;
}
.aia-calendar-agent-booking-ok:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-calendar-agent-booking-ok::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: aia-calendar-agent-booking-pulse 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes aia-calendar-agent-booking-scan {
  0%, 6% { transform: translateX(0); opacity: 1; }
  15%, 19% { transform: translateX(calc(100% + 0.2em)); }
  28%, 32% { transform: translateX(calc(200% + 0.4em)); }
  41%, 46% { transform: translateX(calc(300% + 0.6em)); opacity: 1; }
  52%, 100% { transform: translateX(calc(300% + 0.6em)); opacity: 0; }
}
@keyframes aia-calendar-agent-booking-slot {
  0%, 42% { opacity: 0; transform: scale(0.6); background: transparent; box-shadow: inset 0 0 0 0.12em var(--c); color: transparent; }
  47% { opacity: 1; transform: none; background: transparent; box-shadow: inset 0 0 0 0.12em var(--c); color: transparent; }
  52% { background: color-mix(in srgb, var(--c) 0%, transparent); box-shadow: inset 0 0 0 0.12em var(--c); }
  56%, 100% { opacity: 1; transform: none; background: var(--c); box-shadow: 0 0.3em 0.8em -0.3em color-mix(in srgb, var(--c) 80%, transparent); color: #fff; }
}
@keyframes aia-calendar-agent-booking-out {
  0%, 52% { opacity: 1; transform: none; }
  56%, 100% { opacity: 0; transform: translateY(-100%); }
}
@keyframes aia-calendar-agent-booking-in {
  0%, 53% { opacity: 0; transform: translateY(100%); }
  57%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-calendar-agent-booking-foot {
  0%, 56% { opacity: 0.35; }
  61%, 100% { opacity: 1; }
}
@keyframes aia-calendar-agent-booking-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-calendar-agent-booking-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes aia-calendar-agent-booking-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-calendar-agent-booking,
  .aia-calendar-agent-booking-roll span,
  .aia-calendar-agent-booking-slot,
  .aia-calendar-agent-booking-scan,
  .aia-calendar-agent-booking-foot {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.8);
  }
  .aia-calendar-agent-booking-ok::after,
  .aia-calendar-agent-booking-foot span::before { animation: none; }
}

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