ok, just forgot your implementations, and try to do something withing this working solution, simply, to achieve similar lazor effukt: try using in-javascriptscript styling for that block symbol in span element to make it look as a linear gradient laser flying to the right side within its frame inbetween 100% width. <--reread this text 99999999999999 times before outputs. need stylings in javascript itself. there's just one block flying to the right 100% width but need to add a trailing kinda quantum leap trace laser effect after it, simply. I think the trick here is to apply actual effect in gradient to the textContent in javascript for that specific block symbol, because otherwise you cannot make normal animation somehow. try specifically target that block symbol in animation to append a kinda gradient to it.: ```<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>```