Spaces:

teeluck
/

dimensional-drop-3d-web-canvas

Running

App Files Files Community

teeluck commited on Oct 10, 2025

Commit

5e7cb2a

verified ·

1 Parent(s): 8ac63f1

Redesign my website

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +163 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Dimensional Drop 3d Web Canvas
-emoji: 🐠
-colorFrom: pink
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Dimensional Drop - 3D Web Canvas
+colorFrom: yellow
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,164 @@
-<!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>Dimensional Drop - 3D Web Canvas</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
+    <style>
+        .perspective-container {
+            perspective: 1000px;
+        }
+        .rotate-y {
+            transform-style: preserve-3d;
+            transform: rotateY(5deg);
+        }
+        .text-shadow-3d {
+            text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+    </style>
+</head>
+<body class="bg-black text-white font-sans overflow-x-hidden" id="vanta-bg">
+    <header class="fixed w-full z-50">
+        <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="text-2xl font-bold tracking-tighter">Dimensional<span class="text-blue-400">Drop</span></div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#" class="hover:text-blue-400 transition">About</a>
+                <a href="#" class="hover:text-blue-400 transition">Features</a>
+                <a href="#" class="hover:text-blue-400 transition">Gallery</a>
+                <a href="#" class="hover:text-blue-400 transition">Contact</a>
+            </div>
+            <button class="md:hidden">
+                <i data-feather="menu"></i>
+            </button>
+        </nav>
+    </header>
+    <main>
+        <!-- Hero Section with 3D effect -->
+        <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
+            <div class="container mx-auto px-6 z-10 perspective-container">
+                <div class="rotate-y">
+                    <h1 class="text-5xl md:text-8xl font-bold mb-6 text-shadow-3d tracking-tighter">
+                        <span class="block">3D Web</span>
+                        <span class="block text-blue-400">Design & Experience</span>
+                    </h1>
+                    <p class="text-xl md:text-2xl mb-12 max-w-2xl opacity-90">You're no longer constrained by grids, blocks and a flat page. The infinite 3D space becomes your creative canvas.</p>
+                    <div class="flex items-center space-x-6">
+                        <a href="#immersive" class="px-8 py-4 bg-blue-600 hover:bg-blue-700 rounded-full font-medium transition transform hover:scale-105">
+                            SCROLL TO GO UNDER
+                        </a>
+                        <img src="https://files.peachworlds.com/website/90672edd-9af4-4376-ac94-7e02f50cdf00/icon-arrow.svg" alt="Arrow" class="w-12 h-12 animate-bounce">
+                    </div>
+                </div>
+            </div>
+            <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-70 z-0"></div>
+        </section>
+        <!-- Features Section -->
+        <section id="immersive" class="py-20 bg-gradient-to-b from-black via-blue-900/20 to-black parallax-bg" style="background-image: url('https://files.peachworlds.com/website/e967a52d-b5c8-479b-bb43-b390b03a2b8a/peach-contest.jpg')">
+            <div class="container mx-auto px-6">
+                <div class="grid md:grid-cols-3 gap-12">
+                    <!-- Spatial UX Card -->
+                    <div class="bg-black/70 backdrop-blur-sm p-8 rounded-xl border border-blue-400/20 hover:border-blue-400/50 transition transform hover:-translate-y-2">
+                        <h3 class="text-2xl font-bold mb-4 text-blue-400">Spatial UX</h3>
+                        <p class="opacity-80">The infinite 3D space becomes your creative canvas, everything is possible — there are no rules.</p>
+                    </div>
+                    <!-- Immersion Card -->
+                    <div class="bg-black/70 backdrop-blur-sm p-8 rounded-xl border border-blue-400/20 hover:border-blue-400/50 transition transform hover:-translate-y-2">
+                        <h3 class="text-2xl font-bold mb-4 text-blue-400">Immersion</h3>
+                        <p class="opacity-80">This depth and realism engage multiple senses, creating a sense of presence and making the experience feel more lifelike.</p>
+                    </div>
+                    <!-- Creativity Card -->
+                    <div class="bg-black/70 backdrop-blur-sm p-8 rounded-xl border border-blue-400/20 hover:border-blue-400/50 transition transform hover:-translate-y-2">
+                        <h3 class="text-2xl font-bold mb-4 text-blue-400">Creativity</h3>
+                        <p class="opacity-80">Craft dynamic, multi-dimensional experiences, whether stylized or hyper-realistic this opens up new possibilities.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- CTA Section -->
+        <section class="py-32">
+            <div class="container mx-auto px-6 text-center">
+                <h2 class="text-4xl md:text-6xl font-bold mb-8">The Web is More<br><span class="text-blue-400">Than a Flat Page</span></h2>
+                <div class="max-w-3xl mx-auto mb-12">
+                    <img src="https://files.peachworlds.com/website/e967a52d-b5c8-479b-bb43-b390b03a2b8a/peach-contest.jpg" alt="3D Web Design" class="w-full rounded-xl shadow-2xl shadow-blue-500/20">
+                </div>
+                <div class="flex flex-col items-center">
+                    <p class="text-xl mb-8 opacity-90 max-w-2xl">Design Your First 3D Website Today</p>
+                    <div class="flex items-center space-x-4">
+                        <img src="https://files.peachworlds.com/website/90672edd-9af4-4376-ac94-7e02f50cdf00/icon-arrow.svg" alt="Arrow" class="w-8 h-8 animate-pulse">
+                        <a href="#" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-medium transition transform hover:scale-105">
+                            GET STARTED
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="py-12 border-t border-blue-900/30">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="text-xl font-bold tracking-tighter mb-4 md:mb-0">Dimensional<span class="text-blue-400">Drop</span></div>
+                <div class="text-sm opacity-70">MADE WITH PEACH WORLDS</div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Vanta.js globe background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x0
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Simple scroll animation
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Add scroll reveal animations
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeIn');
+                }
+            });
+        }, { threshold: 0.1 });
+        document.querySelectorAll('.rotate-y, [class*="transition"]').forEach(el => {
+            observer.observe(el);
+        });
+    </script>
+</body>
 </html>