AI CSS Animations

Destructive Command Guard

A scan passes over rm -rf dist/ node_modules/, then an amber hazard stripe drops in, each risky token gets a wavy underline, the size counts up to 612 MB and the card waits on Cancel or Run anyway.

Also known as: dangerous command warning, rm -rf confirmation, confirm destructive action ui.

Checking command Destructive command
$ rm -rf dist/ node_modules/

Running a safety check before it runs Deletes 48,213 files () for good

HTML

<div class="aia-destructive-command-guard" role="status" aria-label="Destructive command, waiting for your confirmation">
  <span class="aia-destructive-command-guard-stripe" aria-hidden="true"></span>
  <div class="aia-destructive-command-guard-head">
    <span class="aia-destructive-command-guard-icon" 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="M10.3 4.3 2.8 17.4a2 2 0 0 0 1.7 3h15a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z"/><path d="M12 9.5v4M12 16.8v.1"/></svg></span>
    <span class="aia-destructive-command-guard-title">
      <span class="aia-destructive-command-guard-scan">Checking command</span>
      <span class="aia-destructive-command-guard-flag">Destructive command</span>
    </span>
    <span class="aia-destructive-command-guard-wait" aria-hidden="true"><i></i>Waiting on you</span>
  </div>
  <code class="aia-destructive-command-guard-cmd"><span>$</span> <b>rm -rf</b> <b>dist/</b> <b>node_modules/</b></code>
  <p class="aia-destructive-command-guard-impact">
    <span class="aia-destructive-command-guard-check">Running a safety check before it runs</span>
    <span class="aia-destructive-command-guard-risk">Deletes 48,213 files (<span class="aia-destructive-command-guard-mb" aria-hidden="true"></span>) for good</span>
  </p>
  <div class="aia-destructive-command-guard-actions">
    <button type="button" class="aia-destructive-command-guard-cancel">Cancel</button>
    <button type="button" class="aia-destructive-command-guard-run">Run anyway</button>
  </div>
</div>

CSS

@property --aia-destructive-command-guard-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-destructive-command-guard-mb {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-destructive-command-guard {
  --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;
  --t: var(--aia-destructive-command-guard-t);
  --f: clamp(0, (var(--t) - 1) * 4, 1);
  --a: clamp(0, (var(--t) - 2.9) * 4, 1);
  width: 21.5em;
  padding: 1.1em 1em 0.85em;
  overflow: hidden;
  animation: aia-destructive-command-guard-clock var(--d) cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.aia-destructive-command-guard-stripe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.38em;
  background: repeating-linear-gradient(-45deg, #f59e0b 0 0.45em, #292524 0.45em 0.9em);
  background-size: 1.273em 100%;
  opacity: var(--f);
  transform: scaleY(var(--f));
  transform-origin: top;
  animation: aia-destructive-command-guard-march 1.1s linear infinite;
}
.aia-destructive-command-guard-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.aia-destructive-command-guard-icon {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 0.55em;
  background: color-mix(in srgb, #d97706 calc(var(--f) * 16%), color-mix(in srgb, currentColor 6%, transparent));
  color: color-mix(in srgb, #d97706 calc(var(--f) * 84%), color-mix(in srgb, currentColor 45%, transparent));
}
.aia-destructive-command-guard-icon svg {
  width: 1.1em;
  height: 1.1em;
  transform: scale(calc(1 + var(--f) * (1 - var(--f)) * 0.8));
}
.aia-destructive-command-guard-title {
  display: grid;
  margin-right: auto;
  font-size: 0.9em;
  font-weight: 600;
}
.aia-destructive-command-guard-title > * { grid-area: 1 / 1; }
.aia-destructive-command-guard-scan {
  color: color-mix(in srgb, currentColor 55%, transparent);
  opacity: calc(1 - clamp(0, var(--f) * 2, 1));
  transform: translateY(calc(var(--f) * -0.5em));
}
.aia-destructive-command-guard-flag {
  color: color-mix(in srgb, #d97706 84%, currentColor);
  opacity: clamp(0, (var(--f) - 0.45) * 2, 1);
  transform: translateY(calc((1 - var(--f)) * 0.5em));
}
.aia-destructive-command-guard-wait {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: color-mix(in srgb, #d97706 84%, currentColor);
  font-size: 0.72em;
  font-weight: 600;
  opacity: var(--a);
}
.aia-destructive-command-guard-wait i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: aia-destructive-command-guard-breathe 1.6s ease-in-out infinite;
}
.aia-destructive-command-guard-cmd {
  position: relative;
  display: block;
  overflow: hidden;
  margin-top: 0.7em;
  padding: 0.6em 0.75em;
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 calc(var(--f) * 45%), color-mix(in srgb, currentColor 8%, transparent));
  font: 0.84em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.aia-destructive-command-guard-cmd span { color: color-mix(in srgb, currentColor 40%, transparent); }
.aia-destructive-command-guard-cmd b {
  --i: 0;
  --k: clamp(0, (var(--t) - 1.15 - var(--i) * 0.22) * 4, 1);
  padding: 0.05em 0.1em;
  border-radius: 0.25em;
  background: color-mix(in srgb, #d97706 calc(var(--k) * 15%), transparent);
  color: color-mix(in srgb, #d97706 calc(var(--k) * 70%), currentColor);
  font-weight: calc(400 + var(--k) * 200);
  text-decoration: underline wavy color-mix(in srgb, #d97706 calc(var(--k) * 100%), transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.3em;
}
.aia-destructive-command-guard-cmd b:nth-of-type(2) { --i: 1; }
.aia-destructive-command-guard-cmd b:nth-of-type(3) { --i: 2; }
.aia-destructive-command-guard-cmd::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, transparent), transparent);
  opacity: clamp(0, min(var(--t), 1 - var(--t)) * 12, 1);
  transform: translateX(calc(clamp(0, var(--t), 1) * 560% - 100%));
}
.aia-destructive-command-guard-impact {
  display: grid;
  margin: 0.55em 0 0;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.78em;
}
.aia-destructive-command-guard-impact > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.aia-destructive-command-guard-check {
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 45%, transparent) 35%, currentColor 50%, color-mix(in srgb, currentColor 45%, transparent) 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: calc(1 - clamp(0, (var(--t) - 1.5) * 3, 1));
  animation: aia-destructive-command-guard-shine 1.6s linear infinite;
}
.aia-destructive-command-guard-risk {
  opacity: clamp(0, (var(--t) - 1.9) * 3, 1);
  transform: translateY(calc((1 - clamp(0, (var(--t) - 1.9) * 3, 1)) * 0.4em));
}
.aia-destructive-command-guard-mb {
  color: currentColor;
  font-variant-numeric: tabular-nums;
  --aia-destructive-command-guard-mb: calc(clamp(0, var(--t) - 1.95, 0.95) / 0.95 * 612);
  counter-reset: mb var(--aia-destructive-command-guard-mb);
}
.aia-destructive-command-guard-mb::before { content: counter(mb) " MB"; }
.aia-destructive-command-guard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 0.75em;
  opacity: var(--a);
  transform: translateY(calc((1 - var(--a)) * 0.5em));
}
.aia-destructive-command-guard-actions button {
  position: relative;
  padding: 0.5em 0.95em;
  border: 0;
  border-radius: 0.55em;
  font: 600 0.8em system-ui, sans-serif;
  cursor: pointer;
}
.aia-destructive-command-guard-actions button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-destructive-command-guard-cancel {
  background: var(--c);
  color: #fff;
  animation: aia-destructive-command-guard-pulse 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.aia-destructive-command-guard-run {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc2626 45%, transparent);
  color: color-mix(in srgb, #dc2626 80%, currentColor);
}
.aia-destructive-command-guard-cmd,
.aia-destructive-command-guard-head,
.aia-destructive-command-guard-actions > * {
  animation: aia-destructive-command-guard-fade var(--d) linear infinite;
}
.aia-destructive-command-guard-actions > .aia-destructive-command-guard-cancel {
  animation:
    aia-destructive-command-guard-fade var(--d) linear infinite,
    aia-destructive-command-guard-pulse 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes aia-destructive-command-guard-clock {
  0%, 5% { --aia-destructive-command-guard-t: 0; }
  22% { --aia-destructive-command-guard-t: 1; }
  36% { --aia-destructive-command-guard-t: 2; }
  52% { --aia-destructive-command-guard-t: 3; }
  58%, 95% { --aia-destructive-command-guard-t: 3.3; }
  96.5%, 100% { --aia-destructive-command-guard-t: 0; }
}
@keyframes aia-destructive-command-guard-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-destructive-command-guard-shine {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}
@keyframes aia-destructive-command-guard-march {
  to { background-position: 1.273em 0; }
}
@keyframes aia-destructive-command-guard-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes aia-destructive-command-guard-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--c) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-destructive-command-guard,
  .aia-destructive-command-guard * {
    animation: none;
  }
  .aia-destructive-command-guard { --aia-destructive-command-guard-t: 3.3; }
}

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