maybe simply replace that "highlightedLine.textContent = '█';" block symbol with an actual gradient in terms? the purpose for all this madness is to make a laser-like shooting gradient towards the remaining space inbetween the current caret position and the max width remained towards that container or textarea right side. no, gpt, your gradient is invisible inside this simulaed textarea. the triggering key in this case is enter key, and this gradient shall fly towards right side if you press enter. reread text as aforementioned previously.: ```<html>

<head>
  <style>
    html,
    body {
      background: radial-gradient(circle at center right, rgba(15, 10, 0, 0.9), rgba(25, 1, 5, 0.9));
      padding: 10px;
    }

    .container {
      display: grid;
      width: 100%;
      height: 100%;
      padding-top: 0px;
      place-items: center;
    }

    .textarea {
      width: 100%;
      height: auto;
      max-height: 50vh;
      font-family: 'Courier New', monospace;
      font-size: 18px;
      font-weight: bold;
      color: cyan;
      background: rgba(1, 1, 3, 0.9);
      border: 2px inset #252555;
      overflow: auto;
      white-space: pre-wrap;
      grid-row-gap: 5px;
      margin-top: -6px;
      margin-bottom: -6px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .highlight-line {
      position: relative;
      height: 9px;
      background: rgba(155, 0, 0, 0.1);
    }

    @keyframes shot {
      to {
        left: 100%;
      }
    }
  </style>
</head>

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

    function setCaretToEnd() {
      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(textarea);
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
    }

    function handleKeyPress(event) {
      if (event.key === 'Enter' || event.key === 'Return') {
        event.preventDefault();
        const selection = document.getSelection();
        const range = selection.getRangeAt(0);
        const currentNode = range.startContainer;
        const lineBreak = document.createElement('span');
        lineBreak.innerHTML = '<br>';
        const highlightedLine = document.createElement('span');
        highlightedLine.classList.add('highlight-line');
        highlightedLine.textContent = '█';
        const newLine = document.createElement('span');
        newLine.appendChild(lineBreak);
        newLine.appendChild(highlightedLine);
        if (currentNode.nodeType === Node.TEXT_NODE) {
          const nextNode = currentNode.splitText(range.startOffset);
          nextNode.parentNode.insertBefore(newLine, nextNode);
          range.setStart(nextNode, 0);
        } else {
          textarea.appendChild(newLine);
          range.setStart(newLine, 0);
        }
        const lineAnimation = highlightedLine.animate({
          left: ['-100%', '100%']
        }, {
          duration: 200
        });
        lineAnimation.onfinish = () => {
          highlightedLine.parentNode.removeChild(highlightedLine);
        };
        selection.removeAllRanges();
        selection.addRange(range);
        setCaretToEnd();
      }
    }
    textarea.addEventListener('keydown', handleKeyPress);
  </script>
</body>

</html>```