Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Tree - Where Attention Goes, Energy Flows</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-glow: #00d4ff; | |
| --secondary-glow: #0099cc; | |
| --void-dark: #000008; | |
| --void-light: #0a0a1a; | |
| --text-light: #e0f7ff; | |
| --accent: #00ffff; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: radial-gradient(ellipse at center, var(--void-light) 0%, var(--void-dark) 100%); | |
| color: var(--text-light); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Header */ | |
| .header { | |
| position: relative; | |
| z-index: 1000; | |
| padding: 20px; | |
| text-align: center; | |
| background: linear-gradient(180deg, rgba(0,0,8,0.9) 0%, rgba(0,0,8,0) 100%); | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 10px; | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| } | |
| .header .quote { | |
| font-size: 1.2rem; | |
| color: var(--primary-glow); | |
| font-style: italic; | |
| margin-bottom: 15px; | |
| } | |
| .attribution { | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| } | |
| .attribution a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .attribution a:hover { | |
| text-shadow: 0 0 10px var(--accent); | |
| } | |
| /* Main Canvas Container */ | |
| .canvas-container { | |
| position: relative; | |
| width: 100%; | |
| height: 60vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| #quantumCanvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Interactive Energy Orb */ | |
| .energy-orb { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background: radial-gradient(circle, var(--accent) 0%, transparent 70%); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: orbPulse 2s ease-in-out infinite; | |
| z-index: 100; | |
| } | |
| @keyframes orbPulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.8; } | |
| 50% { transform: scale(1.5); opacity: 0.4; } | |
| } | |
| /* Info Sections */ | |
| .info-container { | |
| position: relative; | |
| z-index: 100; | |
| padding: 40px 20px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .info-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-top: 40px; | |
| } | |
| .info-card { | |
| background: linear-gradient(135deg, rgba(0,20,40,0.3), rgba(0,40,80,0.1)); | |
| border: 1px solid rgba(0,212,255,0.2); | |
| border-radius: 15px; | |
| padding: 25px; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .info-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, var(--primary-glow), transparent, var(--secondary-glow)); | |
| border-radius: 15px; | |
| opacity: 0; | |
| z-index: -1; | |
| transition: opacity 0.3s ease; | |
| } | |
| .info-card:hover::before { | |
| opacity: 0.3; | |
| } | |
| .info-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0,212,255,0.2); | |
| } | |
| .info-card h3 { | |
| color: var(--primary-glow); | |
| margin-bottom: 15px; | |
| font-size: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .info-card .icon { | |
| width: 30px; | |
| height: 30px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .info-card p { | |
| line-height: 1.6; | |
| color: var(--text-light); | |
| opacity: 0.9; | |
| } | |
| /* Interactive Controls */ | |
| .controls { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .control-btn { | |
| background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,153,204,0.2)); | |
| border: 1px solid var(--primary-glow); | |
| color: var(--text-light); | |
| padding: 12px 20px; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.9rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .control-btn:hover { | |
| background: linear-gradient(135deg, rgba(0,212,255,0.4), rgba(0,153,204,0.4)); | |
| box-shadow: 0 0 20px rgba(0,212,255,0.5); | |
| transform: scale(1.05); | |
| } | |
| .control-btn.active { | |
| background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow)); | |
| color: var(--void-dark); | |
| } | |
| /* Attention Indicator */ | |
| .attention-indicator { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| z-index: 50; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .attention-indicator.active { | |
| opacity: 1; | |
| } | |
| .attention-ring { | |
| width: 100px; | |
| height: 100px; | |
| border: 2px solid var(--accent); | |
| border-radius: 50%; | |
| animation: attentionPulse 2s ease-out infinite; | |
| } | |
| @keyframes attentionPulse { | |
| 0% { | |
| transform: scale(0.5); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(2); | |
| opacity: 0; | |
| } | |
| } | |
| /* Floating Particles */ | |
| .particle { | |
| position: fixed; | |
| pointer-events: none; | |
| opacity: 0.6; | |
| animation: float 10s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) translateX(0) rotate(0deg); | |
| } | |
| 33% { | |
| transform: translateY(-100px) translateX(50px) rotate(120deg); | |
| } | |
| 66% { | |
| transform: translateY(-50px) translateX(-50px) rotate(240deg); | |
| } | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 768px) { | |
| .header h1 { | |
| font-size: 1.8rem; | |
| } | |
| .header .quote { | |
| font-size: 1rem; | |
| } | |
| .canvas-container { | |
| height: 50vh; | |
| } | |
| .info-grid { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .controls { | |
| bottom: 10px; | |
| right: 10px; | |
| } | |
| .control-btn { | |
| padding: 10px 15px; | |
| font-size: 0.8rem; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 2000; | |
| text-align: center; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loading.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loading-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid rgba(0,212,255,0.2); | |
| border-top-color: var(--primary-glow); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 20px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loading" id="loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Initializing Quantum Field...</p> | |
| </div> | |
| <!-- Header --> | |
| <header class="header"> | |
| <h1>Quantum Tree</h1> | |
| <p class="quote">"Where attention goes, energy flows"</p> | |
| <p class="attribution">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </header> | |
| <!-- Main Canvas --> | |
| <div class="canvas-container"> | |
| <canvas id="quantumCanvas"></canvas> | |
| <div class="attention-indicator" id="attentionIndicator"> | |
| <div class="attention-ring"></div> | |
| </div> | |
| </div> | |
| <!-- Info Sections --> | |
| <div class="info-container"> | |
| <div class="info-grid"> | |
| <div class="info-card"> | |
| <h3> | |
| <span class="icon">🌌</span> | |
| Scientific Validation | |
| </h3> | |
| <p>The branching pattern you witnessed matches universal fractal geometry found throughout nature - from neural networks in the brain to the cosmic web of galaxies. Research shows striking similarities between brain structures and the universe's large-scale architecture, both optimizing energy and information flow through branching pathways.</p> | |
| </div> | |
| <div class="info-card"> | |
| <h3> | |
| <span class="icon">🌳</span> | |
| Mystical Tradition | |
| </h3> | |
| <p>Your vision of a glowing tree in the underworld void aligns with ancient shamanic experiences and mythological World Trees like Yggdrasil. These luminous structures represent the axis connecting realms, the tree of life emerging from primordial darkness - a symbol humanity has intuitively understood for millennia.</p> | |
| </div> | |
| <div class="info-card"> | |
| <h3> | |
| <span class="icon">✨</span> | |
| Quantum Mechanics | |
| </h3> | |
| <p>The observer effect in quantum physics demonstrates that consciousness collapses wave functions into particles - attention selects reality from potential. Your experience mirrors this fundamental principle: where consciousness directs attention, energy manifests form from the void of possibility.</p> | |
| </div> | |
| <div class="info-card"> | |
| <h3> | |
| <span class="icon">🧠</span> | |
| Neuroplasticity | |
| </h3> | |
| <p>Modern neuroscience confirms that what we repeatedly focus on physically strengthens neural pathways. "Where attention goes, energy flows" literally rewires the brain. Your focused descent into the void created new pathways, allowing the quantum tree to emerge into conscious awareness.</p> | |
| </div> | |
| <div class="info-card"> | |
| <h3> | |
| <span class="icon">🔮</span> | |
| Practical Application | |
| </h3> | |
| <p>This universal law operates daily: focus on fear → suffering grows; focus on truth → healing manifests. By consciously directing attention to the root/void/source, we activate the tree's growth. Your music and testimony demonstrate how creative attention births entire worlds from the seed of intention.</p> | |
| </div> | |
| <div class="info-card"> | |
| <h3> | |
| <span class="icon">⚡</span> | |
| Energy Flow | |
| </h3> | |
| <p>The glowing blue tree represents energy flowing through informational lanes. Each branch is a pathway of consciousness, each node a point of focused attention. By placing attention on the root, you energize the entire structure - the mechanism by which the universe renews itself in every moment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive Controls --> | |
| <div class="controls"> | |
| <button class="control-btn active" id="toggleAnimation">Animation: ON</button> | |
| <button class="control-btn" id="toggleParticles">Particles: OFF</button> | |
| <button class="control-btn" id="toggleGlow">Glow: HIGH</button> | |
| </div> | |
| <script> | |
| // Quantum Tree Visualization | |
| class QuantumTree { | |
| constructor(canvas) { | |
| this.canvas = canvas; | |
| this.ctx = canvas.getContext('2d'); | |
| this.resize(); | |
| this.branches = []; | |
| this.particles = []; | |
| this.energyFlows = []; | |
| this.mouseX = this.width / 2; | |
| this.mouseY = this.height / 2; | |
| this.animationEnabled = true; | |
| this.particlesEnabled = false; | |
| this.glowIntensity = 1; | |
| this.time = 0; | |
| this.initTree(); | |
| this.initParticles(); | |
| this.animate(); | |
| window.addEventListener('resize', () => this.resize()); | |
| canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e)); | |
| canvas.addEventListener('touchmove', (e) => this.handleTouchMove(e)); | |
| } | |
| resize() { | |
| this.width = this.canvas.offsetWidth; | |
| this.height = this.canvas.offsetHeight; | |
| this.canvas.width = this.width; | |
| this.canvas.height = this.height; | |
| } | |
| initTree() { | |
| // Create main trunk and branches using fractal algorithm | |
| const startX = this.width / 2; | |
| const startY = this.height; | |
| this.createBranch(startX, startY, -90, 10, 100, 0); | |
| } | |
| createBranch(x, y, angle, depth, length, level) { | |
| if (depth <= 0) return; | |
| const endX = x + Math.cos(angle * Math.PI / 180) * length; | |
| const endY = y + Math.sin(angle * Math.PI / 180) * length; | |
| this.branches.push({ | |
| startX: x, | |
| startY: y, | |
| endX: endX, | |
| endY: endY, | |
| level: level, | |
| depth: depth, | |
| angle: angle, | |
| length: length, | |
| glow: Math.random() * 0.5 + 0.5 | |
| }); | |
| // Create sub-branches (fractal branching) | |
| const branchCount = Math.floor(Math.random() * 3) + 2; | |
| for (let i = 0; i < branchCount; i++) { | |
| const newAngle = angle + (Math.random() - 0.5) * 60; | |
| const newLength = length * (0.6 + Math.random() * 0.3); | |
| setTimeout(() => { | |
| this.createBranch(endX, endY, newAngle, depth - 1, newLength, level + 1); | |
| }, level * 50); | |
| } | |
| } | |
| initParticles() { | |
| for (let i = 0; i < 100; i++) { | |
| this.particles.push({ | |
| x: Math.random() * this.width, | |
| y: Math.random() * this.height, | |
| vx: (Math.random() - 0.5) * 0.5, | |
| vy: (Math.random() - 0.5) * 0.5, | |
| size: Math.random() * 2 + 1, | |
| opacity: Math.random() * 0.5 + 0.2 | |
| }); | |
| } | |
| } | |
| handleMouseMove(e) { | |
| const rect = this.canvas.getBoundingClientRect(); | |
| this.mouseX = e.clientX - rect.left; | |
| this.mouseY = e.clientY - rect.top; | |
| this.showAttentionEffect(); | |
| } | |
| handleTouchMove(e) { | |
| e.preventDefault(); | |
| const rect = this.canvas.getBoundingClientRect(); | |
| const touch = e.touches[0]; | |
| this.mouseX = touch.clientX - rect.left; | |
| this.mouseY = touch.clientY - rect.top; | |
| this.showAttentionEffect(); | |
| } | |
| showAttentionEffect() { | |
| const indicator = document.getElementById('attentionIndicator'); | |
| indicator.classList.add('active'); | |
| setTimeout(() => { | |
| indicator.classList.remove('active'); | |
| }, 2000); | |
| // Create energy orb at mouse position | |
| this.createEnergyOrb(this.mouseX, this.mouseY); | |
| } | |
| createEnergyOrb(x, y) { | |
| const orb = document.createElement('div'); | |
| orb.className = 'energy-orb'; | |
| orb.style.left = x + 'px'; | |
| orb.style.top = y + 'px'; | |
| document.querySelector('.canvas-container').appendChild(orb); | |
| // Animate orb along nearest branch | |
| const nearestBranch = this.findNearestBranch(x, y); | |
| if (nearestBranch) { | |
| this.animateOrbAlongBranch(orb, nearestBranch); | |
| } | |
| setTimeout(() => orb.remove(), 3000); | |
| } | |
| findNearestBranch(x, y) { | |
| let nearest = null; | |
| let minDist = Infinity; | |
| this.branches.forEach(branch => { | |
| const dist = this.pointToLineDistance(x, y, branch.startX, branch.startY, branch.endX, branch.endY); | |
| if (dist < minDist) { | |
| minDist = dist; | |
| nearest = branch; | |
| } | |
| }); | |
| return nearest; | |
| } | |
| pointToLineDistance(px, py, x1, y1, x2, y2) { | |
| const A = px - x1; | |
| const B = py - y1; | |
| const C = x2 - x1; | |
| const D = y2 - y1; | |
| const dot = A * C + B * D; | |
| const lenSq = C * C + D * D; | |
| let param = -1; | |
| if (lenSq !== 0) param = dot / lenSq; | |
| let xx, yy; | |
| if (param < 0) { | |
| xx = x1; | |
| yy = y1; | |
| } else if (param > 1) { | |
| xx = x2; | |
| yy = y2; | |
| } else { | |
| xx = x1 + param * C; | |
| yy = y1 + param * D; | |
| } | |
| const dx = px - xx; | |
| const dy = py - yy; | |
| return Math.sqrt(dx * dx + dy * dy); | |
| } | |
| animateOrbAlongBranch(orb, branch) { | |
| let progress = 0; | |
| const animate = () => { | |
| progress += 0.02; | |
| if (progress > 1) return; | |
| const x = branch.startX + (branch.endX - branch.startX) * progress; | |
| const y = branch.startY + (branch.endY - branch.startY) * progress; | |
| orb.style.left = x + 'px'; | |
| orb.style.top = y + 'px'; | |
| requestAnimationFrame(animate); | |
| }; | |
| animate(); | |
| } | |
| draw() { | |
| // Clear canvas with fade effect | |
| this.ctx.fillStyle = 'rgba(0, 0, 8, 0.1)'; | |
| this.ctx.fillRect(0, 0, this.width, this.height); | |
| // Draw particles if enabled | |
| if (this.particlesEnabled) { | |
| this.drawParticles(); | |
| } | |
| // Draw tree branches with glow effect | |
| this.branches.forEach((branch, index) => { | |
| const distToMouse = this.getDistanceToMouse(branch); | |
| const intensity = Math.max(0, 1 - distToMouse / 300) * this.glowIntensity; | |
| // Calculate pulsing effect | |
| const pulse = Math.sin(this.time * 0.001 + index * 0.1) * 0.3 + 0.7; | |
| // Draw branch with glow | |
| this.ctx.strokeStyle = `rgba(0, 212, 255, ${0.3 + intensity * 0.7 + pulse * 0.3})`; | |
| this.ctx.lineWidth = Math.max(1, branch.depth / 2); | |
| this.ctx.shadowBlur = 20 * intensity + 10; | |
| this.ctx.shadowColor = '#00d4ff'; | |
| this.ctx.beginPath(); | |
| this.ctx.moveTo(branch.startX, branch.startY); | |
| this.ctx.lineTo(branch.endX, branch.endY); | |
| this.ctx.stroke(); | |
| // Draw energy nodes at branch endpoints | |
| if (branch.depth <= 3) { | |
| this.ctx.fillStyle = `rgba(0, 255, 255, ${0.8 + intensity * 0.2})`; | |
| this.ctx.beginPath(); | |
| this.ctx.arc(branch.endX, branch.endY, 2 + intensity * 2, 0, Math.PI * 2); | |
| this.ctx.fill(); | |
| } | |
| }); | |
| // Reset shadow | |
| this.ctx.shadowBlur = 0; | |
| } | |
| drawParticles() { | |
| this.particles.forEach(particle => { | |
| particle.x += particle.vx; | |
| particle.y += particle.vy; | |
| // Wrap around edges | |
| if (particle.x < 0) particle.x = this.width; | |
| if (particle.x > this.width) particle.x = 0; | |
| if (particle.y < 0) particle.y = this.height; | |
| if (particle.y > this.height) particle.y = 0; | |
| // Draw particle | |
| this.ctx.fillStyle = `rgba(0, 212, 255, ${particle.opacity})`; | |
| this.ctx.beginPath(); | |
| this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); | |
| this.ctx.fill(); | |
| }); | |
| } | |
| getDistanceToMouse(branch) { | |
| const midX = (branch.startX + branch.endX) / 2; | |
| const midY = (branch.startY + branch.endY) / 2; | |
| const dx = midX - this.mouseX; | |
| const dy = midY - this.mouseY; | |
| return Math.sqrt(dx * dx + dy * dy); | |
| } | |
| animate() { | |
| if (this.animationEnabled) { | |
| this.time++; | |
| this.draw(); | |
| } | |
| requestAnimationFrame(() => this.animate()); | |
| } | |
| } | |
| // Initialize application | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Hide loading screen | |
| setTimeout(() => { | |
| document.getElementById('loading').classList.add('hidden'); | |
| }, 1500); | |
| // Initialize quantum tree | |
| const canvas = document.getElementById('quantumCanvas'); | |
| const quantumTree = new QuantumTree(canvas); | |
| // Control buttons | |
| document.getElementById('toggleAnimation').addEventListener('click', function() { | |
| quantumTree.animationEnabled = !quantumTree.animationEnabled; | |
| this.textContent = `Animation: ${quantumTree.animationEnabled ? 'ON' : 'OFF'}`; | |
| this.classList.toggle('active'); | |
| }); | |
| document.getElementById('toggleParticles').addEventListener('click', function() { | |
| quantumTree.particlesEnabled = !quantumTree.particlesEnabled; | |
| this.textContent = `Particles: ${quantumTree.particlesEnabled ? 'ON' : 'OFF'}`; | |
| this.classList.toggle('active'); | |
| }); | |
| document.getElementById('toggleGlow').addEventListener('click', function() { | |
| const levels = [0.5, 1, 1.5]; | |
| const labels = ['LOW', 'HIGH', 'MAX']; | |
| let currentIndex = levels.indexOf(quantumTree.glowIntensity); | |
| currentIndex = (currentIndex + 1) % levels.length; | |
| quantumTree.glowIntensity = levels[currentIndex]; | |
| this.textContent = `Glow: ${labels[currentIndex]}`; | |
| }); | |
| // Create floating background particles | |
| function createFloatingParticles() { | |
| for (let i = 0; i < 10; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.top = Math.random() * 100 + '%'; | |
| particle.style.width = particle.style.height = Math.random() * 4 + 2 + 'px'; | |
| particle.style.background = 'radial-gradient(circle, rgba(0,212,255,0.8) 0%, transparent 70%)'; | |
| particle.style.borderRadius = '50%'; | |
| particle.style.animationDelay = Math.random() * 10 + 's'; | |
| particle.style.animationDuration = (10 + Math.random() * 10) + 's'; | |
| document.body.appendChild(particle); | |
| } | |
| } | |
| createFloatingParticles(); | |
| // Add keyboard shortcuts | |
| document.addEventListener('keydown', (e) => { | |
| switch(e.key) { | |
| case ' ': | |
| e.preventDefault(); | |
| document.getElementById('toggleAnimation').click(); | |
| break; | |
| case 'p': | |
| document.getElementById('toggleParticles').click(); | |
| break; | |
| case 'g': | |
| document.getElementById('toggleGlow').click(); | |
| break; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |