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