Spaces:

dhishooooom
/

space-pointer

Running

App Files Files Community

dhishooooom commited on Apr 17, 2025

Commit

f97861c

verified ·

1 Parent(s): 739988b

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +233 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Space Pointer
-emoji: 🌍
-colorFrom: green
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: space-pointer
+emoji: 🐳
+colorFrom: red
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,233 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<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 {
+            position: absolute;
+            background: white;
+            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 {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .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
+                gsap.to(tail, {
+                    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;
+                const yOffset = (window.innerHeight / 2 - e.clientY) / 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)`;
+            });
+            // 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++) {
+                const star = document.createElement('div');
+                star.className = 'star';
+                // Random properties
+                const size = Math.random() * sizeMultiplier;
+                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`;
+                star.style.height = `${size}px`;
+                star.style.left = `${Math.random() * 100}%`;
+                star.style.top = `${Math.random() * 100}%`;
+                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>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


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