AI CSS Animations

AI Email Draft Ready for Review

An agent fills in a new email: the recipient and subject wipe in, the body streams line by line, then the footer flips from Drafting to Waiting for you as the Review and send button lights up.

Also known as: ai drafted email, email agent draft, review before sending ui.

New messageDrafted by Claude

ToPriya Shah <priya@northwind.io>

SubjectLogin rate limits ship Thursday

Hi Priya,

Per-IP limits on /login go live Thursday, 10:00 UTC.

Anything over 20 requests a minute will get a 429.

DraftingWaiting for you

HTML

<div class="aia-email-draft-ready" role="status" aria-label="Email drafted, waiting for you to review and send">
  <div class="aia-email-draft-ready-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="3.5" y="5.5" width="17" height="13" rx="2"/><path d="m4 7 8 6 8-6"/></svg><b>New message</b><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="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>Drafted by Claude</span></div>
  <p class="aia-email-draft-ready-field"><span>To</span><b>Priya Shah &lt;priya@northwind.io&gt;</b></p>
  <p class="aia-email-draft-ready-field"><span>Subject</span><b class="aia-email-draft-ready-subj">Login rate limits ship Thursday</b></p>
  <div class="aia-email-draft-ready-body">
    <p>Hi Priya,</p>
    <p>Per-IP limits on /login go live Thursday, 10:00 UTC.</p>
    <p>Anything over 20 requests a minute will get a 429.</p>
  </div>
  <div class="aia-email-draft-ready-foot">
    <span class="aia-email-draft-ready-state"><span class="aia-email-draft-ready-busy">Drafting</span><span class="aia-email-draft-ready-wait">Waiting for you</span></span>
    <button type="button" class="aia-email-draft-ready-send">Review and send</button>
  </div>
</div>

CSS

.aia-email-draft-ready {
  --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);
  width: 24em;
  padding: 0;
  overflow: hidden;
  animation: aia-email-draft-ready-fade var(--d) linear infinite;
}
.aia-email-draft-ready-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 0.85em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  font-size: 0.8em;
}
.aia-email-draft-ready-head > svg {
  width: 1.15em;
  height: 1.15em;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.aia-email-draft-ready-head b {
  margin-right: auto;
}
.aia-email-draft-ready-head span {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: color-mix(in srgb, var(--c) 78%, currentColor);
  font-size: 0.9em;
  font-weight: 600;
}
.aia-email-draft-ready-head span svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
}
.aia-email-draft-ready-field {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.1em;
  margin: 0 0.85em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
  font-size: 0.8em;
  white-space: nowrap;
}
.aia-email-draft-ready-field span {
  width: 3.6em;
  color: color-mix(in srgb, currentColor 50%, transparent);
}
.aia-email-draft-ready-field b,
.aia-email-draft-ready-body p {
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  animation: aia-email-draft-ready-w1 var(--d) linear infinite;
}
.aia-email-draft-ready-field b { font-weight: 500; }
.aia-email-draft-ready-subj { animation-name: aia-email-draft-ready-w2; }
.aia-email-draft-ready-body {
  padding: 0.5em 0.85em 0.4em 4.3em;
  font-size: 0.8em;
  line-height: 1.6;
}
.aia-email-draft-ready-body p {
  margin: 0;
  white-space: nowrap;
  animation-name: aia-email-draft-ready-w3;
}
.aia-email-draft-ready-body p:nth-child(2) { animation-name: aia-email-draft-ready-w4; }
.aia-email-draft-ready-body p:nth-child(3) { animation-name: aia-email-draft-ready-w5; }
.aia-email-draft-ready-foot {
  display: flex;
  align-items: center;
  padding: 0.5em 0.65em 0.6em 0.85em;
}
.aia-email-draft-ready-state {
  display: grid;
  font-size: 0.76em;
  font-weight: 600;
}
.aia-email-draft-ready-state > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.aia-email-draft-ready-busy {
  color: color-mix(in srgb, currentColor 55%, transparent);
  animation: aia-email-draft-ready-out var(--d) ease infinite;
}
.aia-email-draft-ready-busy::before,
.aia-email-draft-ready-wait::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--c);
  animation: aia-email-draft-ready-breathe 1.2s ease-in-out infinite;
}
.aia-email-draft-ready-wait {
  color: var(--amber);
  animation: aia-email-draft-ready-in var(--d) ease infinite;
}
.aia-email-draft-ready-wait::before { background: var(--amber); }
.aia-email-draft-ready-send {
  position: relative;
  margin-left: auto;
  padding: 0.5em 0.95em;
  border: 0;
  border-radius: 0.55em;
  font: 600 0.8em system-ui, sans-serif;
  cursor: pointer;
  animation: aia-email-draft-ready-arm var(--d) ease infinite;
}
.aia-email-draft-ready-send:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-email-draft-ready-send::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: aia-email-draft-ready-pulse 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes aia-email-draft-ready-w1 {
  0%, 2% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  9%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-email-draft-ready-w2 {
  0%, 10% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  17%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-email-draft-ready-w3 {
  0%, 19% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  22%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-email-draft-ready-w4 {
  0%, 24% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  36%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-email-draft-ready-w5 {
  0%, 38% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  50%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-email-draft-ready-out {
  0%, 52% { opacity: 1; transform: none; }
  56%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-email-draft-ready-in {
  0%, 53% { opacity: 0; transform: translateY(0.5em); }
  57%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-email-draft-ready-arm {
  0%, 52% { background: color-mix(in srgb, currentColor 10%, transparent); color: color-mix(in srgb, currentColor 45%, transparent); box-shadow: none; }
  56%, 100% { background: var(--c); color: #fff; box-shadow: 0 0.3em 0.8em -0.3em color-mix(in srgb, var(--c) 70%, transparent); }
}
@keyframes aia-email-draft-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
  1% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
  70% { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-email-draft-ready-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes aia-email-draft-ready-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-email-draft-ready,
  .aia-email-draft-ready-field b,
  .aia-email-draft-ready-body p,
  .aia-email-draft-ready-busy,
  .aia-email-draft-ready-wait,
  .aia-email-draft-ready-send {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.85);
  }
  .aia-email-draft-ready-send::after,
  .aia-email-draft-ready-wait::before { animation: none; }
}

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