Spaces:
Running
Running
File size: 2,809 Bytes
d1abf67 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
class ParticleBackground extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
<canvas id="particles-canvas"></canvas>
`;
const canvas = this.shadowRoot.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Particle system
const particles = [];
const particleCount = Math.floor(window.innerWidth * window.innerHeight / 10000);
const colors = ['rgba(14, 165, 233, 0.6)', 'rgba(124, 58, 237, 0.6)', 'rgba(255, 255, 255, 0.8)'];
// Create particles
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 3 + 1,
speedX: Math.random() * 1 - 0.5,
speedY: Math.random() * 1 - 0.5,
color: colors[Math.floor(Math.random() * colors.length)]
});
}
// Animation loop
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update and draw particles
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
// Update position
p.x += p.speedX;
p.y += p.speedY;
// Bounce off edges
if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
// Draw particle
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.fill();
// Draw connections
for (let j = i + 1; j < particles.length; j++) {
const p2 = particles[j];
const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
if (distance < 100) {
ctx.beginPath();
ctx.strokeStyle = `rgba(200, 200, 255, ${1 - distance/100})`;
ctx.lineWidth = 0.5;
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
}
requestAnimationFrame(animate);
};
// Handle resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
animate();
}
}
customElements.define('particle-background', ParticleBackground); |