<p id="demo"><span>Silky smooth animations, driven by scroll, running off the main thread … and all that with just a few lines of extra code – What's not to like?!</span></p>

<footer>
  <p>This demo is part of <a href="https://goo.gle/css-wrapped-2023" target="_top">#CSSWrapped2023</a></p>
</footer>

#demo {
  position: fixed;
  font-size: 1.25em;
  width: 90vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  font-family: Chivo Mono, monospace;

  --chars: 144;
}

span {
  background: 
    /* base color */ #eee /* highlight gradient */
    linear-gradient(to right, #6300ff 0%, #e915c7 100%) 0 / 0 no-repeat;
  -webkit-background-clip: text;
  color: transparent;

  animation: text steps(var(--chars)) forwards;
  animation-timeline: scroll(root);
}

body {
  height: 400dvh;
}

@keyframes text {
  0% {
    background-size: 0ch;
  }
  100% {
    background-size: calc(var(--chars) * 1ch);
  }
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(16px, 2vmax + 1em, 42px);
}

footer {
  position: fixed;
  bottom: 1em;
  left: 0;
  right: 0;
  text-align: center;

  font-family: Syne;
  font-size: 0.5rem;
  text-align: center;
  font-style: italic;
}

html {
  --scrollbar-thumb-color: #e915c7;
  --scrollbar-track-color: #eee;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

@supports not (scrollbar-color: red blue) {
  html::-webkit-scrollbar {
    width: 1em;
  }
  html::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
  }
  html::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
  }
}