Den

Welcome back. Your husky’s keeping watch.

or continue with

Html

<!-- the husky guards -->
<svg class="fox">...paws...</svg>

<!-- Sign in is a door -->
<button class="btn doorbtn">
  <span class="doorbtn__label">Sign in</span>
  <span class="dooric">
    <span class="dooric__frame">...</span>
    <span class="dooric__person">...</span>
  </span>
</button>

CSS

/* the door swings open */
.dooropen .door-panel {
  transform: rotateY(72deg);
}
.dooropen .dooric__glow {
  opacity: .95;
}
/* legs swing, knees bend */
.walking .walker {
  animation: thighF .46s linear infinite;
}
/* then walk on through */
.out .walker {
  transform: translateX(36px);
  opacity: 0;
}

JS

// door → walk through → in
form.onsubmit = async (e) => {
  e.preventDefault();
  btn.classList.add('dooropen');
  await wait(380);
  btn.classList.add('walking');
  btn.classList.add('out');
  await wait(760);
  btn.classList.remove('walking', 'dooropen');
  fox.classList.add('is-happy');
};