<div id="matrix-container">

    <canvas id="matrix"></canvas>

</div>

<style>

    /* Styl tylko dla ramki */

    #matrix-container {

        width: 500px; /* Szerokość ramki */

        height: 300px; /* Wysokość ramki */

        border: 2px solid #0f0; /* Zielona ramka */

        overflow: hidden; /* Ukrycie elementów wychodzących poza ramkę */

        position: relative;

        margin: 20px auto; /* Wyśrodkowanie ramki */

    }

    canvas {

        display: block;

        position: absolute;

        top: 0;

        left: 0;

    }

</style>

<script>

    const container = document.getElementById('matrix-container');

    const canvas = document.getElementById('matrix');

    const ctx = canvas.getContext('2d');

    // Rozmiar canvas

    function resizeCanvas() {

        canvas.width = container.offsetWidth; // Dostosowanie szerokości do kontenera

        canvas.height = container.offsetHeight; // Dostosowanie wysokości do kontenera

        columnCount = Math.floor(canvas.width / fontSizeMax);

        columnDrops = Array(columnCount).fill(1);

        columnFontSizes = Array.from({ length: columnCount }, () => randomFontSize());

        columnSpeeds = Array.from({ length: columnCount }, () => randomSpeed());

    }

    // Znaki deszczu (katakana + cyfry + znaki specjalne)

    const matrixChars = abcdefghijklmnoprz

    const fontSizeMin = 12;

    const fontSizeMax = 20;

    let columnCount = Math.floor(canvas.width / fontSizeMax);

    let columnDrops = Array(columnCount).fill(1);

    let columnFontSizes = Array.from({ length: columnCount }, () => randomFontSize());

    let columnSpeeds = Array.from({ length: columnCount }, () => randomSpeed());

    let globalSpeedMultiplier = 1;

    // Funkcja generująca losowy rozmiar czcionki

    function randomFontSize() {

        return Math.random() * (fontSizeMax - fontSizeMin) + fontSizeMin;

    }

    // Funkcja generująca losową prędkość opadania

    function randomSpeed() {

        return Math.random() * 1 + 0.5; // Zakres prędkości: 0.5–1.5

    }

    // Funkcja rysująca deszcz

    function drawMatrix() {

        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < columnCount; i++) {

            const fontSize = columnFontSizes[i];

            const text = matrixChars[Math.floor(Math.random() * matrixChars.length)];

            ctx.font = `${fontSize}px monospace`;

            ctx.fillStyle = '#0f0';

            ctx.fillText(text, i * fontSizeMax, columnDrops[i] * fontSize);

            if (columnDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {

                columnDrops[i] = 0; // Reset pozycji

                columnFontSizes[i] = randomFontSize(); // Zmiana rozmiaru czcionki

                columnSpeeds[i] = randomSpeed(); // Zmiana prędkości

            }

            columnDrops[i] += columnSpeeds[i] * globalSpeedMultiplier;

        }

    }

    // Nasłuchiwanie zmiany rozmiaru ramki

    window.addEventListener('resize', resizeCanvas);

    // Uruchamianie animacji

    function startAnimation() {

        resizeCanvas(); // Inicjalizacja rozmiarów canvas

        setInterval(drawMatrix, 50); // Animacja

    }

    startAnimation();

</script>