No this is not what i wanted. please make the background one style, i want it to be small particles that becomes the shapes i asked you to make earlier.

index.html

@@ -9,11 +9,8 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.cells.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>
-    <style>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>
+<style>
         @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
         body {
             font-family: 'Space Grotesk', sans-serif;
@@ -207,94 +204,84 @@
             asciiContainer.innerHTML = `<div class="ascii-art">${asciiPatterns[currentPattern]}</div>`;
             currentPattern = (currentPattern + 1) % asciiPatterns.length;
         }
-        // Initialize with morphing background effects
-        let currentEffect = 'cells';
-        
-        function initializeVantaEffect(effect) {
-            if (window.vantaEffect) {
-                window.vantaEffect.destroy();
-            }
+        // Initialize dots background with shape morphing
+        window.vantaEffect = VANTA.DOTS({
+            el: "#vanta-background",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            color: 0x3b82f6,
+            color2: 0xa855f7,
+            size: 2.00,
+            spacing: 40.00,
+            backgroundAlpha: 0
+        });
+
+        // Shape definitions for particles to form
+        const shapes = {
+            building: [
+                { x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 },
+                { x: 0.5, y: 0.7 }, { x: 0.5, y: 0.9 },
+                { x: 0.3, y: 0.3 }, { x: 0.3, y: 0.7 },
+                { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 },
+                { x: 0.4, y: 0.4 }, { x: 0.6, y: 0.4 }, { x: 0.6, y: 0.6 }, { x: 0.4, y: 0.6 }, { x: 0.4, y: 0.4 },
+                { x: 0.4, y: 0.6 }, { x: 0.6, y: 0.6 }
+            ],
+            helicopter: [
+                { x: 0.5, y: 0.3 },
+                { x: 0.4, y: 0.4 }, { x: 0.6, y: 0.4 },
+                { x: 0.35, y: 0.5 }, { x: 0.65, y: 0.5 },
+                { x: 0.4, y: 0.6 }, { x: 0.6, y: 0.6 },
+                { x: 0.3, y: 0.7 }, { x: 0.7, y: 0.7 },
+                { x: 0.45, y: 0.8 }, { x: 0.55, y: 0.8 }
+            ],
+            cityscape: [
+                { x: 0.1, y: 0.4 }, { x: 0.2, y: 0.3 }, { x: 0.3, y: 0.5 }, { x: 0.4, y: 0.4 }, { x: 0.5, y: 0.3 }, { x: 0.6, y: 0.4 }, { x: 0.7, y: 0.3 }, { x: 0.8, y: 0.4 }, { x: 0.9, y: 0.3 },
+                { x: 0.1, y: 0.7 }, { x: 0.2, y: 0.6 }, { x: 0.3, y: 0.7 }, { x: 0.4, y: 0.6 }, { x: 0.5, y: 0.7 }, { x: 0.6, y: 0.6 }, { x: 0.7, y: 0.7 }, { x: 0.8, y: 0.6 }, { x: 0.9, y: 0.7 },
+                { x: 0.15, y: 0.4 }, { x: 0.15, y: 0.7 },
+                { x: 0.25, y: 0.3 }, { x: 0.25, y: 0.6 },
+                { x: 0.35, y: 0.5 }, { x: 0.35, y: 0.7 },
+                { x: 0.45, y: 0.3 }, { x: 0.45, y: 0.7 },
+                { x: 0.55, y: 0.3 }, { x: 0.55, y: 0.7 },
+                { x: 0.65, y: 0.3 }, { x: 0.65, y: 0.7 },
+                { x: 0.75, y: 0.3 }, { x: 0.75, y: 0.7 },
+                { x: 0.85, y: 0.3 }, { x: 0.85, y: 0.7 }
+            ],
+            circuit: [
+                { x: 0.2, y: 0.2 }, { x: 0.8, y: 0.2 }, { x: 0.8, y: 0.8 }, { x: 0.2, y: 0.8 }, { x: 0.2, y: 0.2 },
+                { x: 0.4, y: 0.4 }, { x: 0.6, y: 4 }, { x: 0.6, y: 0.6 }, { x: 0.4, y: 0.6 }, { x: 0.4, y: 0.4 },
+                { x: 0.5, y: 0.2 }, { x: 0.5, y: 0.8 },
+                { x: 0.2, y: 0.5 }, { x: 0.8, y: 0.5 },
+                { x: 0.3, y: 0.3 }, { x: 0.7, y: 0.3 }, { x: 0.7, y: 0.7 }, { x: 0.3, y: 0.7 },
+                { x: 0.2, y: 0.2 }, { x: 0.8, y: 0.2 }, { x: 0.8, y: 0.8 }, { x: 0.2, y: 0.8 }
+            ]
+        };
+
+        let currentShape = 'building';
+        let shapeIndex = 0;
+        const shapeNames = Object.keys(shapes);
+
+        function morphShape() {
+            currentShape = shapeNames[shapeIndex];
+            shapeIndex = (shapeIndex + 1) % shapeNames.length;
             
-            switch(effect) {
-                case 'globe':
-                    window.vantaEffect = VANTA.GLOBE({
-                        el: "#vanta-background",
-                        mouseControls: true,
-                        touchControls: true,
-                        gyroControls: false,
-                        minHeight: 200.00,
-                        minWidth: 200.00,
-                        scale: 1.00,
-                        color: 0x3b82f6,
-                        backgroundColor: 0x0f172a,
-                        size: 1.00
-                    });
-                    break;
-                case 'waves':
-                    window.vantaEffect = VANTA.WAVES({
-                        el: "#vanta-background",
-                        mouseControls: true,
-                        touchControls: true,
-                        gyroControls: false,
-                        minHeight: 200.00,
-                        minWidth: 200.00,
-                        scale: 1.00,
-                        color: 0x10b981,
-                        shininess: 50.00,
-                        waveHeight: 20.00,
-                        waveSpeed: 0.50,
-                        zoom: 0.75
-                    });
-                    break;
-                case 'dots':
-                    window.vantaEffect = VANTA.DOTS({
-                        el: "#vanta-background",
-                        mouseControls: true,
-                        touchControls: true,
-                        touchControls: true,
-                        gyroControls: false,
-                        minHeight: 200.00,
-                        minWidth: 200.00,
-                        scale: 1.00,
-                        color: 0xa855f7,
-                        color2: 0xec4899,
-                        size: 3.00,
-                        spacing: 40.00
-                    });
-                    break;
-                case 'cells':
-                default:
-                    window.vantaEffect = VANTA.CELLS({
-                        el: "#vanta-background",
-                        mouseControls: true,
-                        touchControls: true,
-                        gyroControls: false,
-                        minHeight: 200.00,
-                        minWidth: 200.00,
-                        scale: 1.00,
-                        color1: 0x1e293b,
-                        color2: 0x475569,
-                        size: 1.50,
-                        speed: 1.20
-                    });
-                    break;
+            // Update the dots positions to form the new shape
+            if (window.vantaEffect && window.vantaEffect.setOptions) {
+                const targetPositions = shapes[currentShape];
+                window.vantaEffect.setOptions({
+                    size: 2.5,
+                    spacing: 35,
+                    showLines: true,
+                    points: targetPositions
+                });
             }
         }
-        
-        // Start with cells effect
-        initializeVantaEffect('cells');
-        
-        // Morph between different background effects
-        const effects = ['cells', 'globe', 'waves', 'dots'];
-        let effectIndex = 0;
-        
-        function morphBackground() {
-            effectIndex = (effectIndex + 1) % effects.length;
-            initializeVantaEffect(effects[effectIndex]);
-        }
-        
-        // Change background effect every 8 seconds
-        setInterval(morphBackground, 8000);
+
+        // Change shape every 6 seconds
+        setInterval(morphShape, 6000);
 // Initialize countdown to January 1, 2026 at 12:00
         const countdownDate = new Date('January 1, 2026 12:00:00');
 function updateCountdown() {