The @replace function makes {label} text fade away and other text fade in. I'd prefer to have it backspace out and type in. I'm getting closer. But I'm annoyed that my CSS creates a hard return even thought I'm using a <span> tag, not a <div>. Anybody wanna help out?

/******This sorta makes a typewriter effect.******/
.typing {
  display: flex;
  width: 100%;
  animation: typing 3s/*time*/ steps(40),/*shutter-speed*/ blink .5s step-end infinite alternate; 
  white-space: nowrap;
  overflow: hidden;
  font-family: inherit;
}
@keyframes typing {
  from {
    width: 0
  }
}    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

Actually, maybe I'm dumb to even try CSS, but I don't understand at all how to change the replace function in squiffy.template.js

But I'm annoyed that my CSS creates a hard return even thought I'm using a <span> tag, not a <div>

The difference between span and div is whether the default CSS includes display: block or display: inline. If you're changing the display property anyway, they're equivalent.

I'm not too familiar with flexbox, but I believe the equivalents would be display: flex (for paragraph or block type elements) or display: inline-flex (for anything you want to be placed within a line of text)