AI CSS Animations

Git Commit Created

Three staged files stack up and collapse into a single commit node on the branch graph, then the short hash a3f9c2e types out beside the message and the change totals settle underneath.

Also known as: git commit animation, staged files to commit, ai commit message ui.

Staged changesCommitted feat/rate-limit
a3f9c2eAdd rate limiting to /login 3 files changed, 96 insertions, 3 deletions

HTML

<div class="aia-git-commit-created" role="status" aria-label="Creating a commit on feat/rate-limit">
  <div class="aia-git-commit-created-head">
    <span class="aia-git-commit-created-title"><span>Staged changes</span><span>Committed</span></span>
    <code><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5.5" r="2.2"/><circle cx="6" cy="18.5" r="2.2"/><circle cx="18" cy="8" r="2.2"/><path d="M6 7.7v8.6M18 10.2c0 4-4 4.5-10.4 6.8"/></svg>feat/rate-limit</code>
  </div>
  <div class="aia-git-commit-created-stage">
    <ul class="aia-git-commit-created-files" aria-hidden="true">
      <li><b>M</b><span>src/lib/auth.ts</span><em>+12 -3</em></li>
      <li><b>A</b><span>src/lib/limiter.ts</span><em>+48</em></li>
      <li><b>A</b><span>tests/limiter.test.ts</span><em>+36</em></li>
    </ul>
    <div class="aia-git-commit-created-commit">
      <span class="aia-git-commit-created-node" aria-hidden="true"></span>
      <span class="aia-git-commit-created-info">
        <span class="aia-git-commit-created-line"><code class="aia-git-commit-created-hash">a3f9c2e</code><b>Add rate limiting to /login</b></span>
        <span class="aia-git-commit-created-meta">3 files changed, <ins>96 insertions</ins>, <del>3 deletions</del></span>
      </span>
    </div>
  </div>
  <div class="aia-git-commit-created-prev" aria-hidden="true">
    <span class="aia-git-commit-created-dot"></span><code>9e1b07d</code><span>Bump vitest to 3.2.4</span>
  </div>
</div>

CSS

.aia-git-commit-created {
  --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);
  --row: 1.7em;
  width: 21em;
  padding: 0.75em 0.85em 0.7em;
}
.aia-git-commit-created-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
  font-size: 0.78em;
}
.aia-git-commit-created-title {
  display: grid;
  font-weight: 600;
}
.aia-git-commit-created-title > * { grid-area: 1 / 1; }
.aia-git-commit-created-title span:first-child { animation: aia-git-commit-created-a var(--d) ease infinite; }
.aia-git-commit-created-title span:last-child {
  color: var(--ok);
  animation: aia-git-commit-created-b var(--d) ease infinite;
}
.aia-git-commit-created-head code {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.5em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: color-mix(in srgb, currentColor 70%, transparent);
  font: 500 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-git-commit-created-head svg {
  width: 1em;
  height: 1em;
}
.aia-git-commit-created-stage {
  display: grid;
  height: calc(var(--row) * 3);
}
.aia-git-commit-created-stage > * { grid-area: 1 / 1; }
.aia-git-commit-created-files {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 0.75em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-git-commit-created-files li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: calc(var(--row) / 0.75);
  padding: 0 0.6em;
  border-radius: 0.45em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
  white-space: nowrap;
  animation: aia-git-commit-created-f1 var(--d) cubic-bezier(0.55, 0, 0.3, 1) infinite;
}
.aia-git-commit-created-files li > * {
  animation: aia-git-commit-created-empty var(--d) ease infinite;
}
.aia-git-commit-created-files li + li { margin-top: 0; }
.aia-git-commit-created-files li:nth-child(2) { animation-name: aia-git-commit-created-f2; }
.aia-git-commit-created-files li:nth-child(3) { animation-name: aia-git-commit-created-f3; }
.aia-git-commit-created-files b {
  width: 1em;
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  font-weight: 700;
}
.aia-git-commit-created-files li:first-child b { color: color-mix(in srgb, #d97706 84%, currentColor); }
.aia-git-commit-created-files span { margin-right: auto; }
.aia-git-commit-created-files em {
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-style: normal;
}
.aia-git-commit-created-commit {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding-left: 0.35em;
}
.aia-git-commit-created-node {
  position: relative;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.2em solid var(--c);
  background: color-mix(in srgb, var(--c) 25%, transparent);
  box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--c) 16%, transparent);
  animation: aia-git-commit-created-node var(--d) cubic-bezier(0.34, 1.6, 0.64, 1) infinite;
}
/* the graph line down to the previous commit */
.aia-git-commit-created-node::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.06em);
  top: calc(100% + 0.2em);
  width: 0.12em;
  height: 2.6em;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transform-origin: top;
  animation: aia-git-commit-created-edge var(--d) ease infinite;
}
.aia-git-commit-created-info {
  display: grid;
  gap: 0.3em;
  min-width: 0;
}
.aia-git-commit-created-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.aia-git-commit-created-hash {
  display: inline-block;
  overflow: hidden;
  padding: 0.12em 0;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font: 600 0.78em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  box-sizing: content-box;
  animation: aia-git-commit-created-hash var(--d) infinite;
}
.aia-git-commit-created-line b {
  font-size: 0.86em;
  font-weight: 600;
  animation: aia-git-commit-created-msg var(--d) ease infinite;
}
.aia-git-commit-created-meta {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.7em;
  animation: aia-git-commit-created-meta var(--d) ease infinite;
}
.aia-git-commit-created-meta ins {
  color: color-mix(in srgb, #16a34a 78%, currentColor);
  text-decoration: none;
}
.aia-git-commit-created-meta del {
  color: color-mix(in srgb, #dc2626 80%, currentColor);
  text-decoration: none;
}
.aia-git-commit-created-prev {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.55em;
  padding-left: 0.35em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-size: 0.74em;
  white-space: nowrap;
}
.aia-git-commit-created-dot {
  flex: none;
  width: 1.28em;
  height: 1.28em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.22em solid color-mix(in srgb, currentColor 30%, transparent);
  transform: scale(0.8);
}
.aia-git-commit-created-prev code { font: 500 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
@keyframes aia-git-commit-created-f1 {
  0%, 2% { opacity: 0; transform: translateX(-0.8em); }
  7%, 34% { opacity: 1; transform: none; }
  42% { opacity: 1; transform: translateY(calc(var(--row) / 0.75)) scale(0.92); }
  48%, 100% { opacity: 0; transform: translate(-6em, calc(var(--row) / 0.75)) scale(0.1); }
}
@keyframes aia-git-commit-created-f2 {
  0%, 6% { opacity: 0; transform: translateX(-0.8em); }
  11%, 34% { opacity: 1; transform: none; }
  42% { opacity: 1; transform: scale(0.96); }
  48%, 100% { opacity: 0; transform: translateX(-6em) scale(0.1); }
}
@keyframes aia-git-commit-created-f3 {
  0%, 10% { opacity: 0; transform: translateX(-0.8em); }
  15%, 34% { opacity: 1; transform: none; }
  42% { opacity: 1; transform: translateY(calc(var(--row) / -0.75)) scale(0.92); }
  48%, 100% { opacity: 0; transform: translate(-6em, calc(var(--row) / -0.75)) scale(0.1); }
}
@keyframes aia-git-commit-created-empty {
  0%, 33% { opacity: 1; }
  37%, 100% { opacity: 0; }
}
@keyframes aia-git-commit-created-node {
  0%, 46% { opacity: 0; transform: scale(0); }
  52%, 94% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes aia-git-commit-created-edge {
  0%, 50% { transform: scaleY(0); }
  58%, 100% { transform: scaleY(1); }
}
@keyframes aia-git-commit-created-hash {
  0%, 52% { width: 0; padding-inline: 0; opacity: 1; animation-timing-function: steps(7, end); }
  53% { width: 0; padding-inline: 0.4em; opacity: 1; animation-timing-function: steps(7, end); }
  63%, 94% { width: 7ch; padding-inline: 0.4em; opacity: 1; }
  97%, 100% { width: 7ch; padding-inline: 0.4em; opacity: 0; }
}
@keyframes aia-git-commit-created-msg {
  0%, 60% { opacity: 0; transform: translateX(-0.4em); }
  68%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes aia-git-commit-created-meta {
  0%, 66% { opacity: 0; transform: translateY(0.4em); }
  74%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; }
}
@keyframes aia-git-commit-created-a {
  0%, 46%, 98%, 100% { opacity: 1; }
  50%, 96% { opacity: 0; }
}
@keyframes aia-git-commit-created-b {
  0%, 48%, 96%, 100% { opacity: 0; }
  52%, 94% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-git-commit-created *,
  .aia-git-commit-created *::after {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.8);
  }
}

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