try understand why text invisible here inside textarea?: <html>

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

    copy code .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 {
      content: '';
      color: white;
      width: 100%;
      opacity: 0.5;
    }

    .highlight-line:before {
      content: '';
      color: white;
      position: absolute;
      left: -64px;
      width: 0;
      top: 25%;
      height: 50%;
      pointer-events: none;
      animation: shot .1s linear forwards;
    }

    @keyframes shot {
      from {
        left: calc(100% - 64px);
       
    width: 0;
  }

  to {
    left: -64px;
        width: 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) return;
        const remainingSpace = container.clientWidth - range.getBoundingClientRect().left;
        const highlightedLine = document.createElement('div');
        highlightedLine.classList.add('highlight-line');
        highlightedLine.textContent = lineText;
        highlightedLine.style.maxWidth = remainingSpace + 'px';
        highlightedLine.style.textAlign = 'right';
        range.deleteContents();
        range.insertNode(highlightedLine);
        range.collapse();
        previousContent = container.innerHTML;
        wordEndPosition = getPosition(textNode);
        setTimeout(() => {
          highlightedLine.remove();
        }, 200);
      }
    }

    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 (['Enter', ' ', ',', '.'].includes(event.key)) {
        event.preventDefault();
        if (previousContent !== container.innerHTML) {
          insertLine();
        }
      }
    }
    container.addEventListener('keydown', handleKeyPress);
    container.addEventListener('keyup', handleKeyUp);
  </script>
</body>

</html>