Dynamic Quantum Frequency Visualizer: Smooth JavaScript Ring Animation

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Radial Reactor Core</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

body {
            background-color: #030305;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

#visualizer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

.dashboard {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            display: flex;
            justify-content: space-between;
            padding: 40px;
        }

.panel {
            background: linear-gradient(135deg, rgba(15, 15, 20, 0.6) 0%, rgba(5, 5, 8, 0.8) 100%);
            border: 1px solid rgba(0, 243, 255, 0.15);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 12px;
            padding: 30px;
            width: 320px;
            height: fit-content;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 243, 255, 0.05);
            position: relative;
            overflow: hidden;
        }

.panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00f3ff, transparent);
        }

.header h1 {
            color: #ffffff;
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

.pulse-indicator {
            width: 8px;
            height: 8px;
            background-color: #00f3ff;
            border-radius: 50%;
            box-shadow: 0 0 12px #00f3ff;
            animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

.subtitle {
            color: #64748b;
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

.data-grid {
            display: grid;
            gap: 20px;
        }

.data-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

.label {
            color: #94a3b8;
            font-size: 0.7rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

.value {
            color: #00f3ff;
            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
        }

.right-panel {
            text-align: right;
            align-items: flex-end;
        }

.right-panel .header h1 {
            flex-direction: row-reverse;
        }

@keyframes ping {
            75%, 100% {
                transform: scale(2.5);
                opacity: 0;
            }
        }
    </style>
</head>
<body>

<div class="dashboard">
        <div class="panel">
            <div class="header">
                <div class="pulse-indicator"></div>
                <h1>Aegis Core</h1>
            </div>
            <div class="subtitle">System Analytics</div>
            <div class="data-grid">
                <div class="data-item">
                    <span class="label">Core Resonance</span>
                    <span class="value" id="res-val">0.00%</span>
                </div>
                <div class="data-item">
                    <span class="label">Kinetic Output</span>
                    <span class="value" id="kin-val">0.00 THz</span>
                </div>
                <div class="data-item">
                    <span class="label">Stability Index</span>
                    <span class="value" style="color: #bd00ff; text-shadow: 0 0 10px rgba(189, 0, 255, 0.4);">OPTIMAL</span>
                </div>
            </div>
        </div>
        
        <div class="panel right-panel">
            <div class="header">
                <h1>Telemetry</h1>
            </div>
            <div class="subtitle">Spatial Mapping</div>
            <div class="data-grid">
                <div class="data-item">
                    <span class="label">Vector X</span>
                    <span class="value" id="vec-x">000.0</span>
                </div>
                <div class="data-item">
                    <span class="label">Vector Y</span>
                    <span class="value" id="vec-y">000.0</span>
                </div>
            </div>
        </div>
    </div>

let width = canvas.width = window.innerWidth;
        let height = canvas.height = window.innerHeight;

const BARS_OUTER = 160;
        const BARS_INNER = 80;

const outerBars = Array.from({ length: BARS_OUTER }, () => ({ current: 0 }));
        const innerBars = Array.from({ length: BARS_INNER }, () => ({ current: 0 }));

let mouseX = width / 2;
        let mouseY = height / 2;
        let targetX = mouseX;
        let targetY = mouseY;
        let isHovering = false;
        let globalTime = 0;

window.addEventListener('resize', () => {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        });

window.addEventListener('mousemove', (e) => {
            targetX = e.clientX;
            targetY = e.clientY;
            isHovering = true;
        });

window.addEventListener('mouseout', () => {
            isHovering = false;
            targetX = width / 2;
            targetY = height / 2;
        });

function animate() {
            ctx.fillStyle = '#030305';
            ctx.fillRect(0, 0, width, height);

mouseX += (targetX - mouseX) * 0.08;
            mouseY += (targetY - mouseY) * 0.08;

const cx = width / 2;
            const cy = height / 2;
            
            const dx = mouseX - cx;
            const dy = mouseY - cy;
            const dist = Math.min(Math.hypot(dx, dy), 600);
            
            let mAngle = Math.atan2(dy, dx);
            if (mAngle < 0) mAngle += Math.PI * 2;

globalTime += 0.003;

let totalIntensity = 0;

ctx.save();
            ctx.translate(cx, cy);

for (let i = 0; i < BARS_OUTER; i++) {
                const baseAngle = (i / BARS_OUTER) * Math.PI * 2;
                const worldAngle = (baseAngle + globalTime) % (Math.PI * 2);

let diff = Math.abs(mAngle - worldAngle);
                if (diff > Math.PI) diff = Math.PI * 2 - diff;

const intensity = Math.max(0, 1 - diff / 1.5);
                const passiveWave = Math.sin(baseAngle * 10 + globalTime * 20) * 15;
                
                let targetH = 20 + passiveWave + (intensity * (dist * 0.4));
                if (targetH < 4) targetH = 4;

outerBars[i].current += (targetH - outerBars[i].current) * 0.15;
                totalIntensity += outerBars[i].current;

const hue = 180 + (outerBars[i].current * 0.8);
                
                ctx.save();
                ctx.rotate(worldAngle);
                ctx.beginPath();
                ctx.moveTo(180, 0);
                ctx.lineTo(180 + outerBars[i].current, 0);
                ctx.lineWidth = 3;
                ctx.lineCap = 'round';
                ctx.strokeStyle = `hsl(${hue}, 100%, 60%)`;
                ctx.shadowBlur = 15;
                ctx.shadowColor = `hsl(${hue}, 100%, 50%)`;
                ctx.stroke();
                ctx.restore();
            }

for (let i = 0; i < BARS_INNER; i++) {
                const baseAngle = (i / BARS_INNER) * Math.PI * 2;
                const worldAngle = (baseAngle - globalTime * 1.5);
                
                let normalizedWorld = worldAngle % (Math.PI * 2);
                if (normalizedWorld < 0) normalizedWorld += Math.PI * 2;

let diff = Math.abs(mAngle - normalizedWorld);
                if (diff > Math.PI) diff = Math.PI * 2 - diff;

const intensity = Math.max(0, 1 - diff / 1.2);
                const passiveWave = Math.cos(baseAngle * 8 - globalTime * 15) * 8;
                
                let targetH = 10 + passiveWave + (intensity * (dist * 0.15));
                if (targetH < 2) targetH = 2;

innerBars[i].current += (targetH - innerBars[i].current) * 0.1;

ctx.save();
                ctx.rotate(worldAngle);
                ctx.beginPath();
                ctx.moveTo(150, 0);
                ctx.lineTo(150 - innerBars[i].current, 0);
                ctx.lineWidth = 2;
                ctx.lineCap = 'round';
                ctx.strokeStyle = `hsl(280, 100%, 65%)`;
                ctx.shadowBlur = 10;
                ctx.shadowColor = `hsl(280, 100%, 50%)`;
                ctx.stroke();
                ctx.restore();
            }

ctx.beginPath();
            ctx.arc(0, 0, 120, 0, Math.PI * 2);
            ctx.strokeStyle = 'rgba(0, 243, 255, 0.1)';
            ctx.lineWidth = 1;
            ctx.stroke();

ctx.beginPath();
            ctx.arc(0, 0, 100 + Math.sin(globalTime * 10) * 5, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(0, 243, 255, 0.03)';
            ctx.fill();
            ctx.strokeStyle = 'rgba(0, 243, 255, 0.3)';
            ctx.lineWidth = 2;
            ctx.stroke();

ctx.restore();

if (Math.random() > 0.8) {
                const avgResonance = (totalIntensity / BARS_OUTER);
                resVal.textContent = `${avgResonance.toFixed(2)}%`;
                kinVal.textContent = `${(avgResonance * 0.14).toFixed(3)} THz`;
                vecX.textContent = (dx).toFixed(1).padStart(6, '0');
                vecY.textContent = (dy).toFixed(1).padStart(6, '0');
            }

requestAnimationFrame(animate);
        }

animate();
    </script>
</body>
</html>

Dynamic Quantum Frequency Visualizer: Smooth JavaScript Ring Animation

You may like these posts :

Write Your Comment