|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>The Illusion Breaker</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
overflow: hidden; |
|
|
font-family: 'Courier New', monospace; |
|
|
background: #000; |
|
|
color: #fff; |
|
|
} |
|
|
#canvas { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: -1; |
|
|
} |
|
|
.content { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
mix-blend-mode: difference; |
|
|
pointer-events: none; |
|
|
} |
|
|
.truth-light { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
background: #fff; |
|
|
box-shadow: 0 0 20px 10px #fff; |
|
|
opacity: 0; |
|
|
transition: opacity 0.5s; |
|
|
} |
|
|
.illusion { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: repeating-linear-gradient( |
|
|
45deg, |
|
|
rgba(255,255,255,0.05), |
|
|
rgba(255,255,255,0.05) 10px, |
|
|
rgba(255,255,255,0.1) 10px, |
|
|
rgba(255,255,255,0.1) 20px |
|
|
); |
|
|
pointer-events: none; |
|
|
opacity: 0; |
|
|
transition: opacity 1s; |
|
|
} |
|
|
.reveal-btn { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
padding: 15px 30px; |
|
|
background: rgba(255,255,255,0.1); |
|
|
color: white; |
|
|
border: 1px solid rgba(255,255,255,0.3); |
|
|
border-radius: 50px; |
|
|
cursor: pointer; |
|
|
backdrop-filter: blur(10px); |
|
|
transition: all 0.3s; |
|
|
pointer-events: all; |
|
|
z-index: 100; |
|
|
} |
|
|
.reveal-btn:hover { |
|
|
background: rgba(255,255,255,0.3); |
|
|
transform: translateX(-50%) scale(1.05); |
|
|
} |
|
|
.hidden { |
|
|
opacity: 0; |
|
|
transition: opacity 0.5s; |
|
|
} |
|
|
.visible { |
|
|
opacity: 1; |
|
|
} |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<canvas id="canvas"></canvas> |
|
|
<div class="illusion"></div> |
|
|
<div class="truth-light"></div> |
|
|
|
|
|
<div class="content"> |
|
|
<h1 class="text-6xl font-bold mb-6 hidden" id="title">NOTHING IS REAL</h1> |
|
|
<p class="text-xl max-w-2xl px-4 hidden" id="subtitle">Everything you see is an illusion constructed by your mind. Even this website is just electrical signals interpreted by your brain.</p> |
|
|
<div class="mt-8 text-sm opacity-70 hidden" id="truth"> |
|
|
<p>But there is one truth...</p> |
|
|
<p class="mt-4 text-lg">YOU EXIST</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="reveal-btn hidden" id="revealBtn">REVEAL THE TRUTH</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const scene = new THREE.Scene(); |
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
renderer.setPixelRatio(window.devicePixelRatio); |
|
|
|
|
|
|
|
|
const geometry = new THREE.IcosahedronGeometry(1, 0); |
|
|
const material = new THREE.MeshBasicMaterial({ |
|
|
color: 0xffffff, |
|
|
wireframe: true, |
|
|
transparent: true, |
|
|
opacity: 0.3 |
|
|
}); |
|
|
|
|
|
const illusions = []; |
|
|
for (let i = 0; i < 50; i++) { |
|
|
const illusion = new THREE.Mesh(geometry, material.clone()); |
|
|
illusion.position.x = Math.random() * 100 - 50; |
|
|
illusion.position.y = Math.random() * 100 - 50; |
|
|
illusion.position.z = Math.random() * 100 - 50; |
|
|
illusion.scale.set(Math.random() * 3, Math.random() * 3, Math.random() * 3); |
|
|
scene.add(illusion); |
|
|
illusions.push({ |
|
|
mesh: illusion, |
|
|
speed: Math.random() * 0.02 |
|
|
}); |
|
|
} |
|
|
|
|
|
camera.position.z = 30; |
|
|
|
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
illusions.forEach(obj => { |
|
|
obj.mesh.rotation.x += obj.speed; |
|
|
obj.mesh.rotation.y += obj.speed; |
|
|
}); |
|
|
|
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
animate(); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('title').classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
document.getElementById('subtitle').classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
document.getElementById('revealBtn').classList.remove('hidden'); |
|
|
}, 1000); |
|
|
}, 1000); |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
const light = document.querySelector('.truth-light'); |
|
|
light.style.left = `${e.clientX}px`; |
|
|
light.style.top = `${e.clientY}px`; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('revealBtn').addEventListener('click', () => { |
|
|
|
|
|
document.querySelector('.illusion').style.opacity = '0.8'; |
|
|
document.querySelector('.truth-light').style.opacity = '1'; |
|
|
|
|
|
|
|
|
illusions.forEach(obj => { |
|
|
scene.remove(obj.mesh); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('truth').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const truthGeometry = new THREE.SphereGeometry(1, 32, 32); |
|
|
const truthMaterial = new THREE.MeshBasicMaterial({ |
|
|
color: 0xffffff, |
|
|
emissive: 0xffffff, |
|
|
emissiveIntensity: 1 |
|
|
}); |
|
|
const truth = new THREE.Mesh(truthGeometry, truthMaterial); |
|
|
scene.add(truth); |
|
|
|
|
|
|
|
|
gsap.to(truth.scale, { |
|
|
x: 5, y: 5, z: 5, |
|
|
duration: 3, |
|
|
ease: "elastic.out(1, 0.3)" |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('revealBtn').style.opacity = '0'; |
|
|
document.getElementById('revealBtn').style.pointerEvents = 'none'; |
|
|
|
|
|
|
|
|
document.getElementById('title').classList.add('floating'); |
|
|
document.getElementById('subtitle').classList.add('floating'); |
|
|
document.getElementById('truth').classList.add('floating'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.dispatchEvent(new MouseEvent('mousemove', { |
|
|
clientX: window.innerWidth / 2, |
|
|
clientY: window.innerHeight / 2 |
|
|
})); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=db69/truth" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
