AI CSS Animations

Sandbox Blocked Request

A packet leaves the sandbox for registry.npmjs.org and bounces off a red shield: not on the allowlist. Allow domain presses, the shield turns green and the packet sails through to the globe.

Also known as: network allowlist blocked, sandbox network request denied, allow domain prompt.

Fetching registry.npmjs.orgRequest blocked by the sandboxDomain allowed npm install zod needs the networkregistry.npmjs.org is not on the allowlistAdded to the allowlist for this session

HTML

<div class="aia-sandbox-blocked-request" role="status" aria-label="Sandbox blocked a request to registry.npmjs.org">
  <div class="aia-sandbox-blocked-request-map" aria-hidden="true">
    <span class="aia-sandbox-blocked-request-node"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 7.8 12 3.5 3.5 7.8v8.4l8.5 4.3 8.5-4.3z"/><path d="M3.5 7.8 12 12l8.5-4.2M12 12v8.5"/></svg><em>sandbox</em></span>
    <span class="aia-sandbox-blocked-request-track">
      <i class="aia-sandbox-blocked-request-packet"></i>
      <b class="aia-sandbox-blocked-request-wall"><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.2 5 6v5.6c0 4.3 2.9 7.6 7 9.2 4.1-1.6 7-4.9 7-9.2V6z"/></svg></b>
    </span>
    <span class="aia-sandbox-blocked-request-node aia-sandbox-blocked-request-far"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.4 3.4 5.3 3.4 8.5s-1 6.1-3.4 8.5c-2.4-2.4-3.4-5.3-3.4-8.5s1-6.1 3.4-8.5z"/></svg><em>registry.npmjs.org</em></span>
  </div>
  <div class="aia-sandbox-blocked-request-msg">
    <b><span>Fetching registry.npmjs.org</span><span>Request blocked by the sandbox</span><span>Domain allowed</span></b>
    <span class="aia-sandbox-blocked-request-sub"><span><code>npm install zod</code> needs the network</span><span>registry.npmjs.org is not on the allowlist</span><span>Added to the allowlist for this session</span></span>
  </div>
  <div class="aia-sandbox-blocked-request-actions">
    <button type="button" class="aia-sandbox-blocked-request-deny">Keep blocked</button>
    <button type="button" class="aia-sandbox-blocked-request-allow"><span>Allow domain</span><span><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>Allowed</span></button>
  </div>
</div>

CSS

@property --aia-sandbox-blocked-request-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-sandbox-blocked-request {
  --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: 8.4s;
  --t: var(--aia-sandbox-blocked-request-t);
  --b: clamp(0, (var(--t) - 1) * 6, 1);
  --a: clamp(0, (var(--t) - 2) * 5, 1);
  width: 21.5em;
  padding: 0.85em 1em 0.85em;
  animation: aia-sandbox-blocked-request-clock var(--d) linear infinite;
}
.aia-sandbox-blocked-request > * {
  animation: aia-sandbox-blocked-request-fade var(--d) linear infinite;
}
.aia-sandbox-blocked-request-map {
  display: flex;
  align-items: flex-start;
  padding-bottom: 1em;
}
.aia-sandbox-blocked-request-map .aia-sandbox-blocked-request-far em {
  right: 0;
  left: auto;
}
.aia-sandbox-blocked-request-node {
  position: relative;
  flex: none;
  width: 2.3em;
  height: 2.3em;
}
.aia-sandbox-blocked-request-node svg {
  display: block;
  box-sizing: border-box;
  width: 2.3em;
  height: 2.3em;
  padding: 0.5em;
  border-radius: 0.65em;
  background: color-mix(in srgb, currentColor 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}
.aia-sandbox-blocked-request-node:first-child svg {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-sandbox-blocked-request-far svg {
  animation: aia-sandbox-blocked-request-arrive var(--d) ease-out infinite;
}
.aia-sandbox-blocked-request-node em {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.45em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 500 0.6em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-style: normal;
  white-space: nowrap;
}
.aia-sandbox-blocked-request-track {
  position: relative;
  flex: 1;
  height: 2.3em;
  margin: 0 0.5em;
  background: linear-gradient(color-mix(in srgb, currentColor 22%, transparent), color-mix(in srgb, currentColor 22%, transparent)) center / 100% 0.1em no-repeat;
}
.aia-sandbox-blocked-request-packet {
  position: absolute;
  top: calc(50% - 0.3em);
  left: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.6em var(--c);
  animation: aia-sandbox-blocked-request-fly var(--d) linear infinite;
}
.aia-sandbox-blocked-request-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin: -0.95em 0 0 -0.95em;
  border-radius: 50%;
  background: color-mix(in srgb, #16a34a calc(var(--a) * 100%), color-mix(in srgb, #dc2626 calc(var(--b) * 100%), color-mix(in srgb, currentColor 10%, transparent)));
  color: color-mix(in srgb, #fff calc(max(var(--a), var(--b)) * 100%), currentColor);
  animation: aia-sandbox-blocked-request-hit var(--d) linear infinite;
}
.aia-sandbox-blocked-request-wall svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2.4;
}
.aia-sandbox-blocked-request-msg {
  display: grid;
  gap: 0.2em;
  margin-top: 0.7em;
}
.aia-sandbox-blocked-request-msg b,
.aia-sandbox-blocked-request-sub {
  display: grid;
}
.aia-sandbox-blocked-request-msg b > *,
.aia-sandbox-blocked-request-sub > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.aia-sandbox-blocked-request-msg b { font-size: 0.92em; }
.aia-sandbox-blocked-request-sub {
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-size: 0.74em;
}
.aia-sandbox-blocked-request-sub code { font: 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.aia-sandbox-blocked-request-msg b > :nth-child(1),
.aia-sandbox-blocked-request-sub > :nth-child(1) { opacity: calc(1 - var(--b)); }
.aia-sandbox-blocked-request-msg b > :nth-child(2),
.aia-sandbox-blocked-request-sub > :nth-child(2) { opacity: calc(var(--b) - var(--a)); }
.aia-sandbox-blocked-request-msg b > :nth-child(3),
.aia-sandbox-blocked-request-sub > :nth-child(3) { opacity: var(--a); }
.aia-sandbox-blocked-request-msg b > :nth-child(2) { color: color-mix(in srgb, #dc2626 80%, currentColor); }
.aia-sandbox-blocked-request-msg b > :nth-child(3) { color: color-mix(in srgb, #16a34a 78%, currentColor); }
.aia-sandbox-blocked-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 0.8em;
}
.aia-sandbox-blocked-request-actions button {
  position: relative;
  padding: 0.5em 0.9em;
  border: 0;
  border-radius: 0.55em;
  font: 600 0.8em system-ui, sans-serif;
  cursor: pointer;
  opacity: calc(0.35 + var(--b) * 0.65);
}
.aia-sandbox-blocked-request-actions button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-sandbox-blocked-request-deny {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
}
.aia-sandbox-blocked-request-actions .aia-sandbox-blocked-request-deny { opacity: calc((0.35 + var(--b) * 0.65) * (1 - var(--a) * 0.6)); }
.aia-sandbox-blocked-request-allow {
  display: grid;
  background: color-mix(in srgb, #16a34a calc(var(--a) * 14%), color-mix(in srgb, var(--c) calc((1 - var(--a)) * 100%), transparent));
  color: color-mix(in srgb, color-mix(in srgb, #16a34a 78%, currentColor) calc(var(--a) * 100%), #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a calc(var(--a) * 40%), transparent);
  animation: aia-sandbox-blocked-request-press var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-sandbox-blocked-request-allow > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
.aia-sandbox-blocked-request-allow > span:first-child { opacity: calc(1 - var(--a)); }
.aia-sandbox-blocked-request-allow > span:last-child { opacity: var(--a); }
.aia-sandbox-blocked-request-allow svg {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 3;
}
@keyframes aia-sandbox-blocked-request-clock {
  0%, 17% { --aia-sandbox-blocked-request-t: 0; }
  20%, 57% { --aia-sandbox-blocked-request-t: 1.2; }
  62%, 95.5% { --aia-sandbox-blocked-request-t: 2.3; }
  96.5%, 100% { --aia-sandbox-blocked-request-t: 0; }
}
@keyframes aia-sandbox-blocked-request-fly {
  0% { left: 0; opacity: 0; transform: scale(0.4); }
  3% { opacity: 1; transform: none; }
  17% { left: calc(50% - 1.35em); opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  23% { left: calc(50% - 3.2em); opacity: 0.7; transform: scale(0.8); }
  27%, 59% { left: calc(50% - 3.2em); opacity: 0; transform: scale(0.4); }
  60% { left: 0; opacity: 0; transform: scale(0.4); }
  63% { left: 0.3em; opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1); }
  80% { left: calc(100% - 0.6em); opacity: 1; transform: none; }
  84%, 100% { left: calc(100% - 0.6em); opacity: 0; transform: scale(1.8); }
}
@keyframes aia-sandbox-blocked-request-hit {
  0%, 16.5% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, #dc2626 0%, transparent); }
  18% { transform: scale(1.18); box-shadow: 0 0 0 0 color-mix(in srgb, #dc2626 55%, transparent); }
  26% { transform: none; box-shadow: 0 0 0 0.8em color-mix(in srgb, #dc2626 0%, transparent); }
  60% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 50%, transparent); }
  68%, 100% { transform: none; box-shadow: 0 0 0 0.8em color-mix(in srgb, #16a34a 0%, transparent); }
}
@keyframes aia-sandbox-blocked-request-arrive {
  0%, 79% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent), 0 0 0 0 color-mix(in srgb, #16a34a 0%, transparent); color: inherit; }
  84%, 95% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a 60%, transparent), 0 0 0 0.3em color-mix(in srgb, #16a34a 16%, transparent); color: color-mix(in srgb, #16a34a 78%, currentColor); }
  100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent), 0 0 0 0 color-mix(in srgb, #16a34a 0%, transparent); color: inherit; }
}
@keyframes aia-sandbox-blocked-request-press {
  0%, 54%, 60%, 100% { transform: none; }
  57% { transform: scale(0.95); }
}
@keyframes aia-sandbox-blocked-request-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-sandbox-blocked-request,
  .aia-sandbox-blocked-request *,
  .aia-sandbox-blocked-request > * {
    animation: none;
  }
  .aia-sandbox-blocked-request { --aia-sandbox-blocked-request-t: 1.2; }
  .aia-sandbox-blocked-request-packet { opacity: 0; }
}

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