<div class="wrapper">
    <div class="text">
      This is a typing demo.
    </div>
</div>

<div class="warning">⚠️ Your browser does not support CSS Scroll-Linked Animations, so this demo won't work. To see how it works and behaves use Chromium 89+ with “Experimental Web Platform Features” enabled. Enabling this flag in your main browser is not recommended, so please use a Beta/Canary/Nightly build.</div>

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  top: 0;
  left: 0;
}

.text {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@supports (animation-timeline: works) {
  .warning {
    display: none;
  }

  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 22ch;
    }
  }

  @keyframes blink {
    50% {
      border-color: transparent;
    }
  }

  @scroll-timeline scrolling {
    source: auto;
    start: 0;
    end: 100%;
    time-range: 2s;
  }

  .text {
    animation:
      typing 2s steps(22),
      blink 0.5s step-end infinite alternate
    ;
    animation-timeline:
      scrolling,
      auto
    ;
  }

  body {
    min-height: 300vh;
  }
}

/* Show warning for older browser */
.warning {
  position: fixed;
  top: 1em;
  right: 1em;
  left: 1em;
  padding: 1em;
  border: 1px solid black;
  z-index: 9999;
  text-align: center;
  color: black;
  background: rgba(255 255 225 / 0.9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}

import { showDialog } from 'https://codepen.io/bramus/pen/ZEqMOLz/cccfe67c2b9cdfbeb5fb59083dbd0a64.js';
showDialog();