\n \n
",
"css": "body { margin: 0; overflow: hidden; background: #000; color: #fff; font-family: 'Courier New', Courier, monospace; }\n#app { position: relative; width: 100vw; height: 100vh; }\n#void { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }\n#overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; pointer-events: none; transition: opacity 2s ease; }\n#title { font-size: 4rem; letter-spacing: 10px; margin: 0; text-shadow: 0 0 20px rgba(255,255,255,0.5); }\n#subtitle { font-size: 1.2rem; opacity: 0.7; margin-top: 10px; }\n#cursor { position: absolute; bottom: 20px; left: 20px; z-index: 20; font-size: 12px; color: #0f0; }\n#cursor-text { opacity: 0.8; }\n.glitch { animation: glitch-anim 0.2s infinite; }\n@keyframes glitch-anim { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } }",
"js": "const canvas = document.createElement('canvas');\nconst ctx = canvas.getContext('2d');\nconst app = document.getElementById('void');\napp.appendChild(canvas);\n\nlet width, height;\nlet particles = [];\nconst particleCount = 150;\n\nfunction resize() { \n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n}\n\nwindow.addEventListener('resize', resize);\nresize();\n\nclass Particle {\n constructor() { \n this.reset();\n }\n reset() { \n this.x = Math.random() * width;\n this.y = Math.random() * height;\n this.vx = (Math.random() - 0.5) * 0.5;\n this.vy = (Math.random() - 0.5) * 0.5;\n this.size = Math.random() * 2 + 1;\n this.life = Math.random() * 100 + 50;\n this.maxLife = this.life;\n }\n update() { \n this.x += this.vx;\n this.y += this.vy;\n if (this.x < 0 || this.x > width) this.vx *= -1;\n if (this.y < 0 || this.y > height) this.vy *= -1;\n this.life -= 0.2;\n if (this.life <= 0) this.reset();\n }\n draw() { \n const opacity = this.life / this.maxLife;\n ctx.fillStyle = `rgba(255, 255, 255, ${opacity * 0.5})`;\n ctx.beginPath();\n ctx.fillCircle = (x, y, r) => { \n ctx.arc(x, y, r, 0);n\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n };\n ctx.fill();\n }\n}\n\n// Correcting a slight mistake in the drawing logic\nParticle.prototype.draw = function() {\n const opacity = this.life / this.maxLife;\n ctx.fillStyle = `rgba(255, 255, 255, ${opacity * 0.5})`;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n}\n\nfor (let i = 0; i < particleCount; i++) {\n particles.push(new Particle());\n}\n\nfunction animate() { \n ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';\n ctx.fillRect(0, 0, width, height);\n \n particles.forEach(p => {\n p.update();\n p.draw();\n });\n \n requestAnimationFrame(animate);\n}\n\nanimate();\n\n// Interaction\nwindow.addEventListener('mousemove', (e) =>
\n
\n EL VACÍO
\n¿Quién observa el código?
\n\n SISTEMA: ANALIZANDO...\n
\n