Spaces:

baouws
/

matrix_music

Sleeping

App Files Files Community

baouws commited on Jun 15, 2025

Commit

91a5c20

verified ·

1 Parent(s): f33f093

Create index.html

Browse files

Files changed (1) hide show

index.html +829 -0

index.html ADDED Viewed

	@@ -0,0 +1,829 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MATRIX MUSIC HACKER v2.1</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/strudel/1.0.0/strudel.umd.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Courier+Prime:wght@400;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Orbitron', monospace;
+            background: #000;
+            color: #00ff00;
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+        /* Matrix rain background */
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1;
+            opacity: 0.1;
+        }
+        .matrix-bg canvas {
+            width: 100%;
+            height: 100%;
+        }
+        .container {
+            position: relative;
+            z-index: 10;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            padding: 20px;
+            border: 2px solid #00ff00;
+            background: rgba(0, 255, 0, 0.03);
+            border-radius: 0;
+            position: relative;
+            overflow: hidden;
+        }
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
+            animation: scan 3s infinite;
+        }
+        .header h1 {
+            font-size: 2.8rem;
+            font-weight: 900;
+            margin-bottom: 10px;
+            text-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00;
+            letter-spacing: 3px;
+            animation: flicker 2s infinite alternate;
+        }
+        .header .subtitle {
+            font-size: 1.2rem;
+            color: #00cccc;
+            font-family: 'Courier Prime', monospace;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        .system-info {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            color: #00ff00;
+            font-family: 'Courier Prime', monospace;
+        }
+        .controls {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        .terminal {
+            background: rgba(0, 0, 0, 0.8);
+            border: 2px solid #00ff00;
+            border-radius: 0;
+            padding: 20px;
+            position: relative;
+            box-shadow:
+                0 0 20px rgba(0, 255, 0, 0.3),
+                inset 0 0 20px rgba(0, 255, 0, 0.1);
+        }
+        .terminal::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #00ff00, transparent);
+            animation: sweep 2s infinite;
+        }
+        .terminal-header {
+            display: flex;
+            justify-content: between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #00ff00;
+        }
+        .terminal-title {
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: #00ff00;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .terminal-status {
+            font-size: 0.8rem;
+            color: #00cccc;
+            font-family: 'Courier Prime', monospace;
+        }
+        .voice-controls {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .hack-btn {
+            padding: 15px 30px;
+            border: 2px solid #00ff00;
+            background: rgba(0, 255, 0, 0.1);
+            color: #00ff00;
+            font-family: 'Orbitron', monospace;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            position: relative;
+            overflow: hidden;
+        }
+        .hack-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.3), transparent);
+            transition: left 0.5s;
+        }
+        .hack-btn:hover::before {
+            left: 100%;
+        }
+        .hack-btn:hover {
+            background: rgba(0, 255, 0, 0.2);
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+            text-shadow: 0 0 10px #00ff00;
+        }
+        .hack-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .hack-btn.active {
+            background: rgba(255, 0, 0, 0.2);
+            border-color: #ff0000;
+            color: #ff0000;
+            animation: pulse-red 1s infinite;
+        }
+        .status-display {
+            padding: 15px;
+            border: 1px solid #00ff00;
+            background: rgba(0, 0, 0, 0.8);
+            margin: 15px 0;
+            font-family: 'Courier Prime', monospace;
+            font-size: 1rem;
+            position: relative;
+        }
+        .status-display::before {
+            content: '> ';
+            color: #00cccc;
+        }
+        .status-display.listening {
+            border-color: #ff0000;
+            color: #ff0000;
+            animation: pulse-red 1s infinite;
+        }
+        .status-display.processing {
+            border-color: #ffff00;
+            color: #ffff00;
+            animation: pulse-yellow 1s infinite;
+        }
+        .status-display.success {
+            border-color: #00ff00;
+            color: #00ff00;
+            animation: pulse-green 1s infinite;
+        }
+        .transcript-display {
+            margin-top: 15px;
+            padding: 10px;
+            background: rgba(0, 255, 0, 0.05);
+            border-left: 4px solid #00ff00;
+            font-family: 'Courier Prime', monospace;
+            font-style: italic;
+            min-height: 40px;
+            color: #00cccc;
+        }
+        .code-matrix {
+            width: 100%;
+            height: 200px;
+            background: rgba(0, 0, 0, 0.9);
+            border: 2px solid #00ff00;
+            padding: 15px;
+            color: #00ff00;
+            font-family: 'Courier Prime', monospace;
+            font-size: 14px;
+            resize: vertical;
+            box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
+        }
+        .code-matrix:focus {
+            outline: none;
+            box-shadow:
+                inset 0 0 20px rgba(0, 255, 0, 0.2),
+                0 0 20px rgba(0, 255, 0, 0.3);
+        }
+        .hack-commands {
+            display: flex;
+            gap: 15px;
+            margin-top: 15px;
+        }
+        .visualization-matrix {
+            grid-column: 1 / -1;
+            height: 400px;
+            border: 2px solid #00ff00;
+            overflow: hidden;
+            position: relative;
+            background: rgba(0, 0, 0, 0.9);
+            box-shadow:
+                0 0 30px rgba(0, 255, 0, 0.3),
+                inset 0 0 30px rgba(0, 255, 0, 0.1);
+        }
+        .viz-header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 10px 20px;
+            background: rgba(0, 0, 0, 0.8);
+            border-bottom: 1px solid #00ff00;
+            font-family: 'Courier Prime', monospace;
+            font-size: 0.9rem;
+            z-index: 5;
+        }
+        .canvas-matrix {
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, #001100 0%, #000000 100%);
+        }
+        .examples-matrix {
+            margin-top: 20px;
+            padding: 15px;
+            background: rgba(0, 255, 0, 0.05);
+            border: 1px solid #00ff00;
+        }
+        .examples-matrix h4 {
+            margin-bottom: 15px;
+            color: #00cccc;
+            font-family: 'Courier Prime', monospace;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .command-list {
+            list-style: none;
+            padding: 0;
+        }
+        .command-list li {
+            padding: 8px 0;
+            color: #00ff00;
+            cursor: pointer;
+            font-family: 'Courier Prime', monospace;
+            border-left: 4px solid transparent;
+            padding-left: 10px;
+            transition: all 0.3s ease;
+        }
+        .command-list li::before {
+            content: '$ ';
+            color: #00cccc;
+        }
+        .command-list li:hover {
+            border-left-color: #00ff00;
+            background: rgba(0, 255, 0, 0.1);
+            text-shadow: 0 0 5px #00ff00;
+        }
+        /* Animations */
+        @keyframes flicker {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
+        }
+        @keyframes scan {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+        @keyframes sweep {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        @keyframes pulse-red {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        @keyframes pulse-yellow {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        @keyframes pulse-green {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        @keyframes matrix-fall {
+            0% { transform: translateY(-100vh); }
+            100% { transform: translateY(100vh); }
+        }
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .controls {
+                grid-template-columns: 1fr;
+            }
+            .header h1 {
+                font-size: 2rem;
+            }
+            .hack-commands {
+                flex-direction: column;
+            }
+        }
+        /* Glitch effect for active states */
+        .glitch {
+            position: relative;
+        }
+        .glitch::before,
+        .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .glitch::before {
+            animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
+            color: #ff0000;
+            z-index: -1;
+        }
+        .glitch::after {
+            animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
+            color: #00ffff;
+            z-index: -2;
+        }
+        @keyframes glitch-anim-1 {
+            0% { clip: rect(42px, 9999px, 44px, 0); }
+            25% { clip: rect(12px, 9999px, 59px, 0); }
+            50% { clip: rect(25px, 9999px, 33px, 0); }
+            75% { clip: rect(91px, 9999px, 94px, 0); }
+            100% { clip: rect(65px, 9999px, 75px, 0); }
+        }
+        @keyframes glitch-anim-2 {
+            0% { clip: rect(65px, 9999px, 119px, 0); }
+            25% { clip: rect(52px, 9999px, 74px, 0); }
+            50% { clip: rect(79px, 9999px, 85px, 0); }
+            75% { clip: rect(29px, 9999px, 95px, 0); }
+            100% { clip: rect(55px, 9999px, 87px, 0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="matrix-bg">
+        <canvas id="matrixCanvas"></canvas>
+    </div>
+    <div class="container">
+        <div class="header">
+            <h1 class="glitch" data-text="MATRIX MUSIC HACKER">MATRIX MUSIC HACKER</h1>
+            <div class="subtitle">Voice-Controlled Beat Synthesis Protocol v2.1</div>
+            <div class="system-info">
+                <span>CONNECTION: SECURE</span>
+                <span>STATUS: ONLINE</span>
+                <span>PROTOCOL: STRUDEL.CC</span>
+            </div>
+        </div>
+        <div class="controls">
+            <div class="terminal">
+                <div class="terminal-header">
+                    <div class="terminal-title">🎤 VOICE INPUT MODULE</div>
+                    <div class="terminal-status">READY</div>
+                </div>
+                <div class="voice-controls">
+                    <button id="startBtn" class="hack-btn">INITIATE VOICE HACK</button>
+                    <button id="stopBtn" class="hack-btn" disabled>TERMINATE CONNECTION</button>
+                    <div id="status" class="status-display">AWAITING VOICE COMMAND...</div>
+                    <div id="transcript" class="transcript-display"></div>
+                </div>
+                <div class="examples-matrix">
+                    <h4>AVAILABLE HACK COMMANDS:</h4>
+                    <ul class="command-list">
+                        <li onclick="useExample(this)">execute drum_sequence --deep-house</li>
+                        <li onclick="useExample(this)">generate bass_matrix --underground</li>
+                        <li onclick="useExample(this)">deploy synth_wave --cyberpunk</li>
+                        <li onclick="useExample(this)">create ambient_hack --matrix</li>
+                        <li onclick="useExample(this)">launch breakbeat --rave</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="terminal">
+                <div class="terminal-header">
+                    <div class="terminal-title">💻 CODE MATRIX</div>
+                    <div class="terminal-status">COMPILING</div>
+                </div>
+                <textarea id="codeArea" class="code-matrix" placeholder="// STRUDEL CODE WILL MATERIALIZE HERE...
+// READY TO HACK THE MATRIX OF SOUND..."></textarea>
+                <div class="hack-commands">
+                    <button id="playBtn" class="hack-btn">EXECUTE HACK</button>
+                    <button id="stopMusicBtn" class="hack-btn">KILL PROCESS</button>
+                </div>
+            </div>
+        </div>
+        <div class="terminal visualization-matrix">
+            <div class="viz-header">
+                <span>🌊 AUDIO VISUALIZATION MATRIX - REAL-TIME FREQUENCY ANALYSIS</span>
+                <span style="float: right;">FPS: 60 | SAMPLES: 1024</span>
+            </div>
+            <canvas id="visualCanvas" class="canvas-matrix"></canvas>
+        </div>
+    </div>
+    <script>
+        // Global variables
+        let recognition;
+        let isListening = false;
+        let audioContext;
+        let analyzer;
+        let canvas;
+        let ctx;
+        let animationId;
+        let currentPattern;
+        let matrixCanvas;
+        let matrixCtx;
+        let matrixColumns = [];
+        // Initialize everything when page loads
+        window.addEventListener('load', function() {
+            initSpeechRecognition();
+            initVisualization();
+            initMatrixBackground();
+        });
+        // Matrix rain background
+        function initMatrixBackground() {
+            matrixCanvas = document.getElementById('matrixCanvas');
+            matrixCtx = matrixCanvas.getContext('2d');
+            function resizeMatrix() {
+                matrixCanvas.width = window.innerWidth;
+                matrixCanvas.height = window.innerHeight;
+                const columnCount = Math.floor(matrixCanvas.width / 20);
+                matrixColumns = [];
+                for (let i = 0; i < columnCount; i++) {
+                    matrixColumns[i] = Math.random() * matrixCanvas.height;
+                }
+            }
+            resizeMatrix();
+            window.addEventListener('resize', resizeMatrix);
+            function drawMatrix() {
+                matrixCtx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+                matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
+                matrixCtx.fillStyle = '#00ff00';
+                matrixCtx.font = '15px monospace';
+                for (let i = 0; i < matrixColumns.length; i++) {
+                    const text = String.fromCharCode(Math.random() * 128);
+                    const x = i * 20;
+                    const y = matrixColumns[i] * 20;
+                    matrixCtx.fillText(text, x, y);
+                    if (y > matrixCanvas.height && Math.random() > 0.975) {
+                        matrixColumns[i] = 0;
+                    }
+                    matrixColumns[i]++;
+                }
+                requestAnimationFrame(drawMatrix);
+            }
+            drawMatrix();
+        }
+        // Speech Recognition Setup
+        function initSpeechRecognition() {
+            if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+                document.getElementById('status').textContent = 'ERROR: VOICE RECOGNITION MODULE NOT FOUND';
+                return;
+            }
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            recognition = new SpeechRecognition();
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            recognition.lang = 'en-US';
+            recognition.onstart = function() {
+                isListening = true;
+                updateUI();
+                document.getElementById('status').textContent = 'VOICE HACK INITIATED... LISTENING FOR COMMANDS';
+                document.getElementById('status').className = 'status-display listening';
+            };
+            recognition.onresult = function(event) {
+                let transcript = '';
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    transcript += event.results[i][0].transcript;
+                }
+                document.getElementById('transcript').textContent = '> ' + transcript;
+                if (event.results[event.results.length - 1].isFinal) {
+                    processVoiceHack(transcript);
+                }
+            };
+            recognition.onerror = function(event) {
+                document.getElementById('status').textContent = 'HACK FAILED: ' + event.error.toUpperCase();
+                document.getElementById('status').className = 'status-display';
+                isListening = false;
+                updateUI();
+            };
+            recognition.onend = function() {
+                isListening = false;
+                updateUI();
+                if (document.getElementById('status').textContent.includes('LISTENING')) {
+                    document.getElementById('status').textContent = 'VOICE HACK TERMINATED... READY FOR NEW COMMAND';
+                    document.getElementById('status').className = 'status-display';
+                }
+            };
+        }
+        // UI Event Handlers
+        document.getElementById('startBtn').addEventListener('click', function() {
+            if (recognition) {
+                recognition.start();
+                this.classList.add('active');
+            }
+        });
+        document.getElementById('stopBtn').addEventListener('click', function() {
+            if (recognition) {
+                recognition.stop();
+                document.getElementById('startBtn').classList.remove('active');
+            }
+        });
+        document.getElementById('playBtn').addEventListener('click', function() {
+            const code = document.getElementById('codeArea').value;
+            if (code.trim()) {
+                executeHack(code);
+            }
+        });
+        document.getElementById('stopMusicBtn').addEventListener('click', function() {
+            killProcess();
+        });
+        function updateUI() {
+            document.getElementById('startBtn').disabled = isListening;
+            document.getElementById('stopBtn').disabled = !isListening;
+            if (isListening) {
+                document.getElementById('startBtn').textContent = 'HACKING IN PROGRESS...';
+            } else {
+                document.getElementById('startBtn').textContent = 'INITIATE VOICE HACK';
+                document.getElementById('startBtn').classList.remove('active');
+            }
+        }
+        // Process voice input and convert to Strudel code
+        function processVoiceHack(transcript) {
+            document.getElementById('status').textContent = 'PROCESSING VOICE HACK... COMPILING AUDIO MATRIX';
+            document.getElementById('status').className = 'status-display processing';
+            const strudelCode = hackTheMatrix(transcript.toLowerCase());
+            document.getElementById('codeArea').value = strudelCode;
+            document.getElementById('status').textContent = 'HACK COMPILED SUCCESSFULLY... READY TO EXECUTE';
+            document.getElementById('status').className = 'status-display success';
+            // Auto-execute the hack
+            setTimeout(() => {
+                executeHack(strudelCode);
+            }, 1000);
+        }
+        // Enhanced cyberpunk conversion to Strudel code
+        function hackTheMatrix(input) {
+            const hackPatterns = [
+                {
+                    keywords: ['drum', 'beat', 'kick', 'deep house', 'house'],
+                    code: `// DEEP HOUSE MATRIX HACK
+stack(
+  s("bd*4").gain(0.8).lpf(1000),
+  s("~ hh ~ hh").gain(0.6).hpf(8000),
+  s("~ ~ sd ~").gain(0.7).room(0.3)
+).slow(2)`
+                },
+                {
+                    keywords: ['bass', 'underground', 'sub'],
+                    code: `// UNDERGROUND BASS MATRIX
+stack(
+  note("c1 ~ c1 ~").s('sawtooth').lpf(200).gain(0.9),
+  note("c2 eb2 f2 g2").s('sawtooth').lpf(400).delay(0.125),
+  s("bd ~ ~ ~").gain(0.8)
+).slow(2)`
+                },
+                {
+                    keywords: ['synth', 'cyberpunk', 'wave', 'cyber'],
+                    code: `// CYBERPUNK SYNTH WAVE
+stack(
+  note("c4 eb4 g4 bb4").s('sawtooth').lpf(800).delay(0.25).room(0.5),
+  note("c3 ~ eb3 ~").s('square').lpf(400).gain(0.7),
+  s("bd hh sd hh").gain(0.6).room(0.2)
+).slow(1.5)`
+                },
+                {
+                    keywords: ['ambient', 'matrix', 'atmospheric'],
+                    code: `// MATRIX AMBIENT HACK
+stack(
+  note("c3 eb3 g3 bb3").s('sawtooth').lpf(300).delay(0.5).room(0.9).slow(4),
+  note("c4 ~ ~ ~").s('sine').lpf(200).gain(0.5).slow(8),
+  s("~ ~ ~ bd").gain(0.3).room(0.8)
+).slow(2)`
+                },
+                {
+                    keywords: ['breakbeat', 'rave', 'break', 'jungle'],
+                    code: `// UNDERGROUND RAVE BREAKBEAT
+stack(
+  s("bd*2 ~ sd bd").gain(0.8).speed(1.2),
+  s("~ hh*4 ~ hh*2").gain(0.4).hpf(10000),
+  note("c2 ~ f2 g2").s('sawtooth').lpf(600).gain(0.7)
+).fast(2)`
+                },
+                {
+                    keywords: ['techno', 'industrial', 'machine'],
+                    code: `// INDUSTRIAL TECHNO MATRIX
+stack(
+  s("bd*4").gain(0.9).distort(0.3),
+  s("~ ~ sd ~").gain(0.7).room(0.1),
+  s("hh*8").gain(0.3).hpf(12000),
+  note("c2 ~ ~ c2").s('sawtooth').lpf(300).gain(0.6)
+)`
+                }
+            ];
+            // Find the best matching hack pattern
+            for (const pattern of hackPatterns) {
+                if (pattern.keywords.some(keyword => input.includes(keyword))) {
+                    return pattern.code;
+                }
+            }
+            // Default matrix hack if no match
+            return `// DEFAULT MATRIX HACK
+stack(
+  s("bd ~ sd ~").gain(0.8).room(0.2),
+  s("~ hh ~ hh").gain(0.5).hpf(8000),
+  note("c2 ~ e2 ~").s('sawtooth').lpf(500)
+)`;
+        }
+        // Execute the hack (play music)
+        function executeHack(code) {
+            try {
+                document.getElementById('status').textContent = 'HACK EXECUTED... INJECTING AUDIO INTO MATRIX';
+                document.getElementById('status').className = 'status-display success';
+                // Start visualization
+                startMatrixVisualization();
+                currentPattern = {
+                    code: code,
+                    playing: true,
+                    startTime: Date.now()
+                };
+            } catch (error) {
+                console.error('Hack execution failed:', error);
+                document.getElementById('status').textContent = 'HACK EXECUTION FAILED... SYSTEM COMPROMISED';
+            }
+        }
+        function killProcess() {
+            if (currentPattern) {
+                currentPattern.playing = false;
+                currentPattern = null;
+            }
+            stopMatrixVisualization();
+            document.getElementById('status').textContent = 'PROCESS TERMINATED... MATRIX RESTORED';
+            document.getElementById('status').className = 'status-display';
+        }
+        // Visualization
+        function initVisualization() {
+            canvas = document.getElementById('visualCanvas');
+            ctx = canvas.getContext('2d');
+            resizeCanvas();
+            window.addEventListener('resize', resizeCanvas);
+        }
+        function resizeCanvas() {
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
+        }
+        function startMatrixVisualization() {
+            if (animationId) return;
+            function animate() {
+                if (!currentPattern || !currentPattern.playing) {
+                    stopMatrixVisualization();
+                    return;
+                }
+                const width = canvas.width;
+                const height = canvas.height;
+                const time = (Date.now() - currentPattern.startTime) * 0.001;
+                // Clear with matrix-style fade
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+                ctx.fillRect(0, 0, width, height);
+                // Draw central matrix core
+                const centerX = width / 2;
+                const centerY = height / 2;
+                // Pulsing core
+                const coreRadius = 50 + Math.sin(time * 4) * 20;
+                const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, coreRadius);
+                gradient.addColorStop(0, 'rgba(0, 255, 0, 0.8)');
+                gradient.addColorStop(0.5, 'rgba(0, 255, 0, 0.3)');
+                gradient.addColorStop(1, 'rgba(0, 255, 0, 0)');
+                ctx.fillStyle = gradient;