particles.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Animated Background</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

    <div id="particles-js"></div>
    <div class="content">
        <h1>Meu Site com Animação de Fundo</h1>
        <p>Bem-vindo ao meu site incrível com uma animação de fundo!</p>
    </div>
    <script>
        // script.js
        particlesJS("particles-js", {
            particles: {
                number: {
                    value: 100,
                },
                color: {
                    value: "#00ccff",
                },
                shape: {
                    type: "circle",
                },
                opacity: {
                    value: 0.6,
                    random: true,
                },
                size: {
                    value: 4,
                },
                line_linked: {
                    enable: false,
                },
                move: {
                    enable: true,
                    speed: 2,
                },
            },
        });

    </script>
</body>

</html>