AI CSS Animations

Agent Push Notification

A phone lock screen where a push banner springs down from the top: Your agent finished, PR #482 is ready for review. It nudges like a haptic tap, opens to show its actions, then slides away.

Also known as: ios push notification animation, phone notification banner, agent finished notification.

AGENTSnow Your agent finished PR #482 is ready for review

HTML

<div class="aia-agent-push-notification" role="status" aria-label="Your agent finished: PR #482 is ready for review">
  <div class="aia-agent-push-notification-phone">
    <div class="aia-agent-push-notification-bar" aria-hidden="true"><span>9:41</span><i></i><span class="aia-agent-push-notification-sig"><b></b><b></b><b></b><em></em></span></div>
    <div class="aia-agent-push-notification-lock" aria-hidden="true"><span>Thursday, October 29</span><b>9:41</b></div>
    <div class="aia-agent-push-notification-note">
      <span class="aia-agent-push-notification-app" 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="m5 7 4.5 5L5 17M12 17.5h7"/></svg></span>
      <span class="aia-agent-push-notification-body">
        <span class="aia-agent-push-notification-top"><span>AGENTS</span><span>now</span></span>
        <b>Your agent finished</b>
        <span>PR #482 is ready for review</span>
      </span>
      <span class="aia-agent-push-notification-acts" aria-hidden="true"><span>View PR</span><span>Later</span></span>
    </div>
  </div>
</div>

CSS

.aia-agent-push-notification {
  --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;
  --d: 7.5s;
  position: relative;
  width: 17.5em;
  height: 13em;
  -webkit-mask: linear-gradient(#000 72%, transparent 98%);
  mask: linear-gradient(#000 72%, transparent 98%);
}
.aia-agent-push-notification-phone {
  position: absolute;
  inset: 0.4em 0.4em -2em;
  overflow: hidden;
  border-radius: 2.3em;
  background:
    radial-gradient(120% 70% at 20% 0%, color-mix(in srgb, var(--c) 75%, #fff) 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--c) 60%, #0ea5e9) 0%, transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--c) 55%, #000), color-mix(in srgb, var(--c) 20%, #050508));
  box-shadow: 0 0 0 0.38em #18181b, 0 0 0 0.45em color-mix(in srgb, currentColor 18%, transparent), 0 1.5em 2.5em -1em rgb(0 0 0 / 0.5);
  color: #fff;
}
.aia-agent-push-notification-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2em;
  padding: 0 1.45em;
  font-size: 0.72em;
  font-weight: 600;
}
.aia-agent-push-notification-bar i {
  position: absolute;
  left: calc(50% - 2.6em);
  top: 0.55em;
  width: 5.2em;
  height: 1.45em;
  border-radius: 1em;
  background: #000;
}
.aia-agent-push-notification-sig {
  display: flex;
  align-items: flex-end;
  gap: 0.12em;
  height: 0.75em;
}
.aia-agent-push-notification-sig b {
  width: 0.22em;
  height: 45%;
  border-radius: 0.1em;
  background: #fff;
}
.aia-agent-push-notification-sig b:nth-child(2) { height: 70%; }
.aia-agent-push-notification-sig b:nth-child(3) { height: 100%; }
.aia-agent-push-notification-sig em {
  width: 1.5em;
  height: 0.75em;
  margin-left: 0.35em;
  box-sizing: border-box;
  border-radius: 0.25em;
  border: 0.1em solid rgb(255 255 255 / 0.6);
  background: linear-gradient(90deg, #fff 70%, transparent 70%) 0.08em 50% / calc(100% - 0.16em) calc(100% - 0.16em) no-repeat;
}
.aia-agent-push-notification-lock {
  display: grid;
  justify-items: center;
  margin-top: 0.45em;
  text-shadow: 0 0.05em 0.4em rgb(0 0 0 / 0.25);
  animation: aia-agent-push-notification-dim var(--d) ease infinite;
}
.aia-agent-push-notification-lock span {
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.85;
}
.aia-agent-push-notification-lock b {
  font-size: 3.4em;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.aia-agent-push-notification-note {
  position: absolute;
  left: 0.55em;
  right: 0.55em;
  top: 2.35em;
  display: grid;
  grid-template-columns: 2.1em 1fr;
  column-gap: 0.6em;
  align-items: center;
  padding: 0.65em 0.7em;
  border-radius: 1.15em;
  background: rgb(250 250 252 / 0.78);
  -webkit-backdrop-filter: blur(1.2em) saturate(1.6);
  backdrop-filter: blur(1.2em) saturate(1.6);
  box-shadow: 0 0.6em 1.5em -0.5em rgb(0 0 0 / 0.4);
  color: #111114;
  animation: aia-agent-push-notification-in var(--d) cubic-bezier(0.34, 1.35, 0.64, 1) infinite;
}
.aia-agent-push-notification-app {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.55em;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
  color: #fff;
}
.aia-agent-push-notification-app svg {
  width: 1.2em;
  height: 1.2em;
  stroke-width: 2.4;
}
.aia-agent-push-notification-body {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
.aia-agent-push-notification-top {
  display: flex;
  justify-content: space-between;
  color: rgb(17 17 20 / 0.55);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.aia-agent-push-notification-body b {
  font-size: 0.8em;
}
.aia-agent-push-notification-body > span:last-child {
  overflow: hidden;
  font-size: 0.76em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aia-agent-push-notification-acts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4em;
  overflow: hidden;
  animation: aia-agent-push-notification-acts var(--d) cubic-bezier(0.3, 1.2, 0.5, 1) infinite;
}
.aia-agent-push-notification-acts span {
  display: grid;
  place-items: center;
  height: 2.3em;
  border-radius: 0.7em;
  background: rgb(17 17 20 / 0.07);
  font-size: 0.72em;
  font-weight: 600;
}
.aia-agent-push-notification-acts span:first-child { color: color-mix(in srgb, var(--c) 80%, #000); }
@keyframes aia-agent-push-notification-in {
  0%, 8% { opacity: 0; transform: translateY(-5em) scale(0.94); }
  16% { opacity: 1; transform: none; }
  19% { transform: translateX(-0.25em); }
  21% { transform: translateX(0.2em); }
  23%, 84% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-5em) scale(0.94); animation-timing-function: ease-in; }
}
@keyframes aia-agent-push-notification-acts {
  0%, 44% { height: 0; margin-top: 0; opacity: 0; }
  52%, 84% { height: 1.65em; margin-top: 0.6em; opacity: 1; }
  92%, 100% { height: 0; margin-top: 0; opacity: 0; }
}
@keyframes aia-agent-push-notification-dim {
  0%, 10%, 90%, 100% { opacity: 1; filter: none; }
  18%, 84% { opacity: 0.55; filter: blur(0.1em); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-push-notification-note,
  .aia-agent-push-notification-acts,
  .aia-agent-push-notification-lock {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.6);
  }
}

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