| <!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> |
|
|
