Hej, mam takie pliki do telepromptera

<html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teleprompter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="teleprompter" id="teleprompter">
        <p id="text"></p>
    </div>
    
    <div class="settings">
        <label for="speed">Speed (px/s):</label>
        <input type="number" id="speed" value="1" min="1" max="10">
        
        <label for="fontSize">Font Size (px):</label>
        <input type="number" id="fontSize" value="30" min="10" max="100">
        
        <label for="fontColor">Font Color:</label>
        <input type="color" id="fontColor" value="#ffffff">
        
        <label for="bgColor">Background Color:</label>
        <input type="color" id="bgColor" value="#000000">
        
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
    </div>
    
    <div class="input-area">
        <textarea id="textInput" placeholder="Paste your text here..." rows="10"></textarea>
    </div>

    <script src="script.js"></script>
</body>
</html>


<css>

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align items to the top */
    height: 100vh;
    background-color: #000; /* Dark background */
}

.teleprompter {
    overflow: hidden;
    white-space: nowrap;
    position: fixed; /* Fixed position at the top */
    top: 0; /* Align to the top of the page */
    width: 100%;
    height: 50px; /* Fixed height for the teleprompter */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000; /* Dark background for teleprompter */
    z-index: 100; /* Ensure it is above other elements */
}

.teleprompter p {
    margin: 0;
    position: absolute;
    will-change: transform;
    color: #ffffff; /* Default white text color */
    font-size: 30px; /* Default font size */
}

.settings {
    position: absolute;
    top: 60px; /* Adjusted to be below the teleprompter */
    left: 10px;
    z-index: 10;
    color: #fff; /* White text for settings */
}

.input-area {
    margin: 20px; /* Margin for the input area */
}

textarea {
    width: 300px;
    font-size: 16px;
}

 <JS>
let speed = 1; // Ustawiona prędkość przewijania
let fontSize = 30;
let fontColor = "#ffffff"; // Domyślny kolor tekstu
let bgColor = "#000000"; // Domyślny kolor tła
let isScrolling = false;
let scrollInterval;

const teleprompter = document.getElementById('teleprompter');
const textElement = document.getElementById('text');
const textInput = document.getElementById('textInput');

document.getElementById('speed').addEventListener('input', (e) => {
    speed = parseInt(e.target.value);
});

document.getElementById('fontSize').addEventListener('input', (e) => {
    fontSize = parseInt(e.target.value);
    textElement.style.fontSize = fontSize + 'px';
});

document.getElementById('fontColor').addEventListener('input', (e) => {
    fontColor = e.target.value;
    textElement.style.color = fontColor;
});

document.getElementById('bgColor').addEventListener('input', (e) => {
    bgColor = e.target.value;
    teleprompter.style.backgroundColor = bgColor;
});

document.getElementById('start').addEventListener('click', () => {
    const inputText = textInput.value.trim();
    if (inputText) {
        textElement.textContent = inputText; // Ustaw tekst do wyświetlenia
        textElement.style.color = fontColor; // Ustaw kolor tekstu
        textElement.style.fontSize = fontSize + 'px'; // Ustaw rozmiar czcionki
        isScrolling = true; // Ustaw przewijanie na true

        // Ustaw początkową pozycję tekstu na lewo od ekranu
        let position = window.innerWidth; // Rozpocznij od prawej krawędzi ekranu
        textElement.style.transform = `translateX(${position}px)`;

        // Rozpocznij przewijanie
        scrollText(); 
    } else {
        alert("Proszę wprowadzić tekst do wyświetlenia.");
    }
});

document.getElementById('stop').addEventListener('click', () => {
    isScrolling = false; // Zatrzymaj przewijanie
    clearInterval(scrollInterval); // Wyczyść interwał
});

function scrollText() {
    const textWidth = textElement.offsetWidth; // Uzyskaj szerokość tekstu
    let position = window.innerWidth; // Rozpocznij od prawej krawędzi ekranu

    // Ustaw początkową pozycję tekstu
    textElement.style.transform = `translateX(${position}px)`;

    scrollInterval = setInterval(() => {
        if (isScrolling) {
            position -= speed; // Przesuń tekst w lewo
            if (position < -textWidth) {
                position = window.innerWidth; // Zresetuj pozycję, jeśli tekst zniknie z ekranu
            }
            textElement.style.transform = `translateX(${position}px)`; // Zaktualizuj pozycję
        }
    }, 1000 / 60); // 60 FPS
}

Niestety tekst nie wyświetla się na ekranie od początku. jest ucięty. Czy możesz to poprawić?