CYBER-MYSTICISM
Explora la esencia del Soberano Digital
", "css": ".body { margin: 0; overflow: hidden; background: #000; font-family: 'Courier New', Courier, monospace; color: #0ff; } #app { position: relative; width: 100vw; height: 100vh; background: #000; overflow: hidden; } #canvas-container { position: relative; width: 100vw; height: 100vh; } #cyber-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; pointer-events: none; } .glitch-text { font-size: 4rem; font-weight: bold; letter-spacing: 10px; color: #0ff; text-shadow: 0 0 10px #0ff, 0 0 20px #0ff; animation: glitch 3s infinite; position: relative; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; } .glitch-text::before { color: #f0f; animation: glitch-anim-1 2s infinite linear alternate-reverse; z-index: -1; } .glitch-text::after { color: #0f0; animation: glitch-anim-2 3s infinite linear alternate-reverse; z-index: -2; } .subtitle { font-size: 1.2rem; margin-top: 20px; opacity: 0.7; letter-spacing: 5px; text-transform: uppercase; } @keyframes glitch { 0% { transform: translate(0); } 1% { transform: translate(-5px, 5px); } 2% { transform: translate(5px, -5px); } 3% { transform: translate(0); } 100% { transform: translate(0); } } @keyframes glitch-anim-1 { 0% { clip-path: inset(10% 0 80% 0); transform: translate(-5px, 0); } 100% { clip-path: inset(90% 0 10% 0); transform: translate(5px, 0); } } @keyframes glitch-anim-2 { 0% { clip-path: inset(80% 0 20% 0); transform: translate(5px, 0); } 100% { clip-path: inset(20% 0 70% 0); transform: translate(-5px, 0); } }", "js": "const canvas = document.getElementById('cyber-canvas'); const ctx = canvas.getContext('2d'); let width, height; let particles = []; const particleCount = 150; const colors = ['#00ffff', '#ff00ff', '#00ff00', '#ffffff']; function resize() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; } window.addEventListener('resize', resize); resize(); class Particle { constructor() { this.reset(); } reset() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 0.5; this.vy = (Math.random() - 0.5) * 0.5; this.size = Math.random() * 2 + 1; this.color = colors[Math.floor(Math.random() * colors.length)]; this.life = Math.random() * 100 + 50; this.maxLife = this.life; } update() { this.x += this.vx; this.y += this.vy; this.life -= 0.5; if (this.life <= 0) this.reset(); } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, this.size * 0.1, Math.PI * 2); ctx.fillStyle = this.color; ctx.shadowBlur = 10; ctx.shadowColor = this.color; ctx.fill(); } } const particles = new Array(particleCount).fill(null).map(() => new Particle()); function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, width, height); particles.forEach(p => { p.update(); p.draw(); }); drawConnections(); requestAnimationFrame(animate); } function drawConnections() { ctx.lineWidth = 0.5; ctx.strokeStyle = 'rgba(0, 255, 255, 0.15)'; ctx.beginPath(); particles.forEach((p, i) => { particles.slice(i + 1).forEach(p2 =>