Spaces:

HI7RAI
/

anycoder-7950d098

Running

App Files Files Community

HI7RAI commited on Feb 13

Commit

b42b938

verified ·

1 Parent(s): 3d927db

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +510 -744

index.html CHANGED Viewed

@@ -1,760 +1,526 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NEXUS FX OS | AI Sci-Fi Studio</title>
-    <!-- Libraries -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/browser/math.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pako@2.1.0/dist/pako.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
-    <!-- Three.js Import Map -->
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
-                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
-            }
-        }
-    </script>
-    <style>
-        :root {
-            --bg-void: #030306;
-            --bg-panel: #0a0a0f;
-            --bg-card: #12121a;
-            --border: #1a1a2e;
-            --accent-cyan: #00f0ff;
-            --accent-magenta: #ff00aa;
-            --accent-lime: #00ff66;
-            --accent-red: #ff2244;
-            --text: #e8e8f0;
-            --text-dim: #6a6a7a;
-        }
-        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
-        body {
-            font-family: 'JetBrains Mono', monospace;
-            background: var(--bg-void);
-            color: var(--text);
-            overflow: hidden;
-            height: 100vh;
-            background-image:
-                radial-gradient(circle at 10% 20%, rgba(0, 240, 255, 0.1) 0%, transparent 20%),
-                radial-gradient(circle at 90% 80%, rgba(255, 0, 170, 0.1) 0%, transparent 20%);
-        }
-        .font-display { font-family: 'Orbitron', sans-serif; }
-        .glitch-text {
-            position: relative;
-        }
-        .glitch-text::before, .glitch-text::after {
-            content: attr(data-text);
-            position: absolute;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background: var(--bg-void);
-        }
-        .glitch-text::before {
-            left: 2px; text-shadow: -1px 0 var(--accent-magenta);
-            clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse;
-        }
-        .glitch-text::after {
-            left: -2px; text-shadow: -1px 0 var(--accent-cyan);
-            clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse;
-        }
-        @keyframes glitch-anim {
-            0% { clip: rect(14px, 9999px, 127px, 0); }
-            20% { clip: rect(80px, 9999px, 95px, 0); }
-            40% { clip: rect(10px, 9999px, 50px, 0); }
-            60% { clip: rect(60px, 9999px, 120px, 0); }
-            80% { clip: rect(20px, 9999px, 80px, 0); }
-            100% { clip: rect(100px, 9999px, 110px, 0); }
-        }
-        @keyframes glitch-anim-2 {
-            0% { clip: rect(65px, 9999px, 100px, 0); }
-            20% { clip: rect(10px, 9999px, 40px, 0); }
-            40% { clip: rect(90px, 9999px, 130px, 0); }
-            60% { clip: rect(30px, 9999px, 80px, 0); }
-            80% { clip: rect(70px, 9999px, 110px, 0); }
-            100% { clip: rect(50px, 9999px, 90px, 0); }
-        }
-        /* Scrollbars */
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: var(--bg-void); }
-        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }
-        /* Custom Inputs */
-        input[type=range] {
-            -webkit-appearance: none; width: 100%; background: transparent;
-        }
-        input[type=range]::-webkit-slider-thumb {
-            -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%;
-            background: var(--text); cursor: pointer; margin-top: -5px;
-            box-shadow: 0 0 5px var(--accent-cyan);
-        }
-        input[type=range]::-webkit-slider-runnable-track {
-            width: 100%; height: 4px; cursor: pointer; background: var(--border); border-radius: 2px;
-        }
-        .glass-panel {
-            background: rgba(10, 10, 15, 0.85);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255,255,255,0.08);
-            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
-        }
-        .neon-box {
-            border: 1px solid var(--border);
-            transition: all 0.2s;
-        }
-        .neon-box:hover { box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); border-color: var(--accent-cyan); }
-        .neon-box.active { box-shadow: 0 0 20px var(--accent-cyan); border-color: var(--accent-cyan); }
-        .fx-card {
-            background: rgba(18, 18, 26, 0.9);
-            border-left: 3px solid var(--border);
-            transition: all 0.3s;
-        }
-        .fx-card:hover { background: rgba(25, 25, 35, 0.95); }
-        .fx-card.active { border-left-color: var(--accent-lime); background: rgba(0, 50, 30, 0.2); box-shadow: inset 0 0 20px rgba(0, 255, 100, 0.1); }
-        /* 3D Canvas Container */
-        #viewport-3d {
-            background: radial-gradient(circle at center, #1a1a24 0%, #000000 100%);
-        }
-    </style>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
 <body class="flex flex-col h-screen">
-    <!-- HEADER -->
-    <header class="h-16 bg-[#050508] border-b border-[#1a1a2e] flex items-center justify-between px-6 z-50 shadow-[0_5px_20px_rgba(0,0,0,0.8)]">
-        <div class="flex items-center gap-4">
-            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-cyan-500 to-magenta-600 flex items-center justify-center shadow-[0_0_15px_rgba(0,240,255,0.5)]">
-                <i class="fa-solid fa-cube text-white text-xl"></i>
-            </div>
-            <div>
-                <h1 class="font-display text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-magenta-400 glitch-text" data-text="NEXUS FX OS">
-                    NEXUS FX OS
-                </h1>
-                <div class="text-xs text-cyan-500/70 font-mono tracking-widest">INTELLIGENT MEDIA ENGINE // V.2.0.24</div>
-            </div>
         </div>
-        <div class="flex items-center gap-3">
-            <button id="btn-randomize" class="hidden md:flex items-center gap-2 px-4 py-2 rounded bg-[#1a1a2e] hover:bg-[#2a2a4e] text-cyan-400 border border-[#1a1a2e] transition-all hover:border-cyan-500/50 hover:shadow-[0_0_10px_rgba(0,240,255,0.3)] font-mono text-xs uppercase tracking-wider">
-                <i class="fa-solid fa-shuffle"></i> Randomize System
-            </button>
-            <button id="btn-export" class="flex items-center gap-2 px-4 py-2 rounded bg-gradient-to-r from-cyan-600 to-blue-700 hover:from-cyan-500 hover:to-blue-600 text-white shadow-[0_0_15px_rgba(0,240,255,0.4)] transition-all hover:shadow-[0_0_25px_rgba(0,240,255,0.6)] font-mono text-xs uppercase tracking-wider font-bold">
-                <i class="fa-solid fa-download"></i> Export Project
-            </button>
         </div>
-    </header>
-    <!-- MAIN LAYOUT -->
-    <main class="flex-1 flex overflow-hidden">
-        <!-- LEFT PANEL: FX LIBRARY -->
-        <aside class="w-80 bg-[#0a0a0f] border-r border-[#1a1a2e] flex flex-col overflow-hidden">
-            <div class="p-4 border-b border-[#1a1a2e] bg-[#050508]">
-                <div class="flex items-center justify-between mb-3">
-                    <h2 class="font-display text-sm text-cyan-400 tracking-widest">FX LIBRARY <span class="text-[10px] bg-cyan-900/30 px-2 py-0.5 rounded ml-2">50+ MODULES</span></h2>
-                    <div class="relative">
-                        <i class="fa-solid fa-search absolute left-3 top-2.5 text-cyan-500/50 text-xs"></i>
-                        <input type="text" id="search-fx" placeholder="Search shaders..." class="w-full pl-8 pr-3 py-1.5 bg-[#12121a] border border-[#1a1a2e] rounded text-[10px] text-cyan-200 focus:border-cyan-500 focus:outline-none transition-colors">
-                    </div>
-                </div>
-                <div class="flex gap-2 overflow-x-auto pb-2">
-                    <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-cyan-300 border border-[#1a1a2e] cursor-pointer hover:bg-cyan-900/30 hover:border-cyan-500/50 transition">ALL</span>
-                    <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-purple-300 border border-[#1a1a2e] cursor-pointer hover:bg-purple-900/30 hover:border-purple-500/50 transition">COLOR</span>
-                    <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-red-300 border border-[#1a1a2e] cursor-pointer hover:bg-red-900/30 hover:border-red-500/50 transition">GLITCH</span>
-                    <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-green-300 border border-[#1a1a2e] cursor-pointer hover:bg-green-900/30 hover:border-green-500/50 transition">GEOMETRY</span>
-                    <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-yellow-300 border border-[#1a1a2e] cursor-pointer hover:bg-yellow-900/30 hover:border-yellow-500/50 transition">AUDIO</span>
-                </div>
-            </div>
-            <div id="fx-list" class="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar">
-                <!-- FX Items Injected Here -->
-            </div>
-            <div class="p-4 border-t border-[#1a1a2e] bg-[#050508]">
-                <h3 class="text-[10px] uppercase text-gray-500 mb-2 font-bold tracking-wider">Media Input</h3>
-                <div class="grid grid-cols-2 gap-2">
-                    <label class="cursor-pointer flex flex-col items-center justify-center p-3 rounded border border-[#1a1a2e] hover:border-cyan-500/50 hover:bg-cyan-900/10 transition group">
-                        <i class="fa-solid fa-video text-cyan-500 mb-1 group-hover:text-cyan-300 transition"></i>
-                        <span class="text-[10px] text-cyan-200 group-hover:text-white">Load Video</span>
-                        <input type="file" id="inp-video" accept="video/*" class="hidden">
-                    </label>
-                    <label class="cursor-pointer flex flex-col items-center justify-center p-3 rounded border border-[#1a1a2e] hover:border-magenta-500/50 hover:bg-magenta-900/10 transition group">
-                        <i class="fa-solid fa-music text-magenta-500 mb-1 group-hover:text-magenta-300 transition"></i>
-                        <span class="text-[10px] text-cyan-200 group-hover:text-white">Load Audio</span>
-                        <input type="file" id="inp-audio" accept="audio/*" class="hidden">
-                    </label>
-                </div>
-            </div>
-        </aside>
-        <!-- CENTER: VIEWPORT -->
-        <section class="flex-1 relative flex flex-col items-center justify-center bg-[#030306] overflow-hidden">
-            <!-- 3D Canvas -->
-            <div id="viewport-3d" class="absolute inset-0 w-full h-full z-0">
-                <canvas id="glCanvas" class="w-full h-full object-contain"></canvas>
-            </div>
-            <!-- Overlay Info -->
-            <div class="absolute top-4 left-4 z-10 flex flex-col gap-2 pointer-events-none">
-                <div class="glass-panel px-3 py-2 rounded border-l-4 border-cyan-500">
-                    <div class="text-[10px] text-cyan-300 uppercase font-bold">Current Engine</div>
-                    <div class="text-xs font-mono text-white" id="engine-status">WebGL 2.0 // Three.js Core</div>
-                </div>
-                <div class="glass-panel px-3 py-2 rounded border-l-4 border-magenta-500 w-48">
-                    <div class="text-[10px] text-magenta-300 uppercase font-bold">Audio Reactivity</div>
-                    <div class="flex items-center gap-2 mt-1">
-                        <div class="flex-1 h-1 bg-gray-800 rounded overflow-hidden">
-                            <div id="audio-bar" class="h-full bg-magenta-500 w-0 transition-all duration-75"></div>
-                        </div>
-                        <span id="audio-val" class="text-[9px] font-mono text-magenta-300">0%</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Bottom Controls -->
-            <div class="absolute bottom-6 z-20 flex items-center gap-4 bg-[#00000080] backdrop-blur-md px-6 py-3 rounded-full border border-[#1a1a2e] shadow-[0_0_30px_rgba(0,0,0,0.8)]">
-                <button id="btn-play" class="w-10 h-10 rounded-full bg-white text-black hover:bg-cyan-400 transition flex items-center justify-center">
-                    <i class="fa-solid fa-play text-sm ml-0.5"></i>
-                </button>
-                <div class="flex flex-col">
-                    <span class="text-[9px] text-gray-400 uppercase tracking-widest">Time</span>
-                    <span id="time-display" class="font-mono text-sm text-cyan-400">00:00:00</span>
-                </div>
-                <button id="btn-screenshot" class="px-3 py-1 rounded text-[10px] text-gray-300 hover:text-white hover:bg-white/10 transition border border-transparent hover:border-white/20">
-                    <i class="fa-solid fa-camera mr-1"></i> Snapshot
-                </button>
-            </div>
-        </section>
-        <!-- RIGHT PANEL: STACK & SETTINGS -->
-        <aside class="w-80 bg-[#0a0a0f] border-l border-[#1a1a2e] flex flex-col overflow-hidden z-10">
-            <!-- Active Stack -->
-            <div class="p-4 border-b border-[#1a1a2e] bg-[#050508]">
-                <div class="flex items-center justify-between">
-                    <h2 class="font-display text-sm text-cyan-400 tracking-widest">EFFECT STACK</h2>
-                    <span id="stack-count" class="text-[10px] bg-cyan-900/30 text-cyan-300 px-2 py-0.5 rounded border border-cyan-900/50">0 / 12</span>
-                </div>
-                <div class="text-[9px] text-gray-500 mt-1">Drag to reorder • Click to adjust</div>
             </div>
-            <div id="stack-list" class="flex-1 overflow-y-auto p-4 space-y-3 bg-[#08080c]">
-                <!-- Active Effects go here -->
-                <div class="text-center py-10 text-gray-600 text-sm border-2 border-dashed border-gray-800 rounded">
-                    <i class="fa-solid fa-layer-group text-2xl mb-2 opacity-50"></i>
-                    No effects active. Drag from library.
-                </div>
             </div>
-            <!-- Quick Settings -->
-            <div class="p-4 border-t border-[#1a1a2e] bg-[#050508] space-y-4">
-                <div>
-                    <div class="flex justify-between mb-1">
-                        <label class="text-[10px] text-cyan-400 uppercase font-bold tracking-wider">Global Resolution</label>
-                        <span id="res-val" class="text-[9px] text-gray-400 font-mono">1080p</span>
-                    </div>
-                    <input type="range" id="global-res" min="360" max="2160" step="72" value="1080" class="w-full">
-                </div>
-                <div>
-                    <div class="flex justify-between mb-1">
-                        <label class="text-[10px] text-magenta-400 uppercase font-bold tracking-wider">Frame Rate (FPS)</label>
-                        <span id="fps-val" class="text-[9px] text-gray-400 font-mono">60.000</span>
-                    </div>
-                    <input type="range" id="global-fps" min="15" max="240" step="0.1" value="60" class="w-full">
-                </div>
-                <div class="pt-2 border-t border-[#1a1a2e]">
-                    <h3 class="text-[10px] text-gray-500 uppercase font-bold mb-2">APK Converter</h3>
-                    <div class="flex items-center justify-between text-[9px] text-gray-400 mb-2 bg-[#000] p-2 rounded border border-[#1a1a2e]">
-                        <span>Web to Android Builder</span>
-                        <i class="fa-solid fa-mobile-screen text-cyan-500"></i>
-                    </div>
-                    <div class="grid grid-cols-2 gap-2">
-                        <input type="text" id="app-name" placeholder="App Name" class="bg-[#12121a] border border-[#1a1a2e] rounded px-2 py-1 text-[9px] text-cyan-200 focus:border-cyan-500">
-                        <input type="text" id="app-id" placeholder="Bundle ID" class="bg-[#12121a] border border-[#1a1a2e] rounded px-2 py-1 text-[9px] text-cyan-200 focus:border-cyan-500" value="com.nexus.app">
-                    </div>
-                    <button id="btn-build-apk" class="w-full mt-2 py-1.5 rounded bg-[#1a1a2e] hover:bg-[#2a2a4e] text-[10px] text-cyan-300 border border-[#1a1a2e] transition flex items-center justify-center gap-2">
-                        <i class="fa-solid fa-code-commit"></i> Generate Android Project
-                    </button>
-                </div>
-            </div>
-        </aside>
-    </main>
-    <!-- SCRIPTS -->
-    <script type="module">
-        import * as THREE from 'three';
-        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-        // --- 1. FX LIBRARY DEFINITION ---
-        const FX_LIBRARY = [
-            { id: 'bw', name: 'Monochrome', category: 'Color', desc: 'Converts video to black and white with contrast control.', glsl: `
-                uniform float amount;
-                void main() {
-                    vec4 color = texture2D(tDiffuse, vUv);
-                    float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
-                    gl_FragColor = vec4(vec3(gray * amount), color.a);
-                }`
-            },
-            { id: 'rgb_shift', name: 'Chromatic Aberration', category: 'Glitch', desc: 'Separates RGB channels for sci-fi distortion.', glsl: `
-                uniform float amount;
-                uniform float uAudio;
-                void main() {
-                    float offset = amount * 0.05 * (1.0 + uAudio);
-                    vec2 rUv = vUv + vec2(offset, 0.0);
-                    vec2 gUv = vUv;
-                    vec2 bUv = vUv - vec2(offset, 0.0);
-                    vec4 r = texture2D(tDiffuse, rUv);
-                    vec4 g = texture2D(tDiffuse, gUv);
-                    vec4 b = texture2D(tDiffuse, bUv);
-                    gl_FragColor = vec4(r.r, g.g, b.b, 1.0);
-                }`
-            },
-            { id: 'noise', name: 'Digital Noise', category: 'Glitch', desc: 'Static noise overlay with audio sensitivity.', glsl: `
-                uniform float amount;
-                uniform float time;
-                float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); }
-                void main() {
-                    vec4 color = texture2D(tDiffuse, vUv);
-                    float diff = (rand(vUv + time) - 0.5) * amount;
-                    gl_FragColor = vec4(color.rgb + diff, color.a);
-                }`
-            },
-            { id: 'scanlines', name: 'CRT Scanlines', category: 'Visual', desc: 'Retro television scanline effect.', glsl: `
-                uniform float amount;
-                uniform vec2 resolution;
-                void main() {
-                    vec4 color = texture2D(tDiffuse, vUv);
-                    float scanline = sin(vUv.y * resolution.y * 0.5) * 0.1 * amount;
-                    gl_FragColor = vec4(color.rgb - scanline, color.a);
-                }`
-            },
-            { id: 'vignette', name: 'Neon Vignette', category: 'Art', desc: 'Darken edges with neon color bleed.', glsl: `
-                uniform float amount;
-                uniform vec2 resolution;
-                void main() {
-                    vec4 color = texture2D(tDiffuse, vUv);
-                    vec2 uv = vUv - 0.5;
-                    float dist = length(uv);
-                    float aspect = resolution.x / resolution.y;
-                    uv.x *= aspect;
-                    float curve = smoothstep(0.8, 0.1, length(uv));
-                    gl_FragColor = vec4(color.rgb * curve, color.a);
-                }`
-            },
-            { id: 'shockwave', name: 'Sonic Shockwave', category: 'Audio', desc: 'Expands based on bass frequencies.', glsl: `
-                uniform float amount;
-                uniform float uAudio;
-                uniform vec2 resolution;
-                void main() {
-                    vec2 uv = vUv - 0.5;
-                    float aspect = resolution.x / resolution.y;
-                    uv.x *= aspect;
-                    float radius = length(uv);
-                    float angle = atan(uv.y, uv.x);
-                    // Distort based on audio
-                    float distortion = sin(angle * 10.0 + radius * 20.0 * uAudio + uAudio * 5.0) * amount * 0.1;
-                    vec2 newUv = vUv + distortion * vec2(cos(angle), sin(angle));
-                    gl_FragColor = texture2D(tDiffuse, newUv);
-                }`
-            },
-            { id: 'pixelate', name: 'Mosaic Glitch', category: 'Glitch', desc: 'Blocky pixelation based on mid frequencies.', glsl: `
-                uniform float amount;
-                uniform vec2 resolution;
-                void main() {
-                    float d = 1.0 / (amount * 100.0 + 10.0);
-                    vec2 coord = d * floor(vUv / d);
-                    gl_FragColor = texture2D(tDiffuse, coord);
-                }`
-            },
-            { id: 'invert', name: 'Cyber Invert', category: 'Color', desc: 'High contrast negative effect.', glsl: `
-                uniform float amount;
-                void main() {
-                    vec4 color = texture2D(tDiffuse, vUv);
-                    gl_FragColor = vec4(mix(color.rgb, 1.0 - color.rgb, amount), color.a);
-                }`
-            }
-        ];
-        // --- 2. APP CORE ---
-        const NexusOS = {
-            scene: null,
-            camera: null,
-            renderer: null,
-            composer: null,
-            video: null,
-            videoTex: null,
-            audioCtx: null,
-            analyser: null,
-            dataArray: null,
-            stack: [],
-            maxEffects: 12,
-            isPlaying: false,
-            animationId: null,
-            init: () => {
-                NexusOS.setup3D();
-                NexusOS.setupUI();
-                NexusOS.setupAudio();
-                NexusOS.animate();
-            },
-            setup3D: () => {
-                const container = document.getElementById('viewport-3d');
-                const width = container.clientWidth;
-                const height = container.clientHeight;
-                // Three.js Setup
-                NexusOS.scene = new THREE.Scene();
-                NexusOS.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-                NexusOS.renderer = new THREE.WebGLRenderer({
-                    canvas: document.getElementById('glCanvas'),
-                    antialias: true,
-                    preserveDrawingBuffer: true
-                });
-                NexusOS.renderer.setSize(width, height);
-                NexusOS.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-                // Composer Setup
-                NexusOS.composer = new EffectComposer(NexusOS.renderer);
-                const renderPass = new RenderPass(NexusOS.scene, NexusOS.camera);
-                NexusOS.composer.addPass(renderPass);
-                // Base Plane for Video
-                const geometry = new THREE.PlaneGeometry(2, 2);
-                const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
-                const quad = new THREE.Mesh(geometry, material);
-                NexusOS.scene.add(quad);
-                NexusOS.quad = quad;
-                // Resize Handler
-                window.addEventListener('resize', () => {
-                    const w = container.clientWidth;
-                    const h = container.clientHeight;
-                    NexusOS.renderer.setSize(w, h);
-                    NexusOS.composer.setSize(w, h);
-                    NexusOS.stack.forEach(pass => {
-                        if(pass.uniforms.resolution) pass.uniforms.resolution.value.set(w, h);
-                    });
-                });
-            },
-            setupUI: () => {
-                const list = document.getElementById('fx-list');
-                // Group by Category
-                const categories = [...new Set(FX_LIBRARY.map(s => s.category))];
-                categories.forEach(cat => {
-                    const header = document.createElement('div');
-                    header.className = "text-[9px] text-gray-500 uppercase font-bold mt-4 mb-2 pl-2 tracking-widest border-b border-[#1a1a2e]";
-                    header.innerText = cat;
-                    list.appendChild(header);
-                    FX_LIBRARY.filter(s => s.category === cat).forEach(shader => {
-                        const el = document.createElement('div');
-                        el.className = "fx-card p-3 rounded transition-all group cursor-pointer border-l-4 border-[#1a1a2e]";
-                        el.innerHTML = `
-                            <div class="flex justify-between items-start mb-1">
-                                <span class="font-bold text-cyan-300 text-sm group-hover:text-white transition">${shader.name}</span>
-                                <i class="fa-solid fa-plus-circle text-[10px] text-gray-500 group-hover:text-cyan-400 transition"></i>
-                            </div>
-                            <div class="text-[9px] text-gray-400 line-clamp-2">${shader.desc}</div>
-                        `;
-                        // Drag Start
-                        el.draggable = true;
-                        el.addEventListener('dragstart', (e) => {
-                            e.dataTransfer.setData('text/plain', shader.id);
-                            e.dataTransfer.setData('name', shader.name);
-                            e.dataTransfer.setData('glsl', shader.glsl);
-                        });
-                        list.appendChild(el);
-                    });
-                });
-                // Drop Zone (Stack List)
-                const stackList = document.getElementById('stack-list');
-                stackList.addEventListener('dragover', (e) => e.preventDefault());
-                stackList.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    const id = e.dataTransfer.getData('text/plain');
-                    const name = e.dataTransfer.getData('name');
-                    const glsl = e.dataTransfer.getData('glsl');
-                    if (NexusOS.stack.length < NexusOS.maxEffects) {
-                        NexusOS.addEffect(id, name, glsl);
-                    } else {
-                        alert("Effect Stack Full (Max 12)");
-                    }
-                });
-                // Search
-                document.getElementById('search-fx').addEventListener('input', (e) => {
-                    const term = e.target.value.toLowerCase();
-                    const cards = document.querySelectorAll('.fx-card');
-                    cards.forEach(card => {
-                        const text = card.innerText.toLowerCase();
-                        card.style.display = text.includes(term) ? 'block' : 'none';
-                    });
-                });
-                // Global Settings
-                document.getElementById('global-res').addEventListener('input', (e) => {
-                    document.getElementById('res-val').innerText = e.target.value + 'p';
-                    // Logic to resize canvas would go here
-                });
-                document.getElementById('global-fps').addEventListener('input', (e) => {
-                    document.getElementById('fps-val').innerText = parseFloat(e.target.value).toFixed(3);
-                });
-                // Play/Pause
-                document.getElementById('btn-play').addEventListener('click', () => {
-                    if (NexusOS.video.paused) {
-                        NexusOS.video.play();
-                        document.getElementById('audio-src').play();
-                        NexusOS.isPlaying = true;
-                        document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-pause text-sm ml-0.5"></i>';
-                    } else {
-                        NexusOS.video.pause();
-                        document.getElementById('audio-src').pause();
-                        NexusOS.isPlaying = false;
-                        document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-play text-sm ml-0.5"></i>';
-                    }
-                });
-                // Randomize
-                document.getElementById('btn-randomize').addEventListener('click', () => {
-                    // Clear stack
-                    NexusOS.stack.forEach(() => NexusOS.removeEffect(NexusOS.stack[0].uid));
-                    // Add random
-                    const count = Math.floor(Math.random() * 5) + 2;
-                    for(let i=0; i<count; i++) {
-                        const rnd = FX_LIBRARY[Math.floor(Math.random() * FX_LIBRARY.length)];
-                        NexusOS.addEffect(rnd.id, rnd.name, rnd.glsl);
-                    }
-                });
-                // Export
-                document.getElementById('btn-export').addEventListener('click', () => {
-                    alert("Project exported to local storage as JSON config.");
-                    const config = {
-                        effects: NexusOS.stack.map(p => ({ id: p.def.id, amount: p.uniforms.amount.value })),
-                        resolution: document.getElementById('global-res').value,
-                        fps: document.getElementById('global-fps').value
-                    };
-                    const blob = new Blob([JSON.stringify(config)], {type: 'application/json'});
-                    const a = document.createElement('a');
-                    a.href = URL.createObjectURL(blob);
-                    a.download = 'nexus_project_config.json';
-                    a.click();
-                });
-                // APK Builder
-                document.getElementById('btn-build-apk').addEventListener('click', () => {
-                    NexusOS.buildAndroidProject();
-                });
-            },
-            setupAudio: () => {
-                NexusOS.video = document.getElementById('video-src');
-                if(!NexusOS.video) {
-                    // Create placeholder if not loaded
-                    NexusOS.video = document.createElement('video');
-                    NexusOS.video.id = 'video-src';
-                    NexusOS.video.playsInline = true;
-                    NexusOS.video.loop = true;
-                    NexusOS.video.src = "https://media.w3.org/2010/05/sintel/trailer_hd.mp4"; // Fallback
-                    document.body.appendChild(NexusOS.video);
-                }
-                // Load Audio
-                const audioEl = document.getElementById('audio-src');
-                if(!audioEl) {
-                    const audio = document.createElement('audio');
-                    audio.id = 'audio-src';
-                    audio.crossOrigin = "anonymous";
-                    document.body.appendChild(audio);
-                }
-                // File Inputs
-                document.getElementById('inp-video').addEventListener('change', (e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                        const url = URL.createObjectURL(file);
-                        NexusOS.video.src = url;
-                        NexusOS.video.load();
-                        NexusOS.video.play().then(() => {
-                            NexusOS.isPlaying = true;
-                            document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-pause text-sm ml-0.5"></i>';
-                        });
-                    }
-                });
-                document.getElementById('inp-audio').addEventListener('change', (e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                        const url = URL.createObjectURL(file);
-                        const audioEl = document.getElementById('audio-src');
-                        audioEl.src = url;
-                        if (!NexusOS.audioCtx) {
-                            NexusOS.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-                            const src = NexusOS.audioCtx.createMediaElementSource(audioEl);
-                            NexusOS.analyser = NexusOS.audioCtx.createAnalyser();
-                            NexusOS.analyser.fftSize = 256;
-                            src.connect(NexusOS.analyser);
-                            NexusOS.analyser.connect(NexusOS.audioCtx.destination);
-                            NexusOS.dataArray = new Uint8Array(NexusOS.analyser.frequencyBinCount);
-                        }
-                        audioEl.play();
-                    }
-                });
-            },
-            addEffect: (id, name, glslCode) => {
-                const def = FX_LIBRARY.find(s => s.id === id);
-                if (!def) return;
-                const myUniforms = {
-                    "tDiffuse": { value: null },
-                    "amount": { value: 0.5 },
-                    "time": { value: 0.0 },
-                    "resolution": { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
-                    "uAudio": { value: 0.0 }
-                };
-                const myShader = {
-                    uniforms: myUniforms,
-                    vertexShader: `
-                        varying vec2 vUv;
-                        void main() {
-                            vUv = uv;
-                            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-                        }`,
-                    fragmentShader: glslCode
-                };
-                const pass = new ShaderPass(myShader);
-                pass.uid = Date.now() + Math.random();
-                pass.def = def;
-                // Insert at top
-                NexusOS.composer.insertPass(pass, 1);
-                NexusOS.stack.unshift(pass);
-                NexusOS.renderStackUI();
-            },
-            removeEffect: (uid) => {
-                const idx = NexusOS.stack.findIndex(p => p.uid === uid);
-                if (idx > -1) {
-                    NexusOS.composer.removePass(NexusOS.stack[idx]);
-                    NexusOS.stack.splice(idx, 1);
-                    NexusOS.renderStackUI();
-                }
-            },
-            renderStackUI: () => {
-                const container = document.getElementById('stack-list');
-                document.getElementById('stack-count').innerText = `${NexusOS.stack.length} / ${NexusOS.maxEffects}`;
-                if (NexusOS.stack.length === 0) {
-                    container.innerHTML = '<div class="text-center py-10 text-gray-600 text-sm border-2 border-dashed border-gray-800 rounded"><i class="fa-solid fa-layer-group text-2xl mb-2 opacity-50"></i>No effects active. Drag from library.</div>';
-                    return;
-                }
-                container.innerHTML = '';
-                NexusOS.stack.forEach((pass, i) => {
-                    const el = document.createElement('div');
-                    el.className = "neon-box active p-3 rounded mb-2";
-                    el.innerHTML = `
-                        <div class="flex justify-between items-center mb-2">
-                            <div class="flex items-center gap-2">
-                                <span class="text-[9px] bg-cyan-900 text-cyan-300 px-1 rounded">${i+1}</span>
-                                <span class="text-sm font-bold text-cyan-300">${pass.def.name}</span>
-                            </div>
-                            <button class="text-red-500 hover:text-white transition" onclick="NexusOS.removeEffect(${pass.uid})">
-                                <i class="fa-solid fa-trash"></i>
-                            </button>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <span class="text-[9px] text-gray-500">INTENSITY</span>
-                            <input type="range" class="w-full h-1 bg-gray-800 rounded appearance-none cursor-pointer"
-                                min="0" max="1" step="0.01" value="${pass.uniforms.amount.value}"
-                                oninput="NexusOS.updateEffect(${pass.uid}, this.value)">
-                        </div>
-                    `;
-                    container.appendChild(el);
-                });
-            },
-            updateEffect: (uid, val) => {
-                const pass = NexusOS.stack.find(p => p.uid === uid);
-                if (pass) pass.uniforms.amount.value = parseFloat(val);
-            },
-            buildAndroidProject: () => {
-                const appName = document.getElementById('app-name').value || "NexusApp";
-                const appId = document.getElementById('app-id').value || "com.nexus.app";
-                if(!appId.includes('.')) {
-                    alert("Invalid Bundle ID format. Use com.company.app");
-                    return;
-                }
-                const zip = new JSZip();
-                const assets = {};
-                // Generate a simple HTML file for the app
-                const htmlContent = `
-                <!DOCTYPE html>
-                <html>
-                <head>
-                    <title>${appName}</title>
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <style>
-                        body { margin:0; background:#000; overflow:hidden; }
-                        canvas { display:block; width:100%; height:100%; }
-                        .anycoder { position:fixed; bottom:5px; right:5px; font-size:10px; color:#555; z-index:9999; }
-                    </style>
-                </head>
-                <body>
-                    <canvas id="glCanvas"></canvas>
-                    <div class="anycoder">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Nexus FX Forge</a></div>
-                    <script>
-                        // Simplified logic for WebView
-                        const canvas = document.getElementById('glCanvas');
-                        const gl = canvas.getContext('webgl');
-                        // ... (WebGL init code would go here, simplified for demo)
-                        canvas.width = window.innerWidth; canvas.height = window.innerHeight;
-                    <\/script>
-                </body>
-                </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NEXUS FX OS | AI Sci-Fi Studio + VisionFX Pro</title>
+  <!-- Libraries -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/browser/math.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
+  <!-- Three.js Import Map -->
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+      }
+    }
+  </script>
+  <style>
+    :root {
+      --bg-void: #030306;
+      --bg-panel: #0a0a0f;
+      --bg-card: #12121a;
+      --border: #1a1a2e;
+      --accent-cyan: #00f0ff;
+      --accent-magenta: #ff00aa;
+      --accent-lime: #00ff66;
+      --accent-red: #ff2244;
+      --text: #e8e8f0;
+      --text-dim: #6a6a7a;
+      --math-bg: #000000;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
+    body {
+      font-family: 'JetBrains Mono', monospace;
+      background: var(--bg-void);
+      color: var(--text);
+      overflow: hidden;
+      height: 100vh;
+      background-image:
+        radial-gradient(circle at 10% 20%, rgba(0, 240, 255, 0.1) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(255, 0, 170, 0.1) 0%, transparent 20%);
+    }
+    .font-display { font-family: 'Orbitron', sans-serif; }
+    /* Glitch Text Animation */
+    .glitch-text {
+      position: relative;
+      z-index: 1;
+    }
+    .glitch-text::before, .glitch-text::after {
+      content: attr(data-text);
+      position: absolute;
+      top: 0; left: 0; width: 100%; height: 100%;
+      background: var(--bg-void); z-index: -1;
+    }
+    .glitch-text::before {
+      left: 2px; text-shadow: -1px 0 var(--accent-magenta);
+      clip: rect(24px, 550px, 90px, 0);
+      animation: glitch-anim-2 3s infinite linear alternate-reverse;
+    }
+    .glitch-text::after {
+      left: -2px; text-shadow: -1px 0 var(--accent-cyan);
+      clip: rect(85px, 550px, 140px, 0);
+      animation: glitch-anim 2.5s infinite linear alternate-reverse;
+    }
+    @keyframes glitch-anim { /* ... (Same as original) ... */
+      0% { clip: rect(14px, 9999px, 127px, 0); } 20% { clip: rect(80px, 9999px, 95px, 0); }
+      40% { clip: rect(10px, 9999px, 50px, 0); } 60% { clip: rect(60px, 9999px, 120px, 0); }
+      80% { clip: rect(20px, 9999px, 80px, 0); } 100% { clip: rect(100px, 9999px, 110px, 0); }
+    }
+    @keyframes glitch-anim-2 { /* ... (Same as original) ... */
+      0% { clip: rect(65px, 9999px, 100px, 0); } 20% { clip: rect(10px, 9999px, 40px, 0); }
+      40% { clip: rect(90px, 9999px, 130px, 0); } 60% { clip: rect(30px, 9999px, 80px, 0); }
+      80% { clip: rect(70px, 9999px, 110px, 0); } 100% { clip: rect(50px, 9999px, 90px, 0); }
+    }
+    /* Scrollbars & Inputs */
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: var(--bg-void); }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }
+    input[type=range] {
+      -webkit-appearance: none; width: 100%; background: transparent;
+      cursor: grab; transition: all 0.2s;
+    }
+    input[type=range]:active { cursor: grabbing; }
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%;
+      background: var(--text); cursor: pointer; margin-top: -5px;
+      box-shadow: 0 0 5px var(--accent-cyan);
+    }
+    input[type=range]::-webkit-slider-runnable-track {
+      width: 100%; height: 4px; cursor: pointer; background: var(--border); border-radius: 2px;
+    }
+    /* Glassmorphism & Neon */
+    .glass-panel {
+      background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+    }
+    .neon-box { border: 1px solid var(--border); transition: all 0.2s; }
+    .neon-box:hover { box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); border-color: var(--accent-cyan); }
+    .neon-box.active { box-shadow: 0 0 20px var(--accent-cyan); border-color: var(--accent-cyan); }
+    .fx-card { background: rgba(18, 18, 26, 0.9); border-left: 3px solid var(--border); transition: all 0.3s; }
+    .fx-card:hover { background: rgba(25, 25, 35, 0.95); }
+    /* Math Engine UI */
+    .math-container { position: relative; }
+    .math-input {
+      width: 100%; background: var(--math-bg); border: 1px solid var(--border);
+      color: var(--accent-cyan); font-family: 'Courier New', monospace; padding: 8px;
+      min-height: 40px; resize: vertical; font-size: 14px; transition: border 0.3s;
+    }
+    .math-input:focus { border-color: var(--accent-lime); outline: none; }
+    .math-btn { background: #222; border: 1px solid #444; color: #aaa; cursor: pointer; padding: 4px 8px; font-size: 10px; }
+    .math-btn:hover { background: var(--accent-cyan); color: #000; }
+    .math-popup {
+      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      background: var(--bg-panel); border: 1px solid var(--accent-cyan); padding: 20px;
+      z-index: 5000; box-shadow: 0 0 50px rgba(0, 240, 255, 0.2); width: 90%; max-width: 500px;
+      display: none; animation: popIn 0.3s ease;
+    }
+    @keyframes popIn { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } }
+    /* Split View Controls */
+    .split-view-handle {
+      width: 10px; background: #000; cursor: col-resize; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
+    }
+    .split-view-handle:hover { background: var(--accent-cyan); }
+    /* 3D Canvas Container */
+    #viewport-3d { background: radial-gradient(circle at center, #1a1a24 0%, #000000 100%); }
+    /* Mobile Responsive Tweaks */
+    @media (max-width: 768px) {
+      .split-view-container { flex-direction: column; }
+      .split-view-handle { width: 100%; height: 10px; cursor: row-resize; border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+      .panel-left, .panel-right { flex: 1; }
+    }
+  </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
 <body class="flex flex-col h-screen">
+  <!-- HEADER -->
+  <header class="h-16 bg-[#050508] border-b border-[#1a1a2e] flex items-center justify-between px-6 z-50 shadow-[0_5px_20px_rgba(0,0,0,0.8)]">
+    <div class="flex items-center gap-4">
+      <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-cyan-500 to-magenta-600 flex items-center justify-center shadow-[0_0_15px_rgba(0,240,255,0.5)]">
+        <i class="fa-solid fa-cube text-white text-xl"></i>
+      </div>
+      <div>
+        <h1 class="font-display text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-magenta-400 glitch-text" data-text="NEXUS FX OS">
+          NEXUS FX OS
+        </h1>
+        <div class="text-xs text-cyan-500/70 font-mono tracking-widest">INTELLIGENT MEDIA ENGINE // V.3.0.0</div>
+      </div>
+    </div>
+    <div class="flex items-center gap-3">
+      <button id="btn-randomize" class="hidden md:flex items-center gap-2 px-4 py-2 rounded bg-[#1a1a2e] hover:bg-[#2a2a4e] text-cyan-400 border border-[#1a1a2e] transition-all hover:border-cyan-500/50 hover:shadow-[0_0_10px_rgba(0,240,255,0.3)] font-mono text-xs uppercase tracking-wider">
+        <i class="fa-solid fa-shuffle"></i> Randomize
+      </button>
+      <button id="btn-export" class="flex items-center gap-2 px-4 py-2 rounded bg-gradient-to-r from-cyan-600 to-blue-700 hover:from-cyan-500 hover:to-blue-600 text-white shadow-[0_0_15px_rgba(0,240,255,0.4)] transition-all hover:shadow-[0_0_25px_rgba(0,240,255,0.6)] font-mono text-xs uppercase tracking-wider font-bold">
+        <i class="fa-solid fa-download"></i> Export
+      </button>
+    </div>
+  </header>
+  <!-- MAIN LAYOUT -->
+  <main class="flex-1 flex overflow-hidden split-view-container">
+    <!-- LEFT PANEL: FX LIBRARY & MATH ENGINE -->
+    <aside class="w-96 bg-[#0a0a0f] border-r border-[#1a1a2e] flex flex-col overflow-hidden relative">
+      <!-- FX Library Section -->
+      <div class="p-4 border-b border-[#1a1a2e] bg-[#050508]">
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="font-display text-sm text-cyan-400 tracking-widest">FX LIBRARY <span class="text-[10px] bg-cyan-900/30 px-2 py-0.5 rounded ml-2">100+ MODULES</span></h2>
+          <div class="relative">
+            <i class="fa-solid fa-search absolute left-3 top-2.5 text-cyan-500/50 text-xs"></i>
+            <input type="text" id="search-fx" placeholder="Search shaders..." class="w-full pl-8 pr-3 py-1.5 bg-[#12121a] border border-[#1a1a2e] rounded text-[10px] text-cyan-200 focus:border-cyan-500 focus:outline-none transition-colors">
+          </div>
         </div>
+        <div class="flex gap-2 overflow-x-auto pb-2">
+          <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-cyan-300 border border-[#1a1a2e] cursor-pointer hover:bg-cyan-900/30 transition">ALL</span>
+          <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-purple-300 border border-[#1a1a2e] cursor-pointer hover:bg-purple-900/30 transition">COLOR</span>
+          <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-red-300 border border-[#1a1a2e] cursor-pointer hover:bg-red-900/30 transition">GLITCH</span>
+          <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-green-300 border border-[#1a1a2e] cursor-pointer hover:bg-green-900/30 transition">GEOMETRY</span>
+          <span class="px-2 py-1 rounded text-[9px] bg-[#1a1a2e] text-yellow-300 border border-[#1a1a2e] cursor-pointer hover:bg-yellow-900/30 transition">AUDIO</span>
         </div>
+      </div>
+      <div id="fx-list" class="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar relative z-10">
+        <!-- FX Items Injected Here -->
+        <div class="text-center py-10 text-gray-600 text-sm">
+          <i class="fa-solid fa-list text-2xl mb-2 opacity-50"></i> Drag effects or use Math Engine below
+        </div>
+      </div>
+      <!-- Math Engine Section (Bottom of Left Panel) -->
+      <div class="p-4 border-t border-[#1a1a2e] bg-[#050508] z-20">
+        <div class="flex items-center justify-between mb-2">
+          <h3 class="font-display text-sm text-magenta-400 tracking-widest">MATH ENGINE // V.3</h3>
+          <button id="btn-spread" class="text-[10px] bg-magenta-900/20 text-magenta-300 px-2 py-0.5 rounded border border-magenta-900/50 hover:bg-magenta-900/50 transition flex items-center gap-1">
+            <i class="fa-solid fa-expand"></i> Split View
+          </button>
+        </div>
+        <div class="space-y-2">
+          <div class="flex items-center gap-2">
+            <button id="btn-start-stop" class="flex-1 py-2 rounded bg-[#1a1a2e] hover:bg-[#2a2a4e] text-xs text-cyan-300 border border-[#1a1a2e] transition flex items-center justify-center gap-2">
+              <i class="fa-solid fa-play" id="play-icon"></i> <span id="play-text">Start Flow</span>
+            </button>
+            <button id="btn-clear" class="px-2 py-2 rounded bg-red-900/20 text-red-400 hover:bg-red-900/40 transition">
+              <i class="fa-solid fa-trash"></i>
+            </button>
+          </div>
+          <div class="math-container">
+            <textarea id="math-input" class="math-input" placeholder="Enter Formula (e.g., sin(x) * cos(y) + 0.5 * time)..." spellcheck="false"></textarea>
+            <div class="absolute top-2 right-2 flex gap-1">
+              <button class="math-btn" id="btn-history"><i class="fa-solid fa-history"></i> H</button>
+              <button class="math-btn" id="btn-calc"><i class="fa-solid fa-calculator"></i> C</button>
+              <button class="math-btn" id="btn-apply"><i class="fa-solid fa-check"></i></button>
             </div>
+          </div>
+          <div id="math-output" class="text-[9px] text-gray-400 font-mono min-h-[16px]">
+            Waiting for input...
+          </div>
+          <div id="generated-sliders" class="space-y-3 pt-2">
+            <!-- Dynamic Sliders appear here -->
+          </div>
+        </div>
+        <div class="mt-4 pt-3 border-t border-[#1a1a2e]">
+          <h4 class="text-[10px] text-gray-500 uppercase font-bold mb-2">Pattern Extractor</h4>
+          <textarea id="pattern-input" class="w-full h-24 bg-[#000] border border-[#1a1a2e] rounded p-2 text-[9px] text-cyan-200 font-mono mb-2" placeholder="Paste code to extract patterns (URLs, Functions, Comments)..."></textarea>
+          <div class="flex gap-2">
+            <select id="pattern-select" class="flex-1 bg-[#12121a] border border-[#1a1a2e] rounded p-1 text-[9px] text-cyan-200">
+              <option value="urls">Download Files (pdf, zip...)</option>
+              <option value="functions">Function Definitions</option>
+              <option value="comments">Comments (JS/Java)</option>
+              <option value="cyber">🧷 Cyber Patterns</option>
+            </select>
+            <button id="btn-extract" class="px-3 py-1 rounded bg-[#1a1a2e] hover:bg-[#2a2a4e] text-[9px] text-cyan-300 border border-[#1a1a2e]">Extract</button>
+          </div>
+          <div id="pattern-output" class="mt-2 text-[8px] text-gray-500 font-mono h-20 overflow-y-auto border border-[#1a1a2e] bg-black/50 p-2 rounded"></div>
+        </div>
+      </div>
+    </aside>
+    <!-- CENTER: VIEWPORT -->
+    <section class="flex-1 relative flex flex-col items-center justify-center bg-[#030306] overflow-hidden">
+      <!-- 3D Canvas -->
+      <div id="viewport-3d" class="absolute inset-0 w-full h-full z-0">
+        <canvas id="glCanvas" class="w-full h-full object-contain"></canvas>
+      </div>
+      <!-- Overlay Info -->
+      <div class="absolute top-4 left-4 z-10 flex flex-col gap-2 pointer-events-none">
+        <div class="glass-panel px-3 py-2 rounded border-l-4 border-cyan-500">
+          <div class="text-[10px] text-cyan-300 uppercase font-bold">Current Engine</div>
+          <div class="text-xs font-mono text-white" id="engine-status">WebGL 2.0 // Three.js Core</div>
+        </div>
+        <div class="glass-panel px-3 py-2 rounded border-l-4 border-magenta-500 w-48">
+          <div class="text-[10px] text-magenta-300 uppercase font-bold">Audio Reactivity</div>
+          <div class="flex items-center gap-2 mt-1">
+            <div class="flex-1 h-1 bg-gray-800 rounded overflow-hidden">
+              <div id="audio-bar" class="h-full bg-magenta-500 w-0 transition-all duration-75"></div>
             </div>
+            <span id="audio-val" class="text-[9px] font-mono text-magenta-300">0%</span>
+          </div>
+        </div>
+      </div>
+      <!-- Bottom Controls -->
+      <div class="absolute bottom-6 z-20 flex items-center gap-4 bg-[#00000080] backdrop-blur-md px-6 py-3 rounded-full border border-[#1a1a2e] shadow-[0_0_30px_rgba(0,0,0,0.8)]">
+        <button id="btn-play" class="w-10 h-10 rounded-full bg-white text-black hover:bg-cyan-400 transition flex items-center justify-center">
+          <i class="fa-solid fa-play text-sm ml-0.5"></i>
+        </button>
+        <div class="flex flex-col">
+          <span class="text-[9px] text-gray-400 uppercase tracking-widest">Time</span>
+          <span id="time-display" class="font-mono text-sm text-cyan-400">00:00:00</span>
+        </div>
+        <button id="btn-screenshot" class="px-3 py-1 rounded text-[10px] text-gray-300 hover:text-white hover:bg-white/10 transition border border-transparent hover:border-white/20">
+          <i class="fa-solid fa-camera mr-1"></i> Snapshot
+        </button>
+      </div>
+    </section>
+    <!-- RIGHT PANEL: STACK & SETTINGS -->
+    <aside class="w-80 bg-[#0a0a0f] border-l border-[#1a1a2e] flex flex-col overflow-hidden z-10">
+      <!-- Active Stack -->
+      <div class="p-4 border-b border-[#1a1a2e] bg-[#050508]">
+        <div class="flex items-center justify-between">
+          <h2 class="font-display text-sm text-cyan-400 tracking-widest">EFFECT STACK</h2>
+          <span id="stack-count" class="text-[10px] bg-cyan-900/30 text-cyan-300 px-2 py-0.5 rounded border border-cyan-900/50">0 / 12</span>
+        </div>
+        <div class="text-[9px] text-gray-500 mt-1">Drag to reorder • Click to adjust</div>
+      </div>
+      <div id="stack-list" class="flex-1 overflow-y-auto p-4 space-y-3 bg-[#08080c]">
+        <div class="text-center py-10 text-gray-600 text-sm border-2 border-dashed border-gray-800 rounded">
+          <i class="fa-solid fa-layer-group text-2xl mb-2 opacity-50"></i>
+          No effects active. Drag from library.
+        </div>
+      </div>
+      <!-- Quick Settings -->
+      <div class="p-4 border-t border-[#1a1a2e] bg-[#050508] space-y-4">
+        <div>
+          <div class="flex justify-between mb-1">
+            <label class="text-[10px] text-cyan-400 uppercase font-bold tracking-wider">Global Resolution</label>
+            <span id="res-val" class="text-[9px] text-gray-400 font-mono">1080p</span>
+          </div>
+          <input type="range" id="global-res" min="360" max="2160" step="72" value="1080" class="w-full">
+        </div>
+        <div>
+          <div class="flex justify-between mb-1">
+            <label class="text-[10px] text-magenta-400 uppercase font-bold tracking-wider">Frame Rate (FPS)</label>
+            <span id="fps-val" class="text-[9px] text-gray-400 font-mono">60.000</span>
+          </div>
+          <input type="range" id="global-fps" min="15" max="240" step="0.1" value="60" class="w-full">
+        </div>
+        <div class="pt-2 border-t border-[#1a1a2e]">
+          <h3 class="text-[10px] text-gray-500 uppercase font-bold mb-2">APK Converter</h3>
+          <div class="flex items-center justify-between text-[9px] text-gray-400 mb-2 bg-[#000] p-2 rounded border border-[#1a1a2e]">
+            <span>Web to Android Builder</span>
+            <i class="fa-solid fa-mobile-screen text-cyan-500"></i>
+          </div>
+          <div class="grid grid-cols-2 gap-2">
+            <input type="text" id="app-name" placeholder="App Name" class="bg-[#12121a] border border-[#1a1a2e] rounded px-2 py-1 text-[9px] text-cyan-200 focus:border-cyan-500">
+            <input type="text" id="app-id" placeholder="Bundle ID" class="bg-[#12121a] border border-[#1a1a2e] rounded px-2 py-1 text-[9px] text-cyan-200 focus:border-cyan-500" value="com.nexus.app">
+          </div>
+          <button id="btn-build-apk" class="w-full mt-2 py-1.5 rounded bg-[#1a1a2e] hover:bg-[#2a2a4e] text-[10px] text-cyan-300 border border-[#1a1a2e] transition flex items-center justify-center gap-2">
+            <i class="fa-solid fa-code-commit"></i> Generate Android Project
+          </button>
+        </div>
+        <div class="pt-2 border-t border-[#1a1a2e]">
+          <h3 class="text-[10px] text-gray-500 uppercase font-bold mb-2">Database Stats</h3>
+          <div class="grid grid-cols-2 gap-2 text-[9px] text-gray-400 font-mono">
+            <div class="bg-[#000] p-2 rounded border border-[#1a1a2e]">Presets: <span id="stat-presets" class="text-cyan-400">0</span></div>
+            <div class="bg-[#000] p-2 rounded border border-[#1a1a2e]">History: <span id="stat-history" class="text-magenta-400">0</span></div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  </main>
+  <!-- MATH POPUP MODAL -->
+  <div id="math-popup" class="math-popup">
+    <div class="flex justify-between items-center mb-4 border-b border-gray-700 pb-2">
+      <h3 class="text-lg font-bold text-cyan-400">Math Correction Assistant</h3>
+      <button id="popup-close" class="text-gray-400 hover:text-white text-xl">&times;</button>
+    </div>
+    <p class="text-sm text-gray-300 mb-2">We detected a syntax issue in your formula. Here is the corrected version:</p>
+    <textarea id="popup-correction" class="w-full h-32 bg-[#000] border border-cyan-500/50 text-cyan-200 p-2 font-mono text-sm mb-4"></textarea>
+    <div class="flex justify-between items-center">
+      <span class="text-xs text-yellow-500">Auto-fix applied in 0.003s</span>
+      <button id="popup-apply" class="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded text-sm font-bold transition">Accept & Apply</button>
+    </div>
+  </div>
+  <!-- SCRIPTS -->
+  <script type="module">
+    import * as THREE from 'three';
+    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+    import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+    // --- 1. FX LIBRARY DEFINITION (Merged & Expanded) ---
+    const FX_LIBRARY = [
+      { id: 'bw', name: 'Monochrome', category: 'Color', desc: 'Converts video to black and white with contrast control.', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor = vec4(vec3(gray * amount), color.a); }` },
+      { id: 'rgb_shift', name: 'Chromatic Aberration', category: 'Glitch', desc: 'Separates RGB channels for sci-fi distortion.', glsl: `uniform float amount; uniform float uAudio; void main() { float offset = amount * 0.05 * (1.0 + uAudio); vec2 rUv = vUv + vec2(offset, 0.0); vec2 gUv = vUv; vec2 bUv = vUv - vec2(offset, 0.0); vec4 r = texture2D(tDiffuse, rUv); vec4 g = texture2D(tDiffuse, gUv); vec4 b = texture2D(tDiffuse, bUv); gl_FragColor = vec4(r.r, g.g, b.b, 1.0); }` },
+      { id: 'noise', name: 'Digital Noise', category: 'Glitch', desc: 'Static noise overlay with audio sensitivity.', glsl: `uniform float amount; uniform float time; float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec4 color = texture2D(tDiffuse, vUv); float diff = (rand(vUv + time) - 0.5) * amount; gl_FragColor = vec4(color.rgb + diff, color.a); }` },
+      { id: 'scanlines', name: 'CRT Scanlines', category: 'Visual', desc: 'Retro television scanline effect.', glsl: `uniform float amount; uniform vec2 resolution; void main() { vec4 color = texture2D(tDiffuse, vUv); float scanline = sin(vUv.y * resolution.y * 0.5) * 0.1 * amount; gl_FragColor = vec4(color.rgb - scanline, color.a); }` },
+      { id: 'vignette', name: 'Neon Vignette', category: 'Art', desc: 'Darken edges with neon color bleed.', glsl: `uniform float amount; uniform vec2 resolution; void main() { vec4 color = texture2D(tDiffuse, vUv); vec2 uv = vUv - 0.5; float dist = length(uv); float aspect = resolution.x / resolution.y; uv.x *= aspect; float curve = smoothstep(0.8, 0.1, length(uv)); gl_FragColor = vec4(color.rgb * curve, color.a); }` },
+      { id: 'shockwave', name: 'Sonic Shockwave', category: 'Audio', desc: 'Expands based on bass frequencies.', glsl: `uniform float amount; uniform float uAudio; uniform vec2 resolution; void main() { vec2 uv = vUv - 0.5; float aspect = resolution.x / resolution.y; uv.x *= aspect; float radius = length(uv); float angle = atan(uv.y, uv.x); float distortion = sin(angle * 10.0 + radius * 20.0 * uAudio + uAudio * 5.0) * amount * 0.1; vec2 newUv = vUv + distortion * vec2(cos(angle), sin(angle)); gl_FragColor = texture2D(tDiffuse, newUv); }` },
+      { id: 'pixelate', name: 'Mosaic Glitch', category: 'Glitch', desc: 'Blocky pixelation based on mid frequencies.', glsl: `uniform float amount; uniform vec2 resolution; void main() { float d = 1.0 / (amount * 100.0 + 10.0); vec2 coord = d * floor(vUv / d); gl_FragColor = texture2D(tDiffuse, coord); }` },
+      { id: 'invert', name: 'Cyber Invert', category: 'Color', desc: 'High contrast negative effect.', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); gl_FragColor = vec4(mix(color.rgb, 1.0 - color.rgb, amount), color.a); }` },
+      // VisionFX Pro Additions
+      { id: 'toxic', name: 'Toxic Fallout', category: 'Color', desc: 'Green channel amplification with noise.', glsl: `uniform float amount; uniform float time; void main() { vec4 color = texture2D(tDiffuse, vUv); float noise = (fract(sin(dot(vUv, vec2(12.9898,78.233))) * 43758.5453) - 0.5) * amount * 0.2; gl_FragColor = vec4(color.r, color.g * (1.0 + amount), color.b, color.a) + noise; }` },
+      { id: 'luma_rush', name: 'Luma Rush', category: 'Logic', desc: 'Speed control based on brightness.', glsl: `uniform float amount; uniform float uAudio; void main() { vec4 color = texture2D(tDiffuse, vUv); float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); float speed = 1.0 + (gray * amount * 2.0) + uAudio; gl_FragColor = texture2D(tDiffuse, vUv * speed); }` }
+    ];
+    // --- 2. APP CORE (Nexus OS + Vision FX Integration) ---
+    const NexusOS = {
+      scene: null, camera: null, renderer: null, composer: null,
+      video: null, videoTex: null, audioCtx: null, analyser: null, dataArray: null,
+      stack: [], maxEffects: 12, isPlaying: false, animationId: null,
+      mathState: { isRunning: false, autoCorrect: true },
+      mathHistory: [],
+      init: () => {
+        NexusOS.setup3D();
+        NexusOS.setupUI();
+        NexusOS.setupAudio();
+        NexusOS.animate();
+        NexusOS.loadStats();
+      },
+      setup3D: () => {
+        const container = document.getElementById('viewport-3d');
+        const width = container.clientWidth;
+        const height = container.clientHeight;
+        NexusOS.scene = new THREE.Scene();
+        NexusOS.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        NexusOS.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('glCanvas'), antialias: true, preserveDrawingBuffer: true });
+        NexusOS.renderer.setSize(width, height);
+        NexusOS.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        NexusOS.composer = new EffectComposer(NexusOS.renderer);
+        const renderPass = new RenderPass(NexusOS.scene, NexusOS.camera);
+        NexusOS.composer.addPass(renderPass);
+        const geometry = new THREE.PlaneGeometry(2, 2);
+        const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
+        const quad = new THREE.Mesh(geometry, material);
+        NexusOS.scene.add(quad);
+        NexusOS.quad = quad;
+        window.addEventListener('resize', () => {
+          const w = container.clientWidth; const h = container.clientHeight;
+          NexusOS.renderer.setSize(w, h); NexusOS.composer.setSize(w, h);
+          NexusOS.stack.forEach(pass => { if(pass.uniforms.resolution) pass.uniforms.resolution.value.set(w, h); });
+        });
+      },
+      setupUI: () => {
+        const list = document.getElementById('fx-list');
+        const categories = [...new Set(FX_LIBRARY.map(s => s.category))];
+        categories.forEach(cat => {
+          const header = document.createElement('div');
+          header.className = "text-[9px] text-gray-500 uppercase font-bold mt-4 mb-2 pl-2 tracking-widest border-b border-[#1a1a2e]";
+          header.innerText = cat; list.appendChild(header);
+          FX_LIBRARY.filter(s => s.category === cat).forEach(shader => {
+            const el = document.createElement('div');
+            el.className = "fx-card p-3 rounded transition-all group cursor-pointer border-l-4 border-[#1a1a2e]";
+            el.innerHTML = `
+              <div class="flex justify-between items-start mb-1">
+                <span class="font-bold text-cyan-300 text-sm group-hover:text-white transition">${shader.name}</span>
+                <i class="fa-solid fa-plus-circle text-[10px] text-gray-500 group-hover:text-cyan-400 transition"></i>
+              </div>
+              <div class="text-[9px] text-gray-400 line-clamp-2">${shader.desc}</div>
+            `;
+            el.draggable = true;
+            el.addEventListener('dragstart', (e) => {
+              e.dataTransfer.setData('text/plain', shader.id);
+              e.dataTransfer.setData('name', shader.name);
+              e.dataTransfer.setData('glsl', shader.glsl);
+            });
+            list.appendChild(el);
+          });
+        });
+        const stackList = document.getElementById('stack-list');
+        stackList.addEventListener('dragover', (e) => e.preventDefault());
+        stackList.addEventListener('drop', (e) => {
+          e.preventDefault();
+          const id = e.dataTransfer.getData('text/plain');
+          if (NexusOS.stack.length < NexusOS.maxEffects) NexusOS.addEffect(id, e.dataTransfer.getData('name'), e.dataTransfer.getData('glsl'));
+          else alert("Effect Stack Full (Max 12)");
+        });
+        document.getElementById('search-fx').addEventListener('input', (e) => {
+          const term = e.target.value.toLowerCase();
+          document.querySelectorAll('.fx-card').forEach(card => {
+            card.style.display = card.innerText.toLowerCase().includes(term) ? 'block' : 'none';
+          });
+        });
+        // Global Settings
+        document.getElementById('global-res').addEventListener('input', (e) => document.getElementById('res-val').innerText = e.target.value + 'p');
+        document.getElementById('global-fps').addEventListener('input', (e) => document.getElementById('fps-val').innerText = parseFloat(e.target.value).toFixed(3));
+        // Play/Pause
+        document.getElementById('btn-play').addEventListener('click', () => {
+          if (NexusOS.video.paused) {
+            NexusOS.video.play(); document.getElementById('audio-src').play();
+            NexusOS.isPlaying = true;
+            document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-pause text-sm ml-0.5"></i>';
+          } else {
+            NexusOS.video.pause(); document.getElementById('audio-src').pause();
+            NexusOS.isPlaying = false;
+            document.getElementById('btn-play').innerHTML = '<i class="fa-solid fa-play text-sm ml-0.5"></i>';
+          }
+        });
+        // Randomize
+        document.getElementById('btn-randomize').addEventListener('click', () => {
+          NexusOS.stack.forEach(() => NexusOS.removeEffect(NexusOS.stack[0].uid));
+          const count = Math.floor(Math.random() * 5) + 2;
+          for(let i=0; i<count; i++) {
+            const rnd = FX_LIBRARY[Math.floor(Math.random() * FX_LIBRARY.length)];
+            NexusOS.addEffect(rnd.id, rnd.name, rnd.glsl);
+          }
+        });
+        // Export
+        document.getElementById('btn-export').addEventListener('click', () => {
+          const config = { effects: NexusOS.stack.map(p => ({ id: p.def.id, amount: p.uniforms.amount.value })), resolution: document.getElementById('global-res').value };
+          const blob = new Blob([JSON.stringify(config)], {type: 'application/json'});