Particles effect using the html css and js

` Interactive Particle System * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; overflow: hidden; background-color: #0a0a0a; height: 100vh; display: flex; justify-content: center; align-items: center; color: white; } #canvas { position: fixed; top: 0; left: 0; z-index: 1; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; pointer-events: none; } .title { font-size: 2.5rem; font-weight: bold; text-shadow: 0 0 10px rgba(139, 92, 246, 0.8); color: #8b5cf6; opacity: 0; transition: opacity 2s ease; margin-bottom: 20px; text-align: center; } .subtitle { font-size: 1.2rem; opacity: 0; transition: opacity 2s ease; text-align: center; max-width: 80%; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } .cta { position: absolute; bottom: 5%; font-size: 1.4rem; font-weight: bold; color: #8b5cf6; opacity: 0; transition: opacity 1s ease; text-align: center; z-index: 5; width: 100%; text-shadow: 0 0 10px rgba(139, 92, 246, 0.8); } .overlay-touch { position: absolute; width: 100%; height: 100%; z-index: 10; opacity: 0; pointer-events: all; cursor: pointer; } Double tap to create particle explosions // Canvas setup const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Animation variables let particles = []; let connections = []; let animationStage = 0; let lastTime = 0; let mouseX = 0, mouseY = 0; let isUserInteracting = false; let isFirstTouch = true; // DOM elements const title = document.querySelector('.title'); const subtitle = document.querySelector('.subtitle'); const cta = document.querySelector('.cta'); const touchOverlay = document.querySelector('.overlay-touch'); // Colors const colors = [ '#8b5cf6', // Purple '#3b82f6', // Blue '#ec4899', // Pink '#10b981', // Green '#f59e0b' // Amber ]; // Particle class class Particle { constructor(x, y, color, size = 3, speedFactor = 1, fixed = false) { this.x = x; this.y = y; this.size = size; this.color = color; this.baseX = x; this.baseY = y; this.density = (Math.random() * 30) + 1; this.speedFactor = speedFactor; this.fixed = fixed; this.vx = (Math.random() - 0.5) * 2; this.vy = (Math.random() - 0.5) * 2; this.friction = 0.95; this.life = 1; this.decay = Math.random() * 0.01 + 0.001; this.maxSize = size; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size * this.life, 0, Math.PI * 2); ctx.closePath(); // Create gradient for particle const gradient = ctx.createRadialGradient( this.x, this.y, 0, this.x, this.y, this.size * this.life ); gradient.addColorStop(0, this.color); gradient.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = gradient; ctx.fill(); } update() { if (this.fixed) return; // Apply velocity this.x += this.vx * this.speedFactor; this.y += this.vy * this.speedFactor; // Apply friction this.vx = this.friction; this.vy = this.friction; // Apply gravity (subtle pull downward) this.vy += 0.02 * this.speedFactor; // Boundary checks with bounce effect if (this.x &lt; this.size) { this.x = this.size; this.vx = -0.8; } if (this.x &gt; canvas.width - this.size) { this.x = canvas.width - this.size; this.vx = -0.8; } if (this.y &lt; this.size) { this.y = this.size; this.vy = -0.8; } if (this.y &gt; canvas.height - this.size) { this.y = canvas.height - this.size; this.vy = -0.8; } // Mouse interaction if (isUserInteracting) { const dx = mouseX - this.x; const dy = mouseY - this.y; const distance = Math.sqrt(dx * dx + dy * dy); const forceDirectionX = dx / distance; const forceDirectionY = dy / distance; // Calculate force (stronger when closer) const maxDistance = 150; const force = (maxDistance - Math.min(maxDistance, distance)) / 10; if (distance &lt; maxDistance) { this.vx += forceDirectionX * force / this.density; this.vy += forceDirectio

Apr 5, 2025 - 11:57

Particles effect using the html css and js

`

Interactive Particle System

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

    body {

        font-family: 'Arial', sans-serif;

        overflow: hidden;

        background-color: #0a0a0a;

        height: 100vh;

        display: flex;

        justify-content: center;

        align-items: center;

        color: white;

    }

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    pointer-events: none;
}

.title {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
    color: #8b5cf6;
    opacity: 0;
    transition: opacity 2s ease;
    margin-bottom: 20px;
    text-align: center;
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 2s ease;
    text-align: center;
    max-width: 80%;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.cta {
    position: absolute;
    bottom: 5%;
    font-size: 1.4rem;
    font-weight: bold;
    color: #8b5cf6;
    opacity: 0;
    transition: opacity 1s ease;
    text-align: center;
    z-index: 5;
    width: 100%;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
}

.overlay-touch {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    pointer-events: all;
    cursor: pointer;
}

Double tap to create particle explosions