\n
\n
\n S O I L E N C I O\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Toca el vacíoy siente el colapso

\n
\n
", "css": ".body-wrapper {\n margin: 0;\n padding: 0;\n background: #000;\n color: #fff;\n font-family: 'Courier New', Courier, monospace;\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n}\n\n#app {\n position: relative;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#void {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n\n.entity {\n position: relative;\n width: 200px;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.own-nature {\n animation: pulse-void 4s infinite ease-in-out;\n}\n\n.glitch-text {\n position: absolute;\n font-size: 1.2rem;\n font-weight: bold;\n letter-spacing: 0.5rem;\n color: #fff;\n text-shadow: 2px 0 #f00, -2px 0 #0ff;\n animation: glitch-anim 3s infinite linear;\n z-index: 10;\n pointer-events: none;\n text-align: center;\n white-space: nowrap;\n}\n\n.core {\n position: relative;\n width: 60px;\n height: 60px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #ff0000;\n z-index: 5;\n}\n\n.orbiter {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #fff;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: orbit 2s infinite linear;\n}\n\n.orbiter:nth-child(2) {\n animation-duration: 3s;\n animation-direction: reverse;\n}\n\n.orbiter:nth-child(3) {\n animation-duration: 4s;\n}\n\n.distortion-field {\n position: absolute;\n width: 300px;\n height: 300px;\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 50%;\n animation: rotate-field 10s infinite linear;\n pointer-events: none;\n}\n\n#noise-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8,');\n opacity: 0.05;\n pointer-events: none;\n mix-blend-mode: overlay;\n}\n\n#ui {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n z-index: 100;\n pointer-events: none;\n}\n\n.instruction {\n color: rgba(255,255,255,0.4);\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n animation: fade-in-out 3s infinite ease-in-out;\n}\n\n@keyframes pulse-void {\n 0%, 100% { transform: scale(1); opacity: 0.8; }\n 50% { transform: scale(1.1); opacity: 1; }\n}\n\n@keyframes glitch-anim {\n 0% { transform: translate(0); }\n 20% { transform: translate(-2px, 1px); }\n 40% { transform: translate(2px, -1px); }\n 60% { transform: translate(-1px, 2px); }\n 80% { transform: translate(1px, -2px); }\n 100% { transform: translate(0); }\n}\n\n@keyframes orbit {\n 0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }\n 100% { transform: rotate(360deg) translateX(80px) rotate(0deg); }\n}\n\n@keyframes rotate-field {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes fade-in-out {\n 0% { opacity: 0.2; }\n 50% { opacity: 0.6; }\n 100% { opacity: 0.2; }\n}", "js": "document.addEventListener('DOMContentLoaded', () => {\n const voidElement = document.getElementById('void');\n const core = document.querySelector('.core');\n const text = document.querySelector('.glitch-text');\n const body = document.body;\n\n let isCollapsing = false;\n let collapseLevel = 0;\n\n voidElement.addEventListener('mousedown', () => {\n isCollapsing = true;\n collapseLevel = 0;\n \n // Trigger glitch effect on the whole screen\n body.style.filter = 'invert(1) contrast(200%)';\n body.style.transition = '0.1s';\n });\n\n voidElement.addEventListener('mouseup', () => {\n isCollapsing = false;\n body.style.filter = 'none';\n body.style.transition = '0.5s';\n });\n\n function update() {\n if (isCollapsing) {\n collapseLevel += 0.05;\n \n // Scale down the entity\n const scale = Math.max(0, 1 - collapseLevel * 0.2);\n document.querySelector('.entity').style.transform = `scale(${scale})`;\n \n // Increase jitter\n const jitterX = (Math.random() - 0.5) * 20 * collapseLevel;\n const jitterY = (Math.random() - 0.5) * 20 * collapseLevel;\n document.querySelector('.entity').style.left = `${jitterX}px`;\n \n // Increase noise opacity\n document.getElementById('noise-layer').style.opacity = `${0.05 + collapseLevel * 0.1}`;\n \n // Change text randomly\n if (Math.random() >