update particles and feature cards

js/main.js

@@ -33,28 +33,58 @@ sections.forEach(section => {
     observer.observe(section);
 });
 
-function createParticle() {
+const PARTICLE_POOL_SIZE = 50;
+const particlePool = [];
+const activeParticles = new Set();
+
+function createParticleElement() {
     const particle = document.createElement('div');
     particle.classList.add('particle');
     if (Math.random() > 0.6) particle.classList.add('large');
+    return particle;
+}
+
+function initializeParticlePool() {
+    for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
+        particlePool.push(createParticleElement());
+    }
+}
+
+function resetParticle(particle) {
     particle.style.left = `${Math.random() * 100}%`;
     particle.style.top = `${Math.random() * 100}%`;
     particle.style.animationDelay = `${Math.random() * 8}s`;
     particle.style.animationDuration = `${8 + Math.random() * 6}s`;
-    document.body.appendChild(particle);
+    particle.classList.remove('fade-out');
-    // Remove particle with fade-out effect
+    return particle;
+}
+
+function spawnParticle() {
+    if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
+
+    const particle = resetParticle(particlePool.pop());
+    if (!particle.parentNode) document.body.appendChild(particle);
+    activeParticles.add(particle);
+
     setTimeout(() => {
         particle.classList.add('fade-out');
-        // Wait for fade-out animation to complete before removing
+        setTimeout(() => {
-        setTimeout(() => particle.remove(), 500);
+            activeParticles.delete(particle);
+            particlePool.push(particle);
+        }, 500);
     }, 14000);
 }
 
-// Delay particle creation to ensure background renders
+function animate() {
+    if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
+    requestAnimationFrame(animate);
+}
+
+// Initialize and start
 setTimeout(() => {
-    // Create particles frequently
+    initializeParticlePool();
-    setInterval(createParticle, 75);
+    animate();
-}, 500); // 500ms delay
+}, 500);
 
 function throttle(fn, wait) {
     let lastTime = 0;

wiki/index.html

@@ -160,6 +160,14 @@
                     <h3 class="text-xl minecraft-font mb-3 text-teal-400">My-MC Realms!</h3>
                     <p class="text-sm opacity-90 leading-relaxed">Replace Realms with our custom server browser for easy access to your server!</p>
                 </div>
+                <div class="feature-card tilt-card">
+                    <h3 class="text-xl minecraft-font mb-3 text-teal-400">Automatic Bluemap URLs!</h3>
+                    <p class="text-sm opacity-90 leading-relaxed">Instantly access your Minecraft world in 3D! Right inside the browser.</p>
+                </div>
+                <div class="feature-card tilt-card">
+                    <h3 class="text-xl minecraft-font mb-3 text-teal-400">Resouces!</h3>
+                    <p class="text-sm opacity-90 leading-relaxed">By default we offer 6 GB of RAM and 6 Cores to game on!</p>
+                </div>
             </div>
         </section>