| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Wireframe Wormhole</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script> |
| | <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js" defer></script> |
| | <script src="https://unpkg.com/feather-icons" defer></script> |
| | <link rel="preconnect" href="https://cdnjs.cloudflare.com"> |
| | <link rel="preconnect" href="https://cdn.jsdelivr.net"> |
| | <link rel="preconnect" href="https://unpkg.com"> |
| | <style> |
| | body, html { |
| | margin: 0; |
| | padding: 0; |
| | overflow: hidden; |
| | height: 100%; |
| | will-change: transform, opacity; |
| | contain: strict; |
| | } |
| | #vanta-canvas { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | z-index: 0; |
| | contain: strict; |
| | transform: translateZ(0); |
| | backface-visibility: hidden; |
| | image-rendering: -webkit-optimize-contrast; |
| | } |
| | .content { |
| | position: relative; |
| | z-index: 1; |
| | height: 100vh; |
| | display: flex; |
| | flex-direction: column; |
| | justify-content: center; |
| | align-items: center; |
| | text-shadow: 0 2px 4px rgba(0,0,0,0.5); |
| | } |
| | @keyframes zoomInOut { |
| | 0% { transform: scale(1); } |
| | 100% { transform: scale(1.1); } |
| | } |
| | |
| | .content > * { |
| | will-change: transform, opacity; |
| | backface-visibility: hidden; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-black text-white"> |
| | <div id="vanta-canvas"> |
| | </div> |
| |
|
| | <div id="followup" class="hidden w-full min-h-screen bg-black text-white pt-20 pb-32 px-8"> |
| | <div class="max-w-4xl mx-auto"> |
| | <h2 class="text-4xl font-bold mb-12 text-center">Journey Through the Wormhole</h2> |
| | |
| | <div class="grid md:grid-cols-2 gap-12"> |
| | <div class="space-y-6"> |
| | <h3 class="text-2xl font-semibold">Depth Perception</h3> |
| | <p class="text-gray-300">Experience true three-dimensional depth with our layered wireframe technology.</p> |
| | <div class="h-64 bg-gradient-to-b from-gray-900 to-black border border-gray-800 rounded-lg"></div> |
| | </div> |
| | |
| | <div class="space-y-6"> |
| | <h3 class="text-2xl font-semibold">Monochrome Space</h3> |
| | <p class="text-gray-300">Navigate through a stark black and white universe of pure geometry.</p> |
| | <div class="h-64 bg-gradient-to-b from-white to-gray-300 border border-gray-400 rounded-lg"></div> |
| | </div> |
| | </div> |
| |
|
| | <div class="mt-20 text-center"> |
| | <button id="returnBtn" class="px-8 py-4 bg-white text-black rounded-full text-xl font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-white/30"> |
| | Return to Entrance |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="content text-center px-4"> |
| | <h1 class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-pink-500"> |
| | Wireframe Wormhole |
| | </h1> |
| | <p class="text-xl md:text-2xl max-w-2xl mb-10 opacity-95"> |
| | Dive into an infinite 3D wireframe universe that zooms endlessly into another dimension |
| | </p> |
| | <button id="enterBtn" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full text-xl font-semibold hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-purple-500/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500"> |
| | Enter the Wormhole |
| | </button> |
| | </div> |
| |
|
| | <div class="absolute bottom-6 left-0 right-0 text-center opacity-70 text-sm"> |
| | <p>Scroll or use arrow keys to navigate</p> |
| | <i data-feather="arrow-down" class="animate-bounce mt-2 mx-auto"></i> |
| | </div> |
| | <script> |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | initVanta(); |
| | }); |
| | function initVanta() { |
| | VANTA.NET({ |
| | el: "#vanta-canvas", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0x8a2be2, |
| | backgroundColor: 0x000000, |
| | points: 18.00, |
| | maxDistance: 30.00, |
| | spacing: 22.00, |
| | showDots: false, |
| | lineWidth: 0.8, |
| | color: 0xffffff, |
| | backgroundColor: 0x000000, |
| | pointSize: 1.5, |
| | pointLight: true, |
| | pointLightIntensity: 0.5, |
| | pointLightColor: 0xffffff, |
| | lineColor: 0xaaaaaa |
| | }); |
| | |
| | document.getElementById('enterBtn').addEventListener('click', function() { |
| | const netEffect = VANTA.NET({ |
| | el: "#vanta-canvas", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0x7e3ff2, |
| | backgroundColor: 0x000000, |
| | points: 18.00, |
| | maxDistance: 30.00, |
| | spacing: 22.00, |
| | showDots: false, |
| | lineWidth: 0.8, |
| | color: 0xffffff, |
| | backgroundColor: 0x000000, |
| | pointSize: 1.5, |
| | pointLight: true, |
| | pointLightIntensity: 0.5, |
| | pointLightColor: 0xffffff, |
| | lineColor: 0xaaaaaa |
| | }); |
| | |
| | |
| | let scale = 1; |
| | const zoomStep = () => { |
| | scale *= 1.02; |
| | requestAnimationFrame(() => { |
| | netEffect.setOptions({ |
| | spacing: 18.00 * scale, |
| | maxDistance: 25.00 * scale, |
| | points: 12.00 * scale |
| | }); |
| | }); |
| | ); |
| | if (scale < 100) { |
| | requestAnimationFrame(zoomStep); |
| | } else { |
| | |
| | requestAnimationFrame(() => { |
| | document.querySelector('.content').classList.add('hidden'); |
| | document.getElementById('followup').classList.remove('hidden'); |
| | }); |
| | |
| | document.getElementById('returnBtn').addEventListener('click', function() { |
| | requestAnimationFrame(() => { |
| | document.querySelector('.content').classList.remove('hidden'); |
| | document.getElementById('followup').classList.add('hidden'); |
| | if (netEffect) { |
| | netEffect.setOptions({ |
| | points: 18.00, |
| | maxDistance: 30.00, |
| | spacing: 22.00, |
| | lineWidth: 0.8, |
| | pointSize: 1.5 |
| | }); |
| | } |
| | }); |
| | }); |
| | zoomStep(); |
| | } |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | feather.replace(); |
| | }); |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
| |
|
