the other problem that it doesn't scrolls to exact current caret position at bottom inside textarea, when it reaches max-height in ".textarea" "max-height:50vh;". mst probably because gradient newline overrides new line and don't allow things to scroll to current caret position, but who knows. you are smart as I see. why hidding gradient or anything if it's intended to be, except solving proper alignment in iteration, for which should be shown or hidden afterwards of what excatly to solve this issue. no, return to original code. try placing this gradient line animation on the current initial line from the beginning and the previous line afterwards.:  ```<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: 1px;

    }

    .highlight-line {
      position: relative;
      display: grid;
      align-items: center;
      height: 18px;
      background: transparent;
    }

    .gradient {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(155, 0, 0, 1), rgba(0, 0, 155, 0.2));
      transform-origin: left;
      opacity: 0;
      transition: opacity 0.2s linear;
    }

    .highlighted {
      background: rgba(155, 0, 0, 0.1);
    }
  </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('br');
const highlightedLine = document.createElement('span');
highlightedLine.classList.add('highlight-line');
const gradientContainer = document.createElement('span'); 
gradientContainer.classList.add('gradient-container');
const gradient = document.createElement('span');
gradient.classList.add('gradient');

highlightedLine.appendChild(gradientContainer); 
gradientContainer.appendChild(gradient); 

const newLine = document.createElement('div');
newLine.appendChild(highlightedLine);

if (currentNode.nodeType === Node.TEXT_NODE) {
  const nextNode = currentNode.splitText(range.startOffset);
  nextNode.parentNode.insertBefore(lineBreak, nextNode);
  nextNode.parentNode.insertBefore(newLine, nextNode);
  range.setStart(nextNode, 0);
} else {
  range.setStart(newLine, 0);
  textarea.appendChild(lineBreak);
  textarea.appendChild(newLine);
}

const caretOffset = range.getBoundingClientRect().left - gradientContainer.getBoundingClientRect().left; 
highlightedLine.style.width = '100%';
gradient.style.transformOrigin = caretOffset + 'px top';

const lineAnimation = gradient.animate(
  {
    opacity: [0, 1],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 200,
  }
);

lineAnimation.onfinish = () => {
  if (highlightedLine.offsetWidth >= newLine.offsetWidth) {
    highlightedLine.remove();
  } else {
    gradientContainer.remove();
  }
};

selection.removeAllRanges();
selection.addRange(range);
setCaretToEnd();

}
}
    textarea.addEventListener('keydown', handleKeyPress);
  </script>
</body>

</html>```