<canvas></canvas>

body {
    margin: 0;
    overflow: hidden;
}

canvas {
    image-rendering: pixelated;
}

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const text = '¯\\_(ツ)_/¯';
const count = 3;
let height = 1.5;
let time = 0;
let previous = null;

const update = () => {
    for (let index = 0; index < count; index++) {
        context.fillStyle = 'rgba(255, 255, 255, 0.01)';
        context.fillRect(0, 0, canvas.width, canvas.height);

        const offset = time / 2;
        const angle = (time / 2000) % (Math.PI * 2);
        const toRight = !(Math.floor(offset / canvas.width) % 2);
        const x = toRight ? offset % canvas.width : canvas.width - offset % canvas.width;
        const y = canvas.height - Math.abs(Math.sin(angle)) * (canvas.height / height);

        context.fillStyle = '#ffffff';
        context.strokeStyle = `hsl(${(time / 50) % 360}, 65%, 50%)`;

        context.fillText(text, x, y);
        context.strokeText(text, x, y);

        const current = Math.floor(angle / Math.PI) % 2;
        if (previous !== current) {
            height = Math.random() + 1.2;
        }
        previous = current;

        time += 5;
    }
    
    requestAnimationFrame(update);
};

const init = () => {
    const unit = Math.min(innerWidth, innerHeight) / 100;
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    context.font = `${unit * 20}px Arial`;
    context.textBaseline = 'middle';
    context.textAlign = 'center';
    context.lineWidth = unit / 2;
    
    requestAnimationFrame(update);
};

window.addEventListener('DOMContentLoaded', init);