Online HTML File Runner (Viewer)

Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Example</title>
  <style>
    @keyframes butteryCodeType {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        filter: blur(2px);
      }
      50% {
        opacity: 0.5;
        transform: translateY(2px) scale(1.01);
        filter: blur(0.5px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

.letter {
      display: inline-block;
      animation: butteryCodeType 0.25s cubic-bezier(0.25, 0.8, 0.3, 1) both;
      white-space: pre;
      will-change: transform, opacity, filter;
    }
  </style>
</head>
<body style="background:#0d1117; color:#c9d1d9; font-family:monospace; padding:2rem;">

const container = document.getElementById('editor');
    let i = 0;

function typeNext() {
      if (i < code.length) {
        const span = document.createElement('span');
        span.textContent = code[i];
        span.className = 'letter';
        container.appendChild(span);
        i++;
        setTimeout(typeNext, 20);
      }
    }

typeNext();
  </script>

</body>
</html>

Line 1, Column 1 Untitled

0 characters 1 lines

Live Preview