To achieve a similar laser effect in the span element, you can add some additional JavaScript code. Here’s an updated version of the code with the laser effect:
<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); animation-name: shot; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes shot { 0% { left: -100%; background: rgba(155, 0, 0, 0.1); } 50% { background: linear-gradient(to right, rgba(255, 0, 0, 0.9) 0%, rgba(255, 200, 0, 0.9) 50%, rgba(255, 0, 0, 0.9) 100%); } 100% { left: 100%; 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(‘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>

In the updated code, I’ve added a @keyframes animation named “shot” to the .highlight-line class. This animation moves the highlight line from left to right with a linear gradient effect. The animation has three keyframes:

copy code
At 0%, the line is positioned off-screen to the left and has the initial background color.
At 50%, the line reaches the center of the container and has a linear gradient background.
At 100%, the line moves off-screen to the right and has the initial background color.
After appending the new line, the animation is triggered, and once it finishes, the highlighted line is removed from the DOM.
Please note that the gradient and colors used in the animation can be adjusted according to your preference.

is it posssible to make a textcontent gradient itself? because it cannot interpret normal gradient, always some invisible shit, just a flying block to the right.

I apologize for the confusion. If you want to apply a gradient effect directly to the textContent of the block symbol, you can use a combination of CSS properties and JavaScript to achieve that. Here’s an updated version of the code:
<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: transparent; overflow: hidden; animation: shot 1s forwards; } @keyframes shot { 0% { left: 0%; width: 0%; } 50% { background: linear-gradient(to right, rgba(255, 0, 0, 0.9) 0%, rgba(255, 200, 0, 0.9) 50%, rgba(255, 0, 0, 0.9) 100%); width: 100%; } 100% { left: 100%; width: 0%; } } </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 newLine = document.createElement(‘span’); newLine.appendChild(lineBreak); 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 highlightedLine = document.createElement(‘span’); highlightedLine.textContent = ‘█’; highlightedLine.classList.add(‘highlight-line’); newLine.appendChild(highlightedLine); const lineAnimation = highlightedLine.animate({ left: [‘-100%’, ‘100%’] }, { duration: 1000 }); lineAnimation.onfinish = () => { highlightedLine.parentNode.removeChild(highlightedLine); }; selection.removeAllRanges(); selection.addRange(range); setCaretToEnd(); } } textarea.addEventListener(‘keydown’, handleKeyPress); </script> </body> </html>

In this updated code, the highlight-line class has been modified. The background property is set to transparent, and added an overflow: hidden property. The gradient effect is achieved by animating the width property from 0% to 100% using a CSS animation.
When a new line is added, a new span element with the class highlight-line is created and appended to the line. The animation is then triggered to create the flying block effect with the gradient.
Please note that the duration of the animation can be adjusted according to your preference by modifying the duration property in the lineAnimation definition.
I hope this meets your requirements. Let me know if you have any further questions!

try figure-out why the fuck actual gradient is invisible at all?

Apologies for the oversight. To make the gradient visible in the highlight-line element, you need to modify the background property in the shot keyframes animation. Here’s the correct code:

@keyframes shot {
0% {
left: 0%;
width: 0%;
background: transparent;
}
50% {
background: linear-gradient(to right, rgba(255, 0, 0, 0.9) 0%, rgba(255, 200, 0, 0.9) 50%, rgba(255, 0, 0, 0.9) 100%);
width: 100%;
}
100% {
left: 100%;
width: 0%;
background: transparent;
}
}

By adding the background: transparent; property to the 0% and 100% keyframes, the gradient will be visible only during the 50% keyframe. This ensures that the gradient is only displayed when the highlight-line element is at its fullest width.
With this modification, the gradient effect should now be properly visible.

it looks that need to play with a background position, because gradient got covered behind that block symbol, simply. try expand that gradient on full width.

Apologies for the confusion. To expand the gradient on the full width and maintain it visible above the block symbol, you can modify the background-size property in the highlight-line class. Here’s the updated CSS code:

.highlight-line {
position: relative;
height: 9px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.9) 0%, rgba(255, 200, 0, 0.9) 50%, rgba(255, 0, 0, 0.9) 100%);
background-size: 200% 100%;
background-position: -100% 0;
overflow: hidden;
animation: shot 1s forwards;
}

By setting the background-size to 200% 100%, the gradient is expanded beyond the width of the highlight-line element. The negative background-position of -100% 0 ensures that the gradient starts from the leftmost side of the element.
With these updates, the gradient should properly expand on the full width and stay visible above the block symbol.

no, the motherfucka is a san. yu need to style acual span, not shits. do normal

I apologize for any confusion caused. If you would like to apply a gradient directly to the text content of the block symbol, you can modify the code as follows:
<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; display: inline-block; background: linear-gradient(to right, rgba(255, 0, 0, 0.9) 0%, rgba(255, 200, 0, 0.9) 50%, rgba(255, 0, 0, 0.9) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation-name: shot; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes shot { 0% { left: -100%; } 50% { background: linear-gradient(to right, rgba(255, 0, 0, 0.9) 0%, rgba(255, 200, 0, 0.9) 50%, rgba(255, 0, 0, 0.9) 100%); } 100% { left: 100%; } } </style> </head> <body> <div class=‘container’> <span id=‘textarea’ class=‘textarea’ contenteditable=‘true’> </span> </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’); highlightedLine.textContent = ‘█’; if (currentNode.nodeType === Node.TEXT_NODE) { const nextNode = currentNode.splitText(range.startOffset); nextNode.parentNode.insertBefore(lineBreak, nextNode); nextNode.parentNode.insertBefore(highlightedLine, nextNode); range.setStart(nextNode, 0); } else { textarea.appendChild(lineBreak); textarea.appendChild(highlightedLine); range.setStart(highlightedLine, 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> In this code, the class “highlight-line” is modified to be applied to the individual span element containing the text content. The background property is set to the desired gradient and the “-webkit-background-clip” and “-webkit-text-fill-color” properties are added to make the gradient visible within the text. I apologize again for any confusion and hope this code meets your requirements. Let me know if you have any further questions!

no, this gradient strictly paints only within that block symbol which is a motherfucking unicode character limited in size. need different approach here. when this mothartherfucka flies to the right, need to append some gradient from its left side to that block symbol.