website/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>particulab - Customizable Particle System</title>
    <meta name="description" content="particulab is a library to create amazing particle backgrounds with a fully customizable particle system.">
    <meta name="keywords" content="particulab, particle system, particle engine, particle library, JavaScript particle system, customizable particles, CSS particles, CSS background, background animation">
    <meta property="og:title" content="particulab - Customizable Particle System">
    <meta property="og:description" content="particulab is a library to create amazing particle backgrounds with a fully customizable particle system.">
    <meta property="og:image" content="https://aneks1.github.io/particulab/assets/screenshot.jpg">
    <meta property="og:url" content="https://aneks1.github.io/particulab/">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>


    <canvas width="1600" height="900" id="container"></canvas>

    <div class="panel_wrapper">
        <div class="panel">
            <h1>particulab</h1>
            <p>Library to create amazing particle backgrounds with a fully customizable particle system.</p>
            <a class="btn" href="https://github.com/Aneks1/particulab">
                <span>Github</span>
            </a>
            <a class="btn" href="https://www.npmjs.com/package/particulab">
                <span>npm</span>
            </a>
        </div>
    </div>

    <div id="fps">0 FPS</div>
    <div id="particles">0 Particles</div>

    <script src="./js/particulab.umd.js"></script>
    <script src="./js/index.js"></script>
    <script defer>
        const canvas = document.getElementById('container')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        const system = new particulab.ParticleSystem(canvas, { canvasSize: { x: 1600, y: 900 }})
        system.amount = 100
        system.size = particulab.range(15, 25)
        system.life = particulab.range(5, 10)
        system.speed = { x: particulab.range(-2, 2), y: particulab.range(-2, 2) }
        system.colors.push(new particulab.HEX("ffffff"))
        system.colors.push(new particulab.RGBA(255, 255, 0, 1))
        system.opacity = particulab.range(50, 100)
        system.fadeIn = { duration: 1, opacity: 0, scaleFactor: 0.5 }
        system.fadeOut = { duration: 2, opacity: 0, scaleFactor: 2 }
        system.shapes.push('star')
        system.shapes.push(new particulab.ParticleImage('assets/Normal.webp'))
        system.init()

        const count = document.getElementById('particles')
        function updateCount(currentTime) {
            count.innerText = system.particles.size + ' Particles'
            requestAnimationFrame(updateCount)
        }

        requestAnimationFrame(updateCount)
    </script>
</body>
</html>