`data/artifacts/0cb3fc06b069/hermes3-8b.html`

106 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle Text</title>
    <style>
        body {
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="400"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        let particles = [];
        const numParticles = 1000;
        const word = 'HELLO WORLD';

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                if (this.size > 0) {
                    this.size -= 0.03;
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${this.size})`;
                ctx.fill();
            }
        }

        function createParticles(word) {
            const wordsWidth = canvas.measureText(word).width;

            for (let i = 0; i < numParticles; i++) {
                const x = Math.random() * (canvas.width - wordsWidth);
                const y = Math.random() * canvas.height;
                particles.push(new Particle(x, y));
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].draw();
                particles[i].update();

                if (particles[i].size <= 0) {
                    particles.splice(i, 1);
                    i--;
                }
            }

            if (particles.length < numParticles) {
                createParticles(word);
            }
        }

        function writeWord() {
            ctx.font = "60px Arial";
            ctx.fillStyle = "#fff";
            ctx.textAlign = "center";
            ctx.fillText(word, canvas.width / 2, canvas.height / 2);

            particles = [];
        }

        document.onmousemove = (e) => {
            if (!particles.length && !canvas.children.length) {
                writeWord();
            }
        };

        setInterval(draw, 10);
    </script>
</body>
</html>