Spaces:

dhishooooom
/

space-pointer

Running

App Files Files Community

dhishooooom commited on Apr 17, 2025

Commit

a53d1ef

verified ·

1 Parent(s): f97861c

Add 2 files

Browse files

Files changed (2) hide show

index.html +575 -62
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,17 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cosmic Mouse Travel</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <style>
         body {
             overflow-x: hidden;
-            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
-            height: 100vh;
             margin: 0;
             perspective: 1000px;
             cursor: none;
         }
         .star {
@@ -22,43 +24,50 @@
             border-radius: 50%;
             animation: twinkle var(--duration) infinite ease-in-out;
             opacity: 0;
         }
         @keyframes twinkle {
-            0%, 100% { opacity: 0; transform: scale(0.5); }
             50% { opacity: var(--opacity); transform: scale(1); }
         }
         .comet {
-            position: absolute;
-            width: 6px;
-            height: 6px;
             border-radius: 50%;
-            background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(64,224,208,0.8));
-            box-shadow: 0 0 10px 2px rgba(64, 224, 208, 0.6);
             pointer-events: none;
-            z-index: 100;
         }
         .comet-tail {
-            position: absolute;
-            width: 100px;
-            height: 4px;
-            background: linear-gradient(90deg, rgba(64,224,208,0.8), transparent);
             border-radius: 50%;
             pointer-events: none;
-            z-index: 99;
             transform-origin: left center;
         }
         .galaxy {
             position: absolute;
-            width: 300px;
-            height: 300px;
             border-radius: 50%;
-            background: radial-gradient(circle at center, rgba(138, 43, 226, 0.2) 0%, transparent 70%);
-            filter: blur(20px);
-            animation: rotate 120s linear infinite;
         }
         @keyframes rotate {
@@ -69,78 +78,209 @@
         .planet {
             position: absolute;
             border-radius: 50%;
-            box-shadow: inset 0 0 20px rgba(255,255,255,0.2);
         }
         .scroll-text {
-            position: absolute;
-            bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
-            color: rgba(255,255,255,0.7);
             font-family: 'Arial', sans-serif;
             text-transform: uppercase;
-            letter-spacing: 2px;
-            font-size: 12px;
-            animation: pulse 2s infinite;
         }
         @keyframes pulse {
-            0%, 100% { opacity: 0.5; }
-            50% { opacity: 1; }
         }
         .depth-layer {
             position: absolute;
             width: 100%;
             height: 100%;
             top: 0;
             left: 0;
         }
     </style>
 </head>
 <body>
     <div class="depth-layer" id="far-stars"></div>
     <div class="depth-layer" id="mid-stars"></div>
     <div class="depth-layer" id="near-stars"></div>
-    <div class="galaxy" style="top: 30%; left: 20%;"></div>
-    <div class="galaxy" style="top: 70%; left: 80%;"></div>
-    <div class="comet" id="comet"></div>
-    <div class="comet-tail" id="comet-tail"></div>
     <div class="planet" id="planet1"></div>
     <div class="planet" id="planet2"></div>
-    <div class="scroll-text">Scroll to travel through space</div>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Create stars at different depth layers
-            createStars('far-stars', 100, 0.5, 1);
-            createStars('mid-stars', 200, 1, 2);
-            createStars('near-stars', 300, 1.5, 3);
             // Create planets
-            createPlanet('planet1', 80, 'linear-gradient(45deg, #4b6cb7, #182848)');
-            createPlanet('planet2', 120, 'linear-gradient(45deg, #c31432, #240b36)');
             // Mouse move effects
             document.addEventListener('mousemove', function(e) {
                 const comet = document.getElementById('comet');
                 const tail = document.getElementById('comet-tail');
                 // Calculate angle for tail direction
-                const prevX = parseFloat(comet.dataset.prevX) || e.clientX;
-                const prevY = parseFloat(comet.dataset.prevY) || e.clientY;
-                const angle = Math.atan2(e.clientY - prevY, e.clientX - prevX) * 180 / Math.PI;
-                // Update comet position with slight delay for smooth trailing
                 gsap.to(comet, {
-                    x: e.clientX,
-                    y: e.clientY,
-                    duration: 0.3,
-                    ease: "power2.out"
                 });
                 // Update tail position and rotation
@@ -148,13 +288,14 @@
                     x: e.clientX,
                     y: e.clientY,
                     rotation: angle,
-                    duration: 0.5,
                     ease: "power2.out"
                 });
-                // Store current position for next move
-                comet.dataset.prevX = e.clientX;
-                comet.dataset.prevY = e.clientY;
                 // Parallax effect for depth layers
                 const xOffset = (window.innerWidth / 2 - e.clientX) / 20;
@@ -163,28 +304,158 @@
                 document.getElementById('far-stars').style.transform = `translate(${xOffset * 0.3}px, ${yOffset * 0.3}px)`;
                 document.getElementById('mid-stars').style.transform = `translate(${xOffset * 0.6}px, ${yOffset * 0.6}px)`;
                 document.getElementById('near-stars').style.transform = `translate(${xOffset}px, ${yOffset}px)`;
             });
             // Scroll effects
             let scrollY = 0;
             window.addEventListener('scroll', function() {
                 scrollY = window.scrollY;
-                // Move stars based on scroll
-                document.getElementById('far-stars').style.transform = `translateY(${-scrollY * 0.2}px)`;
-                document.getElementById('mid-stars').style.transform = `translateY(${-scrollY * 0.5}px)`;
-                document.getElementById('near-stars').style.transform = `translateY(${-scrollY * 0.8}px)`;
-                // Scale planets based on scroll (simulating movement)
-                document.getElementById('planet1').style.transform = `translateY(${-scrollY * 0.3}px) scale(${1 + scrollY * 0.0005})`;
-                document.getElementById('planet2').style.transform = `translateY(${-scrollY * 0.5}px) scale(${1 + scrollY * 0.0008})`;
             });
-            // Window resize - reposition planets
-            window.addEventListener('resize', positionPlanets);
             positionPlanets();
         });
         function createStars(layerId, count, sizeMultiplier, speedMultiplier) {
             const layer = document.getElementById(layerId);
             for (let i = 0; i < count; i++) {
@@ -196,6 +467,7 @@
                 const opacity = Math.random() * 0.8 + 0.2;
                 const duration = (Math.random() * 5 + 3) / speedMultiplier;
                 const delay = Math.random() * 5;
                 // Apply styles
                 star.style.width = `${size}px`;
@@ -205,28 +477,269 @@
                 star.style.setProperty('--opacity', opacity);
                 star.style.setProperty('--duration', `${duration}s`);
                 star.style.animationDelay = `${delay}s`;
                 layer.appendChild(star);
             }
         }
-        function createPlanet(id, size, gradient) {
             const planet = document.getElementById(id);
             planet.style.width = `${size}px`;
             planet.style.height = `${size}px`;
             planet.style.background = gradient;
-            planet.style.filter = `drop-shadow(0 0 ${size/5}px rgba(255,255,255,0.3))`;
         }
         function positionPlanets() {
             const planet1 = document.getElementById('planet1');
             const planet2 = document.getElementById('planet2');
             planet1.style.left = `${window.innerWidth * 0.7}px`;
             planet1.style.top = `${window.innerHeight * 0.2}px`;
             planet2.style.left = `${window.innerWidth * 0.2}px`;
             planet2.style.top = `${window.innerHeight * 0.6}px`;
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dhishooooom/space-pointer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cosmic Odyssey</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
         body {
             overflow-x: hidden;
+            background: radial-gradient(ellipse at bottom, #0a0e1a 0%, #000000 100%);
+            height: 500vh; /* Increased for scroll effect */
             margin: 0;
             perspective: 1000px;
             cursor: none;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         .star {
             border-radius: 50%;
             animation: twinkle var(--duration) infinite ease-in-out;
             opacity: 0;
+            will-change: transform;
         }
         @keyframes twinkle {
+            0%, 100% { opacity: 0; transform: scale(0.3); }
             50% { opacity: var(--opacity); transform: scale(1); }
         }
         .comet {
+            position: fixed;
+            width: 10px;
+            height: 10px;
             border-radius: 50%;
+            background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(100,200,255,0.8) 70%);
+            box-shadow: 0 0 15px 5px rgba(100, 200, 255, 0.7);
             pointer-events: none;
+            z-index: 1000;
+            will-change: transform;
+            mix-blend-mode: screen;
         }
         .comet-tail {
+            position: fixed;
+            width: 150px;
+            height: 6px;
+            background: linear-gradient(90deg, rgba(100,200,255,0.9), transparent);
             border-radius: 50%;
             pointer-events: none;
+            z-index: 999;
             transform-origin: left center;
+            will-change: transform;
+            mix-blend-mode: screen;
         }
         .galaxy {
             position: absolute;
+            width: 400px;
+            height: 400px;
             border-radius: 50%;
+            background: radial-gradient(circle at center, rgba(138, 43, 226, 0.3) 0%, transparent 70%);
+            filter: blur(30px);
+            animation: rotate var(--speed) linear infinite;
+            will-change: transform;
+            mix-blend-mode: screen;
         }
         @keyframes rotate {
         .planet {
             position: absolute;
             border-radius: 50%;
+            box-shadow: inset 0 0 30px rgba(255,255,255,0.3), 0 0 50px rgba(255,255,255,0.2);
+            will-change: transform;
+            filter: drop-shadow(0 0 20px currentColor);
         }
         .scroll-text {
+            position: fixed;
+            bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
+            color: rgba(255,255,255,0.8);
             font-family: 'Arial', sans-serif;
             text-transform: uppercase;
+            letter-spacing: 3px;
+            font-size: 14px;
+            animation: pulse 3s infinite;
+            z-index: 1000;
+            text-shadow: 0 0 10px rgba(100,200,255,0.7);
         }
         @keyframes pulse {
+            0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
+            50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
         }
         .depth-layer {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            will-change: transform;
+        }
+        .nebula {
+            position: absolute;
+            width: 800px;
+            height: 800px;
+            border-radius: 50%;
+            filter: blur(80px);
+            opacity: 0.4;
+            mix-blend-mode: screen;
+            will-change: transform;
+        }
+        .constellation {
             position: absolute;
             width: 100%;
             height: 100%;
+        }
+        .constellation-line {
+            position: absolute;
+            height: 2px;
+            background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent);
+            transform-origin: left center;
+            will-change: transform;
+        }
+        .constellation-star {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: white;
+            box-shadow: 0 0 10px 2px white;
+            will-change: transform;
+        }
+        .black-hole {
+            position: absolute;
+            border-radius: 50%;
+            background: radial-gradient(circle, #000000 0%, #330066 70%);
+            box-shadow: inset 0 0 50px #000000, 0 0 100px #330066;
+            filter: blur(2px);
+            will-change: transform;
+        }
+        .black-hole-accretion {
+            position: absolute;
+            border-radius: 50%;
+            background: transparent;
+            border: 2px solid rgba(100,50,255,0.5);
+            animation: rotate-accretion 60s linear infinite;
+            will-change: transform;
+        }
+        @keyframes rotate-accretion {
+            from { transform: rotate(0deg) scale(1.1); }
+            to { transform: rotate(360deg) scale(1.1); }
+        }
+        .cosmic-text {
+            position: absolute;
+            color: rgba(255,255,255,0.8);
+            font-size: 24px;
+            text-transform: uppercase;
+            letter-spacing: 5px;
+            text-shadow: 0 0 15px rgba(100,200,255,0.7);
+            opacity: 0;
+            will-change: transform, opacity;
+        }
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            background: white;
+            will-change: transform;
+            mix-blend-mode: screen;
+        }
+        #threejs-container {
+            position: fixed;
             top: 0;
             left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.5;
         }
     </style>
 </head>
 <body>
+    <div id="threejs-container"></div>
     <div class="depth-layer" id="far-stars"></div>
     <div class="depth-layer" id="mid-stars"></div>
     <div class="depth-layer" id="near-stars"></div>
+    <div class="galaxy" style="top: 20%; left: 15%; --speed: 180s;"></div>
+    <div class="galaxy" style="top: 70%; left: 75%; --speed: 240s;"></div>
+    <div class="galaxy" style="top: 40%; left: 80%; --speed: 300s;"></div>
+    <div class="nebula" style="background: radial-gradient(circle, rgba(100,50,200,0.5) 0%, transparent 70%); top: 30%; left: 10%;"></div>
+    <div class="nebula" style="background: radial-gradient(circle, rgba(50,150,255,0.4) 0%, transparent 70%); top: 60%; left: 70%;"></div>
+    <div class="constellation" id="constellation1"></div>
+    <div class="constellation" id="constellation2"></div>
+    <div class="black-hole" id="black-hole1"></div>
+    <div class="black-hole-accretion" id="black-hole-accretion1"></div>
     <div class="planet" id="planet1"></div>
     <div class="planet" id="planet2"></div>
+    <div class="planet" id="planet3"></div>
+    <div class="cosmic-text" id="cosmic-text1">Explore the Cosmos</div>
+    <div class="cosmic-text" id="cosmic-text2">Infinite Possibilities</div>
+    <div class="comet" id="comet"></div>
+    <div class="comet-tail" id="comet-tail"></div>
+    <div class="scroll-text">Scroll to journey through the universe</div>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Three.js for background particles
+            initThreeJS();
             // Create stars at different depth layers
+            createStars('far-stars', 200, 0.5, 1);
+            createStars('mid-stars', 300, 1, 1.5);
+            createStars('near-stars', 400, 1.5, 2);
             // Create planets
+            createPlanet('planet1', 100, 'linear-gradient(45deg, #4b6cb7, #182848)', '#4b6cb7');
+            createPlanet('planet2', 150, 'linear-gradient(45deg, #c31432, #240b36)', '#c31432');
+            createPlanet('planet3', 80, 'linear-gradient(45deg, #3a7bd5, #00d2ff)', '#3a7bd5');
+            // Create constellations
+            createConstellation('constellation1', 5);
+            createConstellation('constellation2', 7);
+            // Create black hole
+            createBlackHole('black-hole1', 'black-hole-accretion1', 120);
+            // Position cosmic text
+            positionCosmicText();
             // Mouse move effects
+            let lastX = window.innerWidth / 2;
+            let lastY = window.innerHeight / 2;
+            let velocityX = 0;
+            let velocityY = 0;
             document.addEventListener('mousemove', function(e) {
                 const comet = document.getElementById('comet');
                 const tail = document.getElementById('comet-tail');
+                // Calculate velocity for smoother motion
+                velocityX = (e.clientX - lastX) * 0.3;
+                velocityY = (e.clientY - lastY) * 0.3;
+                lastX = e.clientX;
+                lastY = e.clientY;
                 // Calculate angle for tail direction
+                const angle = Math.atan2(velocityY, velocityX) * 180 / Math.PI;
+                // Update comet position with physics-based movement
                 gsap.to(comet, {
+                    x: `+=${velocityX}`,
+                    y: `+=${velocityY}`,
+                    duration: 0.5,
+                    ease: "power1.out"
                 });
                 // Update tail position and rotation
                     x: e.clientX,
                     y: e.clientY,
                     rotation: angle,
+                    duration: 0.7,
                     ease: "power2.out"
                 });
+                // Create particles along comet path
+                if (Math.random() > 0.7) {
+                    createParticle(e.clientX, e.clientY);
+                }
                 // Parallax effect for depth layers
                 const xOffset = (window.innerWidth / 2 - e.clientX) / 20;
                 document.getElementById('far-stars').style.transform = `translate(${xOffset * 0.3}px, ${yOffset * 0.3}px)`;
                 document.getElementById('mid-stars').style.transform = `translate(${xOffset * 0.6}px, ${yOffset * 0.6}px)`;
                 document.getElementById('near-stars').style.transform = `translate(${xOffset}px, ${yOffset}px)`;
+                // Interactive galaxy movement
+                const galaxies = document.querySelectorAll('.galaxy');
+                galaxies.forEach(galaxy => {
+                    const speed = parseFloat(getComputedStyle(galaxy).getPropertyValue('--speed')) || 120;
+                    gsap.to(galaxy, {
+                        x: xOffset * 0.2,
+                        y: yOffset * 0.2,
+                        duration: speed / 360,
+                        ease: "none"
+                    });
+                });
             });
             // Scroll effects
             let scrollY = 0;
+            let lastScrollY = 0;
+            let scrollVelocity = 0;
             window.addEventListener('scroll', function() {
+                lastScrollY = scrollY;
                 scrollY = window.scrollY;
+                scrollVelocity = scrollY - lastScrollY;
+                // Move stars based on scroll with velocity
+                document.getElementById('far-stars').style.transform = `translateY(${-scrollY * 0.1}px)`;
+                document.getElementById('mid-stars').style.transform = `translateY(${-scrollY * 0.3}px)`;
+                document.getElementById('near-stars').style.transform = `translateY(${-scrollY * 0.6}px)`;
+                // Scale and move planets based on scroll (simulating movement through space)
+                const scrollProgress = scrollY / (document.body.scrollHeight - window.innerHeight);
+                document.getElementById('planet1').style.transform = `
+                    translate(${scrollY * 0.1}px, ${-scrollY * 0.3}px)
+                    scale(${1 + scrollY * 0.0003})
+                    rotate(${scrollY * 0.1}deg)
+                `;
+                document.getElementById('planet2').style.transform = `
+                    translate(${-scrollY * 0.2}px, ${-scrollY * 0.4}px)
+                    scale(${1 + scrollY * 0.0005})
+                    rotate(${-scrollY * 0.15}deg)
+                `;
+                document.getElementById('planet3').style.transform = `
+                    translate(${scrollY * 0.15}px, ${-scrollY * 0.2}px)
+                    scale(${1 + scrollY * 0.0004})
+                    rotate(${scrollY * 0.2}deg)
+                `;
+                // Black hole interaction
+                const blackHole = document.getElementById('black-hole1');
+                const blackHoleRect = blackHole.getBoundingClientRect();
+                const blackHoleX = blackHoleRect.left + blackHoleRect.width / 2;
+                const blackHoleY = blackHoleRect.top + blackHoleRect.height / 2;
+                // Animate cosmic text based on scroll
+                gsap.to('#cosmic-text1', {
+                    y: -scrollY * 0.5,
+                    opacity: 1 - Math.min(scrollY / 500, 1),
+                    duration: 0.5
+                });
+                gsap.to('#cosmic-text2', {
+                    y: -scrollY * 0.5,
+                    opacity: Math.max(0, (scrollY - 800) / 200),
+                    duration: 0.5
+                });
+                // Create scroll particles
+                if (Math.abs(scrollVelocity) > 5 && Math.random() > 0.7) {
+                    createParticle(
+                        Math.random() * window.innerWidth,
+                        Math.random() * window.innerHeight,
+                        scrollVelocity > 0 ? 'down' : 'up'
+                    );
+                }
+            });
+            // Window resize - reposition elements
+            window.addEventListener('resize', function() {
+                positionPlanets();
+                positionBlackHole();
+                positionCosmicText();
             });
+            // Initial positioning
             positionPlanets();
+            positionBlackHole();
+            positionCosmicText();
+            // Animate cosmic text on load
+            gsap.from('#cosmic-text1', {
+                y: 100,
+                opacity: 0,
+                duration: 2,
+                ease: "power2.out"
+            });
+            // Create occasional shooting stars
+            setInterval(createShootingStar, 3000);
         });
+        function initThreeJS() {
+            const container = document.getElementById('threejs-container');
+            const scene = new THREE.Scene();
+            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            const renderer = new THREE.WebGLRenderer({ alpha: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            container.appendChild(renderer.domElement);
+            // Create particles
+            const particlesGeometry = new THREE.BufferGeometry();
+            const particlesCnt = 2000;
+            const posArray = new Float32Array(particlesCnt * 3);
+            for(let i = 0; i < particlesCnt * 3; i++) {
+                posArray[i] = (Math.random() - 0.5) * 10;
+            }
+            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+            const particlesMaterial = new THREE.PointsMaterial({
+                size: 0.02,
+                color: 0xffffff,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending
+            });
+            const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
+            scene.add(particlesMesh);
+            camera.position.z = 3;
+            function animate() {
+                requestAnimationFrame(animate);
+                particlesMesh.rotation.x += 0.0005;
+                particlesMesh.rotation.y += 0.0005;
+                renderer.render(scene, camera);
+            }
+            animate();
+            window.addEventListener('resize', function() {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+        }
         function createStars(layerId, count, sizeMultiplier, speedMultiplier) {
             const layer = document.getElementById(layerId);
             for (let i = 0; i < count; i++) {
                 const opacity = Math.random() * 0.8 + 0.2;
                 const duration = (Math.random() * 5 + 3) / speedMultiplier;
                 const delay = Math.random() * 5;
+                const colorHue = Math.random() * 60 + 180; // Blue to purple range
                 // Apply styles
                 star.style.width = `${size}px`;
                 star.style.setProperty('--opacity', opacity);
                 star.style.setProperty('--duration', `${duration}s`);
                 star.style.animationDelay = `${delay}s`;
+                star.style.background = `hsl(${colorHue}, 100%, ${Math.random() * 30 + 70}%)`;
                 layer.appendChild(star);
             }
         }
+        function createPlanet(id, size, gradient, glowColor) {
             const planet = document.getElementById(id);
             planet.style.width = `${size}px`;
             planet.style.height = `${size}px`;
             planet.style.background = gradient;
+            planet.style.boxShadow = `inset 0 0 ${size/3}px rgba(255,255,255,0.3), 0 0 ${size}px ${glowColor}`;
+            planet.style.filter = `drop-shadow(0 0 ${size/3}px ${glowColor})`;
         }
         function positionPlanets() {
             const planet1 = document.getElementById('planet1');
             const planet2 = document.getElementById('planet2');
+            const planet3 = document.getElementById('planet3');
             planet1.style.left = `${window.innerWidth * 0.7}px`;
             planet1.style.top = `${window.innerHeight * 0.2}px`;
             planet2.style.left = `${window.innerWidth * 0.2}px`;
             planet2.style.top = `${window.innerHeight * 0.6}px`;
+            planet3.style.left = `${window.innerWidth * 0.8}px`;
+            planet3.style.top = `${window.innerHeight * 0.7}px`;
+        }
+        function createConstellation(id, starCount) {
+            const constellation = document.getElementById(id);
+            constellation.innerHTML = '';
+            const stars = [];
+            // Create stars
+            for (let i = 0; i < starCount; i++) {
+                const star = document.createElement('div');
+                star.className = 'constellation-star';
+                const size = Math.random() * 4 + 3;
+                const x = Math.random() * 90 + 5;
+                const y = Math.random() * 90 + 5;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.left = `${x}%`;
+                star.style.top = `${y}%`;
+                constellation.appendChild(star);
+                stars.push({ x, y, element: star });
+                // Make stars twinkle
+                gsap.to(star, {
+                    opacity: Math.random() * 0.5 + 0.5,
+                    duration: Math.random() * 3 + 1,
+                    repeat: -1,
+                    yoyo: true,
+                    ease: "sine.inOut"
+                });
+            }
+            // Create connections between stars
+            for (let i = 0; i < stars.length - 1; i++) {
+                for (let j = i + 1; j < stars.length; j++) {
+                    if (Math.random() > 0.7) { // 30% chance to connect
+                        const line = document.createElement('div');
+                        line.className = 'constellation-line';
+                        const star1 = stars[i];
+                        const star2 = stars[j];
+                        const dx = star2.x - star1.x;
+                        const dy = star2.y - star1.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+                        line.style.width = `${distance}%`;
+                        line.style.left = `${star1.x}%`;
+                        line.style.top = `${star1.y}%`;
+                        line.style.transform = `rotate(${angle}deg)`;
+                        line.style.opacity = Math.random() * 0.3 + 0.2;
+                        constellation.appendChild(line);
+                        // Animate line
+                        gsap.to(line, {
+                            opacity: Math.random() * 0.2 + 0.1,
+                            duration: Math.random() * 4 + 2,
+                            repeat: -1,
+                            yoyo: true,
+                            ease: "sine.inOut"
+                        });
+                    }
+                }
+            }
+        }
+        function createBlackHole(id, accretionId, size) {
+            const blackHole = document.getElementById(id);
+            const accretion = document.getElementById(accretionId);
+            blackHole.style.width = `${size}px`;
+            blackHole.style.height = `${size}px`;
+            accretion.style.width = `${size * 1.8}px`;
+            accretion.style.height = `${size * 1.8}px`;
+            accretion.style.borderWidth = `${size * 0.03}px`;
+            positionBlackHole();
+            // Pulsing effect
+            gsap.to(blackHole, {
+                boxShadow: `inset 0 0 ${size/2}px #000000, 0 0 ${size}px #6600cc`,
+                duration: 3,
+                repeat: -1,
+                yoyo: true,
+                ease: "sine.inOut"
+            });
+            gsap.to(accretion, {
+                borderColor: 'rgba(150,50,255,0.7)',
+                duration: 4,
+                repeat: -1,
+                yoyo: true,
+                ease: "sine.inOut"
+            });
+        }
+        function positionBlackHole() {
+            const blackHole = document.getElementById('black-hole1');
+            const accretion = document.getElementById('black-hole-accretion1');
+            blackHole.style.left = `${window.innerWidth * 0.4}px`;
+            blackHole.style.top = `${window.innerHeight * 0.4}px`;
+            accretion.style.left = `${parseFloat(blackHole.style.left) - parseFloat(blackHole.style.width) * 0.4}px`;
+            accretion.style.top = `${parseFloat(blackHole.style.top) - parseFloat(blackHole.style.height) * 0.4}px`;
+        }
+        function positionCosmicText() {
+            const text1 = document.getElementById('cosmic-text1');
+            const text2 = document.getElementById('cosmic-text2');
+            text1.style.left = `${window.innerWidth * 0.5}px`;
+            text1.style.top = `${window.innerHeight * 0.3}px`;
+            text1.style.transform = 'translateX(-50%)';
+            text2.style.left = `${window.innerWidth * 0.5}px`;
+            text2.style.top = `${window.innerHeight * 0.7}px`;
+            text2.style.transform = 'translateX(-50%)';
+        }
+        function createParticle(x, y, direction = 'random') {
+            const particle = document.createElement('div');
+            particle.className = 'particle';
+            const size = Math.random() * 3 + 1;
+            const opacity = Math.random() * 0.7 + 0.3;
+            const colorHue = Math.random() * 60 + 180; // Blue to purple range
+            particle.style.width = `${size}px`;
+            particle.style.height = `${size}px`;
+            particle.style.left = `${x}px`;
+            particle.style.top = `${y}px`;
+            particle.style.background = `hsl(${colorHue}, 100%, 80%)`;
+            particle.style.opacity = opacity;
+            document.body.appendChild(particle);
+            let xVelocity, yVelocity;
+            if (direction === 'up') {
+                xVelocity = (Math.random() - 0.5) * 2;
+                yVelocity = -Math.random() * 3 - 1;
+            } else if (direction === 'down') {
+                xVelocity = (Math.random() - 0.5) * 2;
+                yVelocity = Math.random() * 3 + 1;
+            } else {
+                xVelocity = (Math.random() - 0.5) * 4;
+                yVelocity = (Math.random() - 0.5) * 4;
+            }
+            gsap.to(particle, {
+                x: `+=${xVelocity * 50}`,
+                y: `+=${yVelocity * 50}`,
+                opacity: 0,
+                scale: 0.1,
+                duration: Math.random() * 2 + 1,
+                ease: "power1.out",
+                onComplete: () => {
+                    particle.remove();
+                }
+            });
+        }
+        function createShootingStar() {
+            const shootingStar = document.createElement('div');
+            shootingStar.className = 'particle';
+            const size = Math.random() * 2 + 1;
+            const startX = Math.random() * window.innerWidth;
+            const startY = -10;
+            const endX = startX + (Math.random() - 0.5) * 200;
+            const endY = window.innerHeight + 10;
+            shootingStar.style.width = `${size}px`;
+            shootingStar.style.height = `${size * 4}px`;
+            shootingStar.style.left = `${startX}px`;
+            shootingStar.style.top = `${startY}px`;
+            shootingStar.style.background = 'linear-gradient(to bottom, white, cyan)';
+            shootingStar.style.opacity = '0';
+            shootingStar.style.transform = `rotate(${Math.atan2(endY - startY, endX - startX)}rad)`;
+            shootingStar.style.borderRadius = '50%';
+            document.body.appendChild(shootingStar);
+            // Create tail
+            const tail = document.createElement('div');
+            tail.className = 'comet-tail';
+            tail.style.width = '100px';
+            tail.style.height = '2px';
+            tail.style.left = `${startX}px`;
+            tail.style.top = `${startY}px`;
+            tail.style.transform = `rotate(${Math.atan2(endY - startY, endX - startX)}rad)`;
+            tail.style.opacity = '0';
+            document.body.appendChild(tail);
+            // Animate shooting star
+            gsap.to(shootingStar, {
+                x: endX - startX,
+                y: endY - startY,
+                opacity: 1,
+                duration: 1,
+                ease: "power2.in",
+                onComplete: () => {
+                    shootingStar.remove();
+                }
+            });
+            gsap.to(tail, {
+                x: endX - startX,
+                y: endY - startY,
+                opacity: 0.8,
+                duration: 1,
+                ease: "power2.in",
+                onComplete: () => {
+                    tail.remove();
+                }
+            });
+            // Create trail particles
+            const particles = 10;
+            for (let i = 0; i < particles; i++) {
+                setTimeout(() => {
+                    const progress = i / particles;
+                    const particleX = startX + (endX - startX) * progress;
+                    const particleY = startY + (endY - startY) * progress;
+                    createParticle(particleX, particleY);
+                }, i * 100);
+            }
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dhishooooom/space-pointer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Develop a cosmic mouse tracking animation that feels like everytime user moves the mouse or scroll they are traveling through infinite space


1	+ Develop a cosmic mouse tracking animation that feels like everytime user moves the mouse or scroll they are traveling through infinite space
2	+ Make it more complex more cosmic more interactive also scroll is not working fix it