Connect Account to Continue: CSS AI Animation

Connect Account to Continue

Connect GitHub to continue: a locked, dashed link waits between the agent and GitHub. The button presses, dashes march while it authorizes, then the line goes solid and the lock becomes a check.

Also known as: oauth connect prompt, connect github ui, link account animation.

Connect GitHub to continueGitHub connected Needed to open a pull request on acme/webSigned in as acme-dev, opening PR #483

Color Base size 16px Dark background

HTML

<div class="aia-connect-account-required" role="status" aria-label="Connect GitHub to continue">
  <div class="aia-connect-account-required-link" aria-hidden="true">
    <span class="aia-connect-account-required-app"><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.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg></span>
    <span class="aia-connect-account-required-wire"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="11" width="12" height="9" rx="2"/><path d="M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11"/></svg><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></i></span>
    <span class="aia-connect-account-required-gh"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg></span>
  </div>
  <div class="aia-connect-account-required-text">
    <b><span>Connect GitHub to continue</span><span>GitHub connected</span></b>
    <span class="aia-connect-account-required-sub"><span>Needed to open a pull request on acme/web</span><span>Signed in as acme-dev, opening PR #483</span></span>
  </div>
  <button type="button" class="aia-connect-account-required-btn">
    <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="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg>Connect GitHub</span>
    <span><i aria-hidden="true"></i>Authorizing</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>Connected</span>
  </button>
</div>

CSS

@property --aia-connect-account-required-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-connect-account-required {
  --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-connect-account-required-t);
  --go: clamp(0, (var(--t) - 0.5) * 4, 1);
  --l: clamp(0, (var(--t) - 1.5) * 3, 1);
  --au: calc(var(--go) - var(--l));
  display: grid;
  justify-items: center;
  width: 19.5em;
  padding: 1em 1em 0.95em;
  text-align: center;
  animation: aia-connect-account-required-clock var(--d) cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.aia-connect-account-required > * {
  animation: aia-connect-account-required-fade var(--d) linear infinite;
}
.aia-connect-account-required-link {
  display: flex;
  align-items: center;
}
.aia-connect-account-required-app,
.aia-connect-account-required-gh {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.75em;
}
.aia-connect-account-required-app {
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.35em 0.9em -0.35em color-mix(in srgb, var(--c) 80%, transparent);
}
.aia-connect-account-required-app svg {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
  stroke: none;
}
.aia-connect-account-required-gh {
  background: color-mix(in srgb, currentColor 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a calc(var(--l) * 70%), color-mix(in srgb, currentColor 16%, transparent)), 0 0 0 calc(var(--l) * 0.25em) color-mix(in srgb, #16a34a 16%, transparent);
}
.aia-connect-account-required-gh svg {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 1.8;
}
.aia-connect-account-required-wire {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5em;
  height: 0.14em;
  margin: 0 0.4em;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 28%, transparent) 0 0.35em, transparent 0.35em 0.65em);
}
.aia-connect-account-required-wire::before,
.aia-connect-account-required-wire::after {
  content: "";
  position: absolute;
  inset: 0;
}
.aia-connect-account-required-wire::before {
  background: repeating-linear-gradient(90deg, var(--c) 0 0.35em, transparent 0.35em 0.65em) 0 0 / 0.65em 100%;
  opacity: var(--au);
  animation: aia-connect-account-required-march 0.6s linear infinite;
}
.aia-connect-account-required-wire::after {
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, #16a34a 78%, currentColor));
  transform: scaleX(var(--l));
  transform-origin: left;
}
.aia-connect-account-required-wire i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: color-mix(in srgb, #16a34a calc(var(--l) * 100%), color-mix(in srgb, currentColor 10%, transparent));
  color: color-mix(in srgb, #fff calc(var(--l) * 100%), currentColor);
  animation: aia-connect-account-required-ping 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.aia-connect-account-required-wire svg {
  grid-area: 1 / 1;
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.4;
}
.aia-connect-account-required-wire svg:first-child {
  opacity: calc(1 - var(--l));
  transform: scale(calc(1 - var(--l) * 0.5));
}
.aia-connect-account-required-wire svg:last-child {
  stroke-width: 3.2;
  opacity: var(--l);
  transform: scale(calc(0.5 + var(--l) * 0.5));
}
.aia-connect-account-required-text {
  display: grid;
  gap: 0.2em;
  margin: 0.85em 0 0.85em;
}
.aia-connect-account-required-text b,
.aia-connect-account-required-sub {
  display: grid;
}
.aia-connect-account-required-text b > *,
.aia-connect-account-required-sub > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.aia-connect-account-required-text b { font-size: 0.95em; }
.aia-connect-account-required-sub {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.74em;
}
.aia-connect-account-required-text b > :first-child,
.aia-connect-account-required-sub > :first-child {
  opacity: calc(1 - var(--l));
  transform: translateY(calc(var(--l) * -0.4em));
}
.aia-connect-account-required-text b > :last-child,
.aia-connect-account-required-sub > :last-child {
  opacity: var(--l);
  transform: translateY(calc((1 - var(--l)) * 0.4em));
}
.aia-connect-account-required-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 2.6em;
  border: 0;
  border-radius: 0.65em;
  background: color-mix(in srgb, #16a34a calc(var(--l) * 14%), color-mix(in srgb, var(--c) calc((1 - var(--l)) * 100%), transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a calc(var(--l) * 40%), transparent);
  color: color-mix(in srgb, color-mix(in srgb, #16a34a 78%, currentColor) calc(var(--l) * 100%), #fff);
  font: 600 0.82em system-ui, sans-serif;
  cursor: pointer;
  animation: aia-connect-account-required-press var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-connect-account-required-btn:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-connect-account-required-btn > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.aia-connect-account-required-btn svg {
  width: 1.2em;
  height: 1.2em;
}
.aia-connect-account-required-btn > span:nth-child(1) { opacity: calc(1 - var(--go)); }
.aia-connect-account-required-btn > span:nth-child(2) { opacity: var(--au); }
.aia-connect-account-required-btn > span:nth-child(3) { opacity: var(--l); }
.aia-connect-account-required-btn > span:nth-child(3) svg { stroke-width: 3; }
.aia-connect-account-required-btn i {
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.16em solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: aia-connect-account-required-spin 0.8s linear infinite;
}
@keyframes aia-connect-account-required-clock {
  0%, 30% { --aia-connect-account-required-t: 0; }
  35%, 50% { --aia-connect-account-required-t: 1; }
  57%, 95.5% { --aia-connect-account-required-t: 2; }
  96.5%, 100% { --aia-connect-account-required-t: 0; }
}
@keyframes aia-connect-account-required-press {
  0%, 29%, 35%, 100% { transform: none; }
  32% { transform: scale(0.96); }
}
@keyframes aia-connect-account-required-fade {
  0%, 93% { opacity: 1; }
  95.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-connect-account-required-march {
  to { background-position: 0.65em 0; }
}
@keyframes aia-connect-account-required-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.6em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-connect-account-required-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-connect-account-required,
  .aia-connect-account-required *,
  .aia-connect-account-required *::before {
    animation: none;
  }
  .aia-connect-account-required { --aia-connect-account-required-t: 0; }
}

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

Connect Account to Continue

HTML

CSS

Customizing this snippet

Similar ai animations