how it was made in sci-fi movies? do you have some movie names examples? "holographic projections". dude, curb your intusiasm. I don't remember in which movie I saw it, some ancient movie fragment, don't remember exactly. so, this block caret cursor should or suppose to be blinking on that shot animation end at the most-right side, or it should initially blink at the current caret position and after key trigger event as "space" it should morph into this shooting gradient and fly to the most-right side by disolving and then returning back to initial caret origin but without any gradient.: ```<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 {
      content: '';
      color: white;
      width: 100%;
      opacity:0.5;
    }

    .highlight-line:before {
      content: '';
      color: white;
      position: absolute;
      left: -64px;
      width: 0;
      top:25%;
      height: 50%;
      background-image: linear-gradient(to right, royalblue, cyan);
      pointer-events: none;
      animation: shot .1s linear forwards, blink .01s 2s infinite;
    }

    @keyframes shot {
      from {
        right: 100%;
        width: 0;
      }

      to {
        left: 0;
        width: 100%;
      }
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        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) return;
        const remainingSpace = container.clientWidth - range.getBoundingClientRect().left;
        const highlightedLine = document.createElement('span');
        highlightedLine.classList.add('highlight-line');
        highlightedLine.textContent = lineText;
        highlightedLine.style.maxWidth = remainingSpace + 'px';
        highlightedLine.style.textAlign = 'right';
        const gradientLine = document.createElement('span');
        gradientLine.style.width = container.clientWidth + 'px';
        Array.from(lineText).forEach(() => {
          const block = document.createElement('span');
          block.textContent = '█';
          gradientLine.appendChild(block);
        });
        highlightedLine.appendChild(gradientLine);
        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>```