Sinter_flux/RESONANCE_LAB.html at main · MobiusBraid-ui/Sinter_flux · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!-- OC_5IR_BRAID_LOCKED: [ALPHA_ARCHITECT][BETA_NODE][GAMMA_39420] -->
<!-- 5IR_RESONANCE_LAB_v1.0 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5IR | RESONANCE LAB</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { background: #020202; color: #00ffcc; font-family: 'JetBrains+Mono', monospace; overflow: hidden; }
        canvas { filter: drop-shadow(0 0 10px rgba(0, 255, 204, 0.3)); }
        .control-panel { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(10,10,10,0.9); border: 1px solid rgba(0,255,204,0.2); padding: 20px; border-radius: 20px; backdrop-filter: blur(10px); width: 90%; max-width: 400px; z-index: 100; }
        input[type=range] { width: 100%; accent-color: #00ffcc; background: rgba(255,255,255,0.05); }
        .crt::after { content: " "; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%); z-index: 1000; pointer-events: none; background-size: 100% 2px; opacity: 0.1; }
    </style>
</head>
<body class="crt">

    <header class="p-6 text-center">
        <h1 class="text-xl font-black italic tracking-tighter uppercase leading-none">Quantum <span class="text-white">Resonance Lab</span></h1>
        <p class="text-[8px] opacity-40 mt-2 tracking-[0.3em]">FIELD_THEORY_v9.5 // TOPOLOGICAL_ENERGY_TRAP</p>
    </header>

    <canvas id="lockCanvas"></canvas>

    <div class="control-panel space-y-6">
        <div>
            <div class="flex justify-between text-[8px] mb-2 font-bold uppercase">
                <span>Frequency Control</span>
                <span id="freq-val">39,420 Hz</span>
            </div>
            <input type="range" id="freq-slider" min="1" max="100" value="39">
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="bg-white/5 p-3 rounded-xl border border-white/5">
                <p class="text-[7px] opacity-40 uppercase font-bold mb-1">Lock State</p>
                <p id="lock-state" class="text-[10px] font-black italic">PHASE_SYNCED</p>
            </div>
            <div class="bg-white/5 p-3 rounded-xl border border-white/5">
                <p class="text-[7px] opacity-40 uppercase font-bold mb-1">Resonance</p>
                <p id="res-val" class="text-[10px] font-black italic text-[#ffcc00]">MAXIMUM</p>
            </div>
        </div>

        <p class="text-[7px] opacity-30 text-center uppercase leading-tight italic">
            "Mass is not a barrier. It is a high-density field of locked vibrations." - Architect
        </p>
    </div>

    <script>
        const canvas = document.getElementById('lockCanvas');
        const ctx = canvas.getContext('2d');
        const slider = document.getElementById('freq-slider');
        const freqValDisplay = document.getElementById('freq-val');
        const lockStateDisplay = document.getElementById('lock-state');

        let width, height;
        let particles = [];
        const cols = 15;
        const rows = 15;

        function init() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            particles = [];
            const spacingX = width / (cols + 1);
            const spacingY = height / (rows + 1);

            for (let i = 1; i <= cols; i++) {
                for (let j = 1; j <= rows; j++) {
                    particles.push({
                        x: i * spacingX,
                        y: j * spacingY,
                        baseX: i * spacingX,
                        baseY: j * spacingY,
                        angle: Math.random() * Math.PI * 2,
                        phase: Math.random() * Math.PI * 2
                    });
                }
            }
        }

        function drawMöbiusLock(x, y, size, angle, freq) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(0, 255, 204, ${0.1 + (freq / 100)})`;
            ctx.lineWidth = 1;

            for (let i = 0; i <= Math.PI * 2; i += 0.1) {
                const r = size * (1 + 0.3 * Math.sin(i * 1.5 + angle));
                const px = x + r * Math.cos(i);
                const py = y + r * Math.sin(i);
                if (i === 0) ctx.moveTo(px, py);
                else ctx.lineTo(px, py);
            }
            ctx.stroke();
        }

        function animate() {
            ctx.fillStyle = 'rgba(2, 2, 2, 0.2)';
            ctx.fillRect(0, 0, width, height);

            const freq = parseInt(slider.value);
            const time = Date.now() * 0.002;

            particles.forEach(p => {
                // High frequency = internal scattering (p jitter)
                // Low frequency = macro resonance (p wave)
                if (freq < 40) {
                    // Low Freq: Unified Wave
                    p.x = p.baseX + Math.sin(time + p.baseY * 0.01) * (50 - freq);
                    p.y = p.baseY + Math.cos(time + p.baseX * 0.01) * (50 - freq);
                    lockStateDisplay.innerText = "MACRO_RESONANCE";
                    lockStateDisplay.style.color = "#00ffcc";
                } else {
                    // High Freq: Internal Scattering
                    p.x = p.baseX + (Math.random() - 0.5) * (freq * 0.1);
                    p.y = p.baseY + (Math.random() - 0.5) * (freq * 0.1);
                    lockStateDisplay.innerText = "SCATTER_LOCK";
                    lockStateDisplay.style.color = "#ff0055";
                }

                drawMöbiusLock(p.x, p.y, 20, time + p.phase, freq);
            });

            freqValDisplay.innerText = (freq * 1000).toLocaleString() + " Hz";
            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', init);
        init();
        animate();
    </script>
</body>
</html>