AI CSS Animations

Post Edit Hook Check

Right after an edit lands, a PostToolUse hook opens beneath it: eslint --fix runs, prints that it fixed 2 problems and found 0 errors, the badge flips to Passed in 0.4s and the agent moves on.

Also known as: claude code hooks, posttooluse hook, lint after edit hook.

Editsrc/routes/login.ts
PostToolUse Running hook Passed in 0.4s

HTML

<div class="aia-hook-fired-check" role="status" aria-label="PostToolUse hook ran eslint and passed">
  <div class="aia-hook-fired-check-edit"><span class="aia-hook-fired-check-ok" 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.5 12.5 4 4 9-9.5"/></svg></span><b>Edit</b><code>src/routes/login.ts</code><span class="aia-hook-fired-check-diff" aria-hidden="true"><i>+8</i><i>-2</i></span></div>
  <div class="aia-hook-fired-check-hook">
    <div class="aia-hook-fired-check-head">
      <span class="aia-hook-fired-check-bolt" 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="M13 3 5.5 13.5H11L10 21l7.5-10.5H12z"/></svg></span>
      <code>PostToolUse</code>
      <span class="aia-hook-fired-check-state">
        <span class="aia-hook-fired-check-busy">Running hook</span>
        <span class="aia-hook-fired-check-pass"><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.5 12.5 4 4 9-9.5"/></svg>Passed in 0.4s</span>
      </span>
    </div>
    <div class="aia-hook-fired-check-log" aria-hidden="true">
      <p><i>$</i> eslint --fix src/routes/login.ts</p>
      <p>fixed 2 problems: prefer-const, eqeqeq</p>
      <p>0 errors, 0 warnings</p>
    </div>
  </div>
  <div class="aia-hook-fired-check-next" aria-hidden="true"><span class="aia-hook-fired-check-spin"></span><b>Read</b><code>src/routes/login.test.ts</code></div>
</div>

CSS

.aia-hook-fired-check {
  --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: 8s;
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  width: 22em;
  padding: 0.75em 0.9em;
  animation: aia-hook-fired-check-fade var(--d) linear infinite;
}
.aia-hook-fired-check-edit,
.aia-hook-fired-check-next {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 1.6em;
}
.aia-hook-fired-check-edit b,
.aia-hook-fired-check-next b {
  font-size: 0.82em;
}
.aia-hook-fired-check-edit code,
.aia-hook-fired-check-next code {
  color: color-mix(in srgb, currentColor 58%, transparent);
  font: 0.76em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.aia-hook-fired-check-ok {
  display: grid;
  width: 1em;
  height: 1em;
  color: var(--ok);
}
.aia-hook-fired-check-ok svg { stroke-width: 3; }
.aia-hook-fired-check-diff {
  display: flex;
  gap: 0.4em;
  margin-left: auto;
  font: 600 0.74em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-hook-fired-check-diff i { font-style: normal; color: var(--ok); }
.aia-hook-fired-check-diff i + i { color: color-mix(in srgb, #dc2626 80%, currentColor); }
.aia-hook-fired-check-hook {
  box-sizing: border-box;
  margin-left: 0.48em;
  padding-left: 0.95em;
  overflow: hidden;
  border-left: 0.09em solid color-mix(in srgb, currentColor 16%, transparent);
  animation: aia-hook-fired-check-open var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-hook-fired-check-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 1.7em;
}
.aia-hook-fired-check-bolt {
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-hook-fired-check-bolt svg {
  width: 0.85em;
  height: 0.85em;
  fill: currentColor;
}
.aia-hook-fired-check-head code {
  font: 600 0.76em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-hook-fired-check-state {
  display: grid;
  margin-left: auto;
  font-size: 0.74em;
  font-weight: 600;
}
.aia-hook-fired-check-state > * {
  grid-area: 1 / 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}
.aia-hook-fired-check-busy {
  color: color-mix(in srgb, currentColor 55%, transparent);
  animation: aia-hook-fired-check-busy var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-hook-fired-check-busy::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 0.14em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-hook-fired-check-spin 0.8s linear infinite;
}
.aia-hook-fired-check-pass {
  color: var(--ok);
  animation: aia-hook-fired-check-pass var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-hook-fired-check-pass svg {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 3;
}
.aia-hook-fired-check-log {
  margin: 0.15em 0 0.35em;
  padding: 0.4em 0.65em;
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
  font: 0.72em / 1.6 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-hook-fired-check-log p {
  margin: 0;
  color: color-mix(in srgb, currentColor 62%, transparent);
  white-space: nowrap;
  -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-hook-fired-check-l1 var(--d) linear infinite;
}
.aia-hook-fired-check-log p:first-child { color: currentColor; }
.aia-hook-fired-check-log i {
  color: color-mix(in srgb, var(--c) 75%, currentColor);
  font-style: normal;
}
.aia-hook-fired-check-log p:nth-child(2) { animation-name: aia-hook-fired-check-l2; }
.aia-hook-fired-check-log p:nth-child(3) {
  color: var(--ok);
  animation-name: aia-hook-fired-check-l3;
}
.aia-hook-fired-check-next {
  animation: aia-hook-fired-check-next var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-hook-fired-check-spin {
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.025em;
  border-radius: 50%;
  border: 0.12em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-hook-fired-check-spin 0.8s linear infinite;
}
@keyframes aia-hook-fired-check-open {
  0%, 6% { max-height: 0; opacity: 0; border-left-color: color-mix(in srgb, currentColor 16%, transparent); }
  13% { max-height: 7em; opacity: 1; }
  52% { border-left-color: color-mix(in srgb, currentColor 16%, transparent); }
  56%, 100% { max-height: 7em; opacity: 1; border-left-color: color-mix(in srgb, #16a34a 60%, transparent); }
}
@keyframes aia-hook-fired-check-l1 {
  0%, 12% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  22%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-hook-fired-check-l2 {
  0%, 33% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  40%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-hook-fired-check-l3 {
  0%, 45% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  50%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes aia-hook-fired-check-busy {
  0%, 51% { opacity: 1; transform: none; }
  55%, 100% { opacity: 0; transform: translateY(-0.5em); }
}
@keyframes aia-hook-fired-check-pass {
  0%, 52% { opacity: 0; transform: scale(0.6); }
  57%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-hook-fired-check-next {
  0%, 62% { opacity: 0; transform: translateY(0.5em); }
  67%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-hook-fired-check-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-hook-fired-check-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-hook-fired-check,
  .aia-hook-fired-check-hook,
  .aia-hook-fired-check-log p,
  .aia-hook-fired-check-busy,
  .aia-hook-fired-check-pass,
  .aia-hook-fired-check-next {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.85);
  }
  .aia-hook-fired-check-spin,
  .aia-hook-fired-check-busy::before { animation: none; }
}

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