IS IT POSSIBLE TO ANIMATE THE BLOCK SYMBOLS "█" through that gradient animation to the right side, so, it will kinda stretch to the right side.? do that block to blink in the end of that gradient animation, when it reaches the end of container. just blink it for a couple of ms as in sci-fi movies.: ```<html>

<head>
  <style>
    html,
    body {
      background: black;
    }

    .textarea {
      width: 100%;
      height: auto;
      font-family: 'Courier New', monospace;
      font-size: 18px;
      color: cyan;
      background-color: #010101;
      border: none;
      overflow: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      line-height: 1.4;
    }

    .highlight-line {
      position: relative;
      display: inline-block;
    }

    span {
      color: white;
      width: 100%;
    }

    .highlight-line:before {
      content: '';
      color: white;
      position: absolute;
      left: -18px;
      width: 0;
      height: 100%;
      background-image: linear-gradient(to right, royalblue, cyan);
      pointer-events: none;
      animation: shot 0.5s linear forwards;
    }

    @keyframes shot {
      100% {
        width: 100%;
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div id='container' class='textarea' contenteditable='true'></div>
  <script>
    const container = document.getElementById('container');
    let previousContent = container.innerHTML;
    let wordEndPosition = 1;

    function getPosition(node) {
      const range = window.getSelection().getRangeAt(0).cloneRange();
      range.selectNodeContents(node);
      range.setEnd(range.startContainer, range.startOffset);
      return range.toString().length;
    }

    function insertLine() {
      const range = window.getSelection().getRangeAt(0);
      if (range.startContainer.nodeType === 3) {
        const textNode = range.startContainer;
        const currentPosition = range.startOffset;
        const lineText = textNode.textContent.slice(wordEndPosition);
        if (lineText.trim().length === 0) {
          return;
        }
        const remainingSpace = container.clientWidth - range.getBoundingClientRect().right;
        const highlightedLine = document.createElement('span');
        highlightedLine.classList.add('highlight-line');
        highlightedLine.textContent = lineText;
        highlightedLine.style.maxWidth = remainingSpace + 'px';
        const gradientLine = document.createElement('span');
        gradientLine.style.width = container.clientWidth + 'px';
        gradientLine.textContent = Array.from(lineText).map(() => '█').join('');
        highlightedLine.appendChild(gradientLine);
        range.deleteContents();
        range.insertNode(highlightedLine);
        range.collapse();
        previousContent = container.innerHTML;
        wordEndPosition = getPosition(textNode);
        setTimeout(() => {
          highlightedLine.parentNode.removeChild(highlightedLine);
        }, 500);
      }
    }

    function handleKeyPress(event) {
      if (event.key === 'Enter') {
        event.preventDefault();
        insertLine();
        return;
      }
      if (event.key === ' ') {
        const range = window.getSelection().getRangeAt(0);
        wordEndPosition = getPosition(range.startContainer) + range.startOffset - 1;
      }
    }

    function handleKeyUp(event) {
      if (event.key === 'Enter' || event.key === ' ' || event.key === ',' || event.key === '.') {
        event.preventDefault();
        if (previousContent !== container.innerHTML) {
          insertLine();
        }
      }
    }
    container.addEventListener('keydown', handleKeyPress);
    container.addEventListener('keyup', handleKeyUp);
  </script>
</body>

</html>```