cle 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 { 0% { width: 0; } 10%, 90% { width: 100%; background: transparent; } 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 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( { backgroundSize: [‘0% 100%’, ‘100% 100%’, ‘0% 100%’] }, { duration: 1500, easing: “linear”} ); lineAnimation.onfinish = () => { highlightedLine.parentNode.removeChild(highlightedLine); }; selection.removeAllRanges(); selection.addRange(range); setCaretToEnd(); } } textarea.addEventListener(‘keydown’, handleKeyPress); </script> </body> </html>

In this updated code, we modified the @keyframes shot animation to create a laser-like effect. The width of the block starts from 0% and increases to 100% over 10% of the animation duration. Then it stays at 100% for 80% of the duration with a transparent background, creating the illusion of a laser shot. Finally, in the last 10% of the duration, the width decreases back to 0%.
Please give this updated code a try and let me know if it meets your expectations for the laser animation effect. Feel free to customize the animation further if needed.

not sure, don't see any lazor effekts. check the backgrounds colors and fix it.

Apologies for the confusion. Let’s modify the code to fix the laser effect. Here’s the updated 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: rgba(155, 0, 0, 0.1); } @keyframes shot { 0% { background: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)); background-position: 0% 0%; } 50% { background: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)); background-position: 100% 0%; } 100% { background: linear-gradient(to right, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)); background-position: 0% 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 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( { backgroundPosition: [‘0% 0%’, ‘100% 0%’, ‘0% 0%’] }, { duration: 1500, easing: “linear” } ); lineAnimation.onfinish = () => { highlightedLine.parentNode.removeChild(highlightedLine); }; selection.removeAllRanges(); selection.addRange(range); setCaretToEnd(); } } textarea.addEventListener(‘keydown’, handleKeyPress); </script> </body> </html> In this updated code, we modified the @keyframes shot animation to create a laser effect. The background gradient transitions from 0% to 100% and back to 0%, creating a flashing effect. The background-position property is used to animate the gradient along the x-axis. Please give this updated code a try, and let me know if it now displays the desired laser effect.

motherfucka don't show any effekts, not sure. you need to fix that ASAP , wanna shot some lazors!

I apologize for the frustration caused. Let’s try a different approach to creating the laser effect. Here’s the updated 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; } .laser { position: absolute; height: 100%; width: 100px; background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2)); animation: laserShot 2s cubic-bezier(0, 0.23, 0.63, 0.98) infinite; transform: translateX(-100%); } @keyframes laserShot { 0% { transform: translateX(-100%); } 100% { transform: translateX(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.innerHTML = ‘<span class=“laser”></span>█’; 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); } selection.removeAllRanges(); selection.addRange(range); setCaretToEnd(); } } textarea.addEventListener(‘keydown’, handleKeyPress); </script> </body> </html> In this updated code, we add a nested “laser” span element inside the highlightedLine span. The laser span has a background gradient representing the laser effect. We animate the laser span using the laserShot animation, which translates it from -100% to 100% along the x-axis, creating the laser shooting effect. Please give this updated code a try, and let me know if it now displays the desired laser animation effect when pressing Enter.

at this line "highlightedLine.innerHTML = '<span class=' laser '></span>█';" it screams that "SyntaxError: unexpected token: string literal". try remodify it but without any backticks in template literals, because chats cannot handle that motherfacka.