Update demo gif

[fregante]

Codepen won't let me log in today. I wrote this partial demo and I'll finish it when they let me again

<main>
  <h2 class="on-abort">onAbort(<signal></signal>, <function></function>, <function></function>, <controller><signal></signal></controller>)</h2>

  <h2 class="link-controllers">linkControllers(<controller><signal></signal></controller>, <controller><signal></signal></controller>, <controller><signal></signal></controller>)</h2>
    
  <h2 class="reusable-controllers"><span>new ReusableAbortController() => </span><controller><signal></signal><signal></signal></controller></h2>

  <h2 class="merge-signals">mergeSignals(<signal></signal>, <signal></signal>, <signal></signal>, <signal></signal>) <span>=> </span> <signal></signal></h2>
</main>

<footer><a href="https://github.com/fregante/abort-utils" target="_blank">fregante/abort-utils</a></footer>

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font: 3vmin / 1 Menlo, monospace;
  flex-wrap: wrap;
}

h2 {
  display: flex;
  align-items: flex-end;
  margin-top: 4em;
  span {
    margin-inline: 0.3em;
  }
}

controller {
  display: inline-flex;
  justify-content: center;
  box-shadow: 0 0 5px #103a6188;
  box-sizing: border-box;
  background: #103a61;
  border: solid 2px #103a61;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  margin-bottom: -0.5em;
}

signal {
  display: block;
  box-sizing: border-box;
  background: #f9f2c5;
  border: solid 2px #ffcf14;
  box-shadow: 0 0 5px #ffcf14;
  border-radius: 0.5em;
  width: 1em;
  height: 1em;

  controller & {
    margin-top: -0.8em;
    z-index: -1;
    height: 1.5em;
  }
}

function {
  display: block;
  box-sizing: border-box;
  background: #006600;

  box-shadow: 0 0 5px #006600;
  transform: skewX(-12deg);
  padding: 0.2em 0.2em 0.3em;
  margin-left: 0.3em;
  &::before {
    display: block;
    content: '𝑓';
    font-weight: bold;
    color: white;
    transform: skewX(12deg);
  }
}

footer {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  padding-block: 3rem;
}

a {
  color: gray;
}

.on-abort > signal,
.merge-signals signal:nth-child(3),
.merge-signals signal:nth-child(6) {
  animation: 0.1s 2s signal-aborted forwards;
}

.merge-signals signal:nth-child(6) {
  animation-delay: 2.3s;
}

.on-abort > controller,
.link-controllers controller {
  animation: 0.1s 2s controller-aborted forwards;
  signal {
    animation: 0.1s 2.1s signal-aborted forwards;
  }
}

.link-controllers controller:nth-child(1) {
  animation-delay: 2.3s;
  signal {
    animation: 0.1s 2.4s signal-aborted forwards;
  }
}

.on-abort > controller,
.link-controllers controller:nth-child(2) {
  animation-delay: 2.6s;
  signal {
    animation: 0.1s 2.7s signal-aborted forwards;
  }
}

function {
  animation: 0.1s 2.2s controller-aborted forwards;
}

function:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes signal-aborted {
  to {
    background: #fe6a3a;
    border-color: #ff5413;
    box-shadow: 0 0 5px #ff5413;
  }
}

@keyframes controller-aborted {
  to {
    background: #a43221;
    border-color: #a43221;
    box-shadow: 0 0 5px #ff5413;
  }
}