need that block to be attached strictly from the right side-end of gradient expansion, so it can translate from left-initial to the most-right side in animation duration. I mean that block symbol inside array. what if determine actual container width and blink it strictly in the end of container width?: ```<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 {
  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 .3s linear forwards, blink .05s .1s infinite;
}

@keyframes shot {
100% {
width: 100%;
opacity: 0;
}
}
@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;

copy code
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);
    }, 300);
  }
}

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>```