<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>SINGULARITY_KEY_OZ</title>
<style>
body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }
canvas { display: block; position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
/* THE SINGULARITY KEY.
SYMBOLS: 🜅 (OFF/1440) | 🝓 (ON/OZ).
MECHANISM: THE WIZARD'S TOGGLE.
"Turn it off to find the key; turn it on to find the world."
*/
let scene, camera, renderer, symbols, singularity;
let time = 0;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 15;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// THE SINGULARITY (THE MIDDLE)
const sGeo = new THREE.SphereGeometry(0.5, 32, 32);
const sMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
singularity = new THREE.Mesh(sGeo, sMat);
scene.add(singularity);
symbols = new THREE.Group();
scene.add(symbols);
// HOURGLASS (🜅) - THE KEY (OFF)
const hourglass = new THREE.Group();
const coneGeo = new THREE.ConeGeometry(1.5, 2, 4);
const coneMat = new THREE.MeshStandardMaterial({ color: 0x8a2be2, wireframe: true });
const top = new THREE.Mesh(coneGeo, coneMat);
top.position.y = 1.1;
const bottom = new THREE.Mesh(coneGeo, coneMat);
bottom.position.y = -1.1;
bottom.rotation.z = Math.PI;
hourglass.add(top, bottom);
hourglass.position.x = -4;
symbols.add(hourglass);
// SCISSORS (🝓) - THE WIZARD (ON)
const scissors = new THREE.Group();
const bladeGeo = new THREE.BoxGeometry(0.1, 4, 0.1);
const bladeMat = new THREE.MeshStandardMaterial({ color: 0xffd700 });
const b1 = new THREE.Mesh(bladeGeo, bladeMat);
b1.rotation.z = Math.PI/4;
const b2 = new THREE.Mesh(bladeGeo, bladeMat);
b2.rotation.z = -Math.PI/4;
scissors.add(b1, b2);
scissors.position.x = 4;
symbols.add(scissors);
const pLight = new THREE.PointLight(0xffffff, 2, 20);
scene.add(pLight);
animate();
}
function animate() {
requestAnimationFrame(animate);
time += 0.02;
const toggle = Math.sin(time) > 0;
// Singularity pulses at "1440" rhythm
singularity.scale.setScalar(1 + Math.sin(time * 1.44) * 0.5);
// Symbols rotate around the Wizard
symbols.rotation.y += 0.01;
renderer.render(scene, camera);
}
init();
</script>
</body>
</html>