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