AI CSS Animations

Live Meeting Notetaker

A meeting notetaker mid call: a red recording dot pulses by the timer, speaker lines transcribe in with a ring on whoever is talking, and action items lift out of the transcript into a list.

Also known as: ai meeting notes, meeting transcript action items, ai notetaker recording.

RecordingLaunch sync

Action items

QA sign off, Thu Dan

Book the review Priya

HTML

<div class="aia-meeting-notetaker-live" role="status" aria-label="Recording the meeting and extracting action items">
  <div class="aia-meeting-notetaker-live-head"><span class="aia-meeting-notetaker-live-rec" aria-hidden="true"></span><b>Recording</b><span class="aia-meeting-notetaker-live-time" aria-hidden="true"></span><em>Launch sync</em></div>
  <div class="aia-meeting-notetaker-live-body">
    <ol class="aia-meeting-notetaker-live-lines" aria-hidden="true">
      <li style="--k: 0"><i>P</i><p><b>Priya</b>Can we ship the limiter by Friday?</p></li>
      <li style="--k: 1"><i>D</i><p><b>Dan</b>Yes, if <mark style="--x: 1.5">QA signs off Thursday</mark>.</p></li>
      <li style="--k: 2"><i>P</i><p><b>Priya</b>Great, <mark style="--x: 2.5">I'll book the review</mark>.</p></li>
    </ol>
    <div class="aia-meeting-notetaker-live-items">
      <p class="aia-meeting-notetaker-live-cap"><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>Action items</p>
      <p class="aia-meeting-notetaker-live-item" style="--x: 1.5"><span></span>QA sign off, Thu <b>Dan</b></p>
      <p class="aia-meeting-notetaker-live-item" style="--x: 2.5"><span></span>Book the review <b>Priya</b></p>
    </div>
  </div>
</div>

CSS

@property --aia-meeting-notetaker-live-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-meeting-notetaker-live-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 31;
}
.aia-meeting-notetaker-live {
  --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-meeting-notetaker-live-t);
  --rec: #ef4444;
  width: 25em;
  padding: 0.7em 0.85em 0.8em;
  animation:
    aia-meeting-notetaker-live-clock var(--d) linear infinite,
    aia-meeting-notetaker-live-fade var(--d) linear infinite;
}
.aia-meeting-notetaker-live-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.78em;
}
.aia-meeting-notetaker-live-head b { color: color-mix(in srgb, #dc2626 80%, currentColor); }
.aia-meeting-notetaker-live-head em {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-style: normal;
}
.aia-meeting-notetaker-live-rec {
  position: relative;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--rec);
}
.aia-meeting-notetaker-live-rec::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rec);
  animation: aia-meeting-notetaker-live-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.aia-meeting-notetaker-live-time {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 500 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  counter-reset: s var(--aia-meeting-notetaker-live-s);
  animation: aia-meeting-notetaker-live-tick var(--d) steps(9, end) infinite;
}
.aia-meeting-notetaker-live-time::before { content: "12:" counter(s); }
.aia-meeting-notetaker-live-body {
  display: grid;
  grid-template-columns: 1fr 9.8em;
  gap: 0.7em;
  margin-top: 0.6em;
}
.aia-meeting-notetaker-live-lines {
  display: grid;
  align-content: start;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aia-meeting-notetaker-live-lines li {
  --a: clamp(0, (var(--t) - var(--k)) * 3, 1);
  --talk: clamp(0, min(var(--t) - var(--k), var(--k) + 1 - var(--t)) * 8, 1);
  display: flex;
  gap: 0.45em;
  opacity: var(--a);
}
.aia-meeting-notetaker-live-lines i {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  font: normal 700 0.72em system-ui, sans-serif;
  box-shadow: 0 0 0 calc(var(--talk) * 0.22em) color-mix(in srgb, #0ea5e9 40%, transparent);
}
.aia-meeting-notetaker-live-lines li:nth-child(2) i {
  background: #a855f7;
  box-shadow: 0 0 0 calc(var(--talk) * 0.22em) color-mix(in srgb, #a855f7 40%, transparent);
}
.aia-meeting-notetaker-live-lines p {
  margin: 0;
  font-size: 0.76em;
  line-height: 1.4;
  -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 0 0 / 220% 100% no-repeat;
  mask: linear-gradient(90deg, #000 45%, transparent 55%) 0 0 / 220% 100% no-repeat;
  -webkit-mask-position: calc((1 - var(--a)) * 100%) 0;
  mask-position: calc((1 - var(--a)) * 100%) 0;
}
.aia-meeting-notetaker-live-lines b {
  display: block;
  font-size: 0.9em;
}
.aia-meeting-notetaker-live-lines mark {
  --fl: clamp(0, min(var(--t) - var(--x) + 0.2, var(--x) + 1.2 - var(--t)) * 4, 1);
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) calc(var(--fl) * 24%), transparent);
  box-shadow: 0 0.1em 0 color-mix(in srgb, var(--c) calc(var(--fl) * 80%), transparent);
  color: inherit;
}
.aia-meeting-notetaker-live-items {
  align-self: start;
  padding: 0.45em 0.55em 0.5em;
  border-radius: 0.65em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.aia-meeting-notetaker-live-cap {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 0.3em;
  color: color-mix(in srgb, var(--c) 78%, currentColor);
  font-size: 0.7em;
  font-weight: 650;
}
.aia-meeting-notetaker-live-cap svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  stroke: none;
}
.aia-meeting-notetaker-live-item {
  --a: clamp(0, (var(--t) - var(--x)) * 3, 1);
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: calc(var(--a) * 1.75em);
  margin: 0;
  overflow: hidden;
  font-size: 0.7em;
  white-space: nowrap;
  opacity: var(--a);
  filter: blur(calc((1 - var(--a)) * 0.15em));
  transform: translateX(calc((1 - var(--a)) * -1.2em));
}
.aia-meeting-notetaker-live-item span {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 0.12em color-mix(in srgb, currentColor 35%, transparent);
}
.aia-meeting-notetaker-live-item b {
  margin-left: auto;
  padding: 0.05em 0.4em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.9em;
  font-weight: 600;
}
@keyframes aia-meeting-notetaker-live-clock {
  0% { --aia-meeting-notetaker-live-t: 0; }
  20% { --aia-meeting-notetaker-live-t: 1; }
  42% { --aia-meeting-notetaker-live-t: 2; }
  64% { --aia-meeting-notetaker-live-t: 3; }
  97% { --aia-meeting-notetaker-live-t: 4.2; }
  98%, 100% { --aia-meeting-notetaker-live-t: 0; }
}
@keyframes aia-meeting-notetaker-live-tick {
  from { --aia-meeting-notetaker-live-s: 31; }
  to { --aia-meeting-notetaker-live-s: 40; }
}
@keyframes aia-meeting-notetaker-live-ping {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes aia-meeting-notetaker-live-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-meeting-notetaker-live,
  .aia-meeting-notetaker-live-time {
    animation: none;
    --aia-meeting-notetaker-live-t: 4.2;
  }
  .aia-meeting-notetaker-live-rec::after { animation: none; }
}

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

Voice Orb Listening to Speaking
Siri Style Edge Glow
Dictation Composer Waveform
Live Voice Waveform Bars