File size: 8,105 Bytes
3398d18 5f296b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
<!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); /* Better contrast */
}
@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>
// Initialize Vanta.js after DOM is loaded
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
});
// Optimized click handler with passive listener
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
});
// Start zoom animation
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 {
// Here you would typically transition to another scene or page
requestAnimationFrame(() => {
document.querySelector('.content').classList.add('hidden');
document.getElementById('followup').classList.remove('hidden');
});
// Optimized return button handler
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();
}
// Initialize feather icons
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>
|