feat: upgrade to Viz 2.0 with multi-shape topologies, no-cover support, 3D grid and neon glow engine

README.md

@@ -1,35 +1,40 @@
-# 🎵 VIZ — Audio Visualizer Studio für DaVinci Resolve
+# 🎵 VIZ 2.0 — Audio Visualizer Studio für DaVinci Resolve
 
-Ein modernes, hochgradig anpassbares Audio-Visualizer Tool zur Erstellung professioneller Musikvideos und Social-Media-Clips (YouTube, TikTok, Shorts, Reels) mit direktem Export von **transparenten Videos (ProRes 4444 mit Alpha-Kanal)** für **DaVinci Resolve**.
+Ein modernes, hochgradig anpassbares Audio-Visualizer Studio zur Erstellung professioneller Musikvideos und Social-Media-Clips (YouTube, TikTok, Shorts, Reels) mit direktem Export von **transparenten Videos (ProRes 4444 mit Alpha-Kanal)** für **DaVinci Resolve**.
 
 ---
 
-## ✨ Features
+## ✨ Neue Features in Version 2.0
 
-- **⭕ Zentraler Kreis & Artwork-Core**:
-  - Dynamischer Bass-Pulse & Bounce im Takt (sub-bass / kick-reaktiv).
-  - 0–360° Fortschrittsring um das Artwork.
-  - Vinyl-Drehung & Beat-Drehimpuls bei Drops.
-  - Randfarben, Stärken & Glow frei anpassbar.
-- **📊 360° Frequenzspektrum**:
-  - 4 Modi: **Balken (Bars)**, **Flüssige Welle (Wave)**, **Punkte (Dots)** und **Dual Ring**.
-  - Anpassbare Balkenanzahl, Höhe, Frequenzempfindlichkeit & Symmetrie-Spiegelung.
-  - Eigener Gradient-Editor (Winkelverlauf, Radial, Linear, Regenbogen).
-- **✨ Partikel- & Raum-Effekte**:
-  - Schwebender Sternenstaub & Warp-Explosion bei Drops.
-  - Dynamischer Bass-Shake & Cam-Zoom.
-  - RGB-Split / Chromatic Aberration & Beat-Flash.
-- **📝 Typografie & Safe-Zones**:
-  - Titel, Artist und Live-Timecode Overlay.
-  - Umschaltung zwischen **16:9** (YouTube 1080p/4K), **9:16** (Shorts/TikTok) und **1:1** (Instagram).
-  - Einblendbares **Shorts Safe-Zone Overlay** zur optimalen Platzierung.
-- **🎬 DaVinci Resolve Export**:
+- **📐 Vielfältige Formen & Topologien**:
+  - **⭕ Kreis (Radial)**: Klassischer Look à la Trap Nation / Monstercat.
+  - **➖ Linear & Horizont**: Symmetrischer Horizont, Boden-Equalizer, Decken-Equalizer oder schwebende Wellenform.
+  - **⬡ Polygone**: **Hexagon (6-Eck)**, **Raute / Diamond**, **Dreieck** und **Achteck** mit passender Cover-Maske.
+  - **〰️ Oszilloskop / Laser-Welle**: Flüssige, reaktive Neon-Audiowellenform mit glühendem Laserkern.
+  - **🌀 3D Tunnel / Wormhole**: Konzentrische Tiefenringe mit kick-reaktiven Impulswellen.
+
+- **🎛️ Vollständige Deaktivierbarkeit (No-Cover Modus & Modularer Layer-Stack)**:
+  - **Cover-Artwork komplett ausblendbar**: Perfekt für minimalistische Wellenformen, futuristische Horizonte oder reine 3D-Grid Visualizer ohne Cover-Bild.
+  - **Jedes einzelne Feature ein-/ausschaltbar**: Cover, Spektrum, Rand, Fortschrittsring, 3D Grid, Partikel, Bass-Shake, Glitch, Beat-Flash, Bass-Zoom, Typography.
+
+- **🎨 Multi-Pass Neon Glow & Gradienten**:
+  - 2- und 3-Farben-Farbverläufe (Conic Angular, Radial, Horizontal, Vertikal) und dynamischer Rainbow/Chroma Beat-Loop.
+  - **1-Klick Farbpaletten**: *Cyberpunk, Synthwave Sunset, Toxic Emerald, Ice Blade, Fire Amber, Royal Violet, Monochrome*.
+  - Echter Multi-Pass Neon Glow mit Bloom Spread und hellem Laserkern.
+
+- **✨ 3D Atmosphäre & FX**:
+  - **3D Synthwave Grid Floor**: Audio-reaktiver Gitterboden mit Tiefenperspektive.
+  - **Partikel-System**: 3D Warp Starfield (Kameraflug), organischer schwebender Staub oder Audio-Funken.
+  - **Kamera-Dynamik**: Bass-Shake, Cam-Zoom, RGB-Split Glitch und Strobe Beat-Flash.
+
+- **🎬 DaVinci Resolve Alpha-Export**:
   - **QuickTime ProRes 4444 (.mov)** mit echtem 100% Alpha-Kanal für verlustfreie Studioqualität.
   - **WebM VP9 (.webm)** mit Alpha-Kanal für kompakte Dateigrößen.
   - **MP4 (H.264)** für fertige Standalone-Videos.
-- **💾 Preset-Manager**:
-  - Vorgefertigte Styles (*Trap Nation Classic*, *Cyberpunk Neon*, *Minimal Clean*, *Fire & Amber*, *Matrix Glitch*, *Deep Violet*).
-  - Eigene Presets als JSON speichern, exportieren und importieren.
+
+- **💾 Presets & Formate**:
+  - 8 kuratierte Presets (*Trap Nation, Cyber Hexagon, Synthwave Horizon, Laser Oscilloscope, Diamond Bass, Cosmic Wormhole, Studio Graphic EQ, Minimal Ice Wave*).
+  - Seitenverhältnisse: **16:9** (YouTube 1080p/4K), **9:16** (Shorts/TikTok) und **1:1** (Instagram).
 
 ---
 
@@ -55,28 +60,28 @@ Die Web-App ist nun unter **`http://localhost:849`** erreichbar.
 
 ---
 
-## 🎬 DaVinci Resolve Workflow (So nutzt du das exportierte Video)
+## 🎬 DaVinci Resolve Workflow
 
 1. Öffne dein Projekt in **DaVinci Resolve**.
 2. Ziehe die aus **VIZ** exportierte `.mov` Datei (ProRes 4444 mit Alpha) in deinen Media Pool.
 3. Lege deinen Hintergrund (Video, B-Roll oder KI-Animation) auf **Video-Spur 1 (V1)**.
 4. Ziehe den exportierten Visualizer-Clip auf **Video-Spur 2 (V2)** direkt darüber.
-5. Da der Hintergrund der Datei transparent ist, legt sich der pulsierende Kreis und das Spektrum perfekt über dein Footage!
+5. Da der Hintergrund der Datei transparent ist, legt sich der Visualizer perfekt über dein Footage!
 
 ---
 
-## ☁️ Deployment in Jannik-Cloud (Docker Compose)
+## ☁️ Deployment in Jannik-Cloud
 
 VIZ ist als nativer Service in **Jannik-Cloud** integriert:
 - **Subdomain**: `https://viz.orfel.de`
 - **Port**: `849`
-- **Volume**: `/mnt/Jannik-Cloud-Volume-01/viz:/data` (Upload-Zwischenspeicher mit automatischem Cleanup bei jedem Rebuild).
+- **Volume**: `/mnt/Jannik-Cloud-Volume-01/viz:/data`
 
 ---
 
 ## 🛠️ Technologien
 
-- **Frontend**: HTML5 Canvas (60 FPS Multi-Layer Rendering), Web Audio API, Vanilla CSS (Glassmorphism Dark Theme).
+- **Frontend**: HTML5 Canvas (60 FPS Multi-Layer Rendering Engine), Web Audio API, Vanilla CSS (Glassmorphism Dark Theme).
 - **Backend**: Node.js, Express, Multer (200 MB Upload-Limit), FFmpeg Video Rendering Engine.
 
 ---

public/index.html

@@ -3,10 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Viz — Audio Visualizer Studio für DaVinci Resolve</title>
+  <title>Viz 2.0 — Audio Visualizer Studio für DaVinci Resolve</title>
   <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=Cinzel:wght@700&family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;800&family=Orbitron:wght@600;800;900&family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;800&family=Orbitron:wght@600;800;900&family=Outfit:wght@400;600;700;800&family=Syncopate:wght@700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -16,16 +16,13 @@
       <div class="brand">
         <div class="brand-logo">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10"></circle>
-            <path d="M8 12a4 4 0 1 0 8 0 4 4 0 1 0-8 0"></path>
-            <path d="M12 2v2"></path>
-            <path d="M12 20v2"></path>
-            <path d="M2 12h2"></path>
-            <path d="M20 12h2"></path>
+            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+            <polyline points="2 17 12 22 22 17"></polyline>
+            <polyline points="2 12 12 17 22 12"></polyline>
           </svg>
         </div>
         <div class="brand-text">
-          <h1>VIZ<span>Studio</span></h1>
+          <h1>VIZ<span>Studio 2.0</span></h1>
           <span class="badge">DaVinci Alpha Edition</span>
         </div>
       </div>
@@ -33,14 +30,16 @@
       <div class="header-actions">
         <!-- Quick Presets -->
         <div class="quick-preset-picker">
-          <label for="quickPresetSelect">⚡ Quick Preset:</label>
+          <label for="quickPresetSelect">⚡ Preset:</label>
           <select id="quickPresetSelect">
-            <option value="trap_nation">🟣 Trap Nation Classic</option>
-            <option value="cyberpunk">🌌 Cyberpunk Neon</option>
-            <option value="minimal_clean">⚪ Minimal Clean</option>
-            <option value="fire_amber">🔥 Fire & Amber</option>
-            <option value="matrix_glitch">🟢 Matrix Glitch</option>
-            <option value="deep_violet">🔮 Deep Violet Dream</option>
+            <option value="trap_nation">🟣 Trap Nation (Kreis & Radial)</option>
+            <option value="cyber_hexagon">⬡ Cyber Hexagon (Neon Core)</option>
+            <option value="synthwave_horizon">🌅 Synthwave Horizon (Linear & 3D Grid)</option>
+            <option value="laser_oscilloscope">〰️ Laser Oscilloscope (No-Cover Wave)</option>
+            <option value="diamond_bass">💎 Diamond Bass Drop (Polygon Core)</option>
+            <option value="cosmic_wormhole">🌀 Cosmic Wormhole (3D Tunnel)</option>
+            <option value="studio_rack_eq">📊 Studio Graphic EQ (Block Bars)</option>
+            <option value="minimal_ice_wave">❄️ Minimal Ice Wave (Clean Spline)</option>
           </select>
         </div>
 
@@ -58,13 +57,13 @@
         <!-- Aspect & Tools Bar -->
         <div class="stage-toolbar">
           <div class="aspect-switchers">
-            <button class="aspect-btn active" data-aspect="16:9" title="16:9 YouTube Standard">
+            <button class="aspect-btn active" data-aspect="16:9" title="16:9 YouTube Standard (1920x1080 / 4K)">
               <span class="icon">📺</span> 16:9
             </button>
-            <button class="aspect-btn" data-aspect="9:16" title="9:16 Shorts, TikTok & Reels">
+            <button class="aspect-btn" data-aspect="9:16" title="9:16 Shorts, TikTok & Reels (1080x1920)">
               <span class="icon">📱</span> 9:16
             </button>
-            <button class="aspect-btn" data-aspect="1:1" title="1:1 Quadratisch (Instagram Feed)">
+            <button class="aspect-btn" data-aspect="1:1" title="1:1 Quadratisch (Instagram 1080x1080)">
               <span class="icon">🔲</span> 1:1
             </button>
           </div>
@@ -72,9 +71,9 @@
           <div class="stage-toggles">
             <label class="toggle-chip" title="Zeigt TikTok & Shorts UI-Überlagerung für exaktes Platzieren">
               <input type="checkbox" id="toggleSafeZone">
-              <span>Safe-Zone Overlay</span>
+              <span>Safe-Zone</span>
             </label>
-            <label class="toggle-chip" title="Transparenz-Gitter im Hintergrund anzeigen">
+            <label class="toggle-chip" title="Transparenz-Gitter im Hintergrund ein-/ausblenden">
               <input type="checkbox" id="toggleAlphaGrid" checked>
               <span>Alpha-Gitter</span>
             </label>
@@ -90,17 +89,15 @@
             <div class="safe-zone-overlay hidden" id="safeZoneOverlay">
               <div class="safe-zone-box">
                 <div class="safe-zone-title">Shorts / TikTok Safe Area</div>
-                <div class="safe-zone-mock-ui">
-                  <div class="mock-right-buttons">
-                    <div class="mock-btn">❤️</div>
-                    <div class="mock-btn">💬</div>
-                    <div class="mock-btn">↗️</div>
-                    <div class="mock-disc">💿</div>
-                  </div>
-                  <div class="mock-bottom-bar">
-                    <div class="mock-channel">@DeinChannel</div>
-                    <div class="mock-song">🎵 Song Title • Original Audio</div>
-                  </div>
+                <div class="mock-right-buttons">
+                  <div class="mock-btn">❤️</div>
+                  <div class="mock-btn">💬</div>
+                  <div class="mock-btn">↗️</div>
+                  <div class="mock-disc">💿</div>
+                </div>
+                <div class="mock-bottom-bar">
+                  <div class="mock-channel">@DeinChannel</div>
+                  <div class="mock-song">🎵 Song Title • Original Audio</div>
                 </div>
               </div>
             </div>
@@ -151,10 +148,10 @@
         <!-- Navigation Tabs -->
         <nav class="sidebar-tabs">
           <button class="tab-btn active" data-tab="tab-media">📁 Media</button>
-          <button class="tab-btn" data-tab="tab-core">⭕ Kreis</button>
+          <button class="tab-btn" data-tab="tab-shape">📐 Form</button>
           <button class="tab-btn" data-tab="tab-spectrum">📊 Spektrum</button>
-          <button class="tab-btn" data-tab="tab-fx">✨ FX & Shake</button>
-          <button class="tab-btn" data-tab="tab-colors">🎨 Farben</button>
+          <button class="tab-btn" data-tab="tab-fx">✨ FX & 3D</button>
+          <button class="tab-btn" data-tab="tab-colors">🎨 Farben & Glow</button>
           <button class="tab-btn" data-tab="tab-text">📝 Text</button>
           <button class="tab-btn" data-tab="tab-export">🚀 Export</button>
         </nav>
@@ -176,14 +173,23 @@
             </div>
 
             <div class="panel-section">
-              <h3 class="section-title">2. Cover-Art / Logo</h3>
-              <div class="dropzone" id="imageDropzone">
-                <input type="file" id="imageFileInput" accept="image/*,.png,.jpg,.jpeg,.webp" class="file-input-hidden">
-                <div class="dropzone-content">
-                  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-                  <p class="dropzone-text"><strong>Cover-Bild / Logo</strong> hierher ziehen</p>
-                  <span class="dropzone-sub">PNG / JPG (wird zentriert zugeschnitten)</span>
-                  <div class="file-badge hidden" id="imageFileBadge">Standard-Cover</div>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">2. Cover-Art / Logo</h3>
+                <label class="switch-toggle" title="Cover-Artwork komplett deaktivieren (für reine Wellenformen/No-Cover Visuals)">
+                  <input type="checkbox" id="showCover" checked>
+                  <span class="switch-slider"></span>
+                </label>
+              </div>
+
+              <div id="coverUploadContainer">
+                <div class="dropzone" id="imageDropzone">
+                  <input type="file" id="imageFileInput" accept="image/*,.png,.jpg,.jpeg,.webp" class="file-input-hidden">
+                  <div class="dropzone-content">
+                    <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                    <p class="dropzone-text"><strong>Cover-Bild / Logo</strong> hierher ziehen</p>
+                    <span class="dropzone-sub">PNG / JPG (wird zentriert maskiert)</span>
+                    <div class="file-badge hidden" id="imageFileBadge">Standard-Cover</div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -201,15 +207,78 @@
             </div>
           </div>
 
-          <!-- TAB 2: CORE & CIRCLE -->
-          <div class="tab-panel" id="tab-core">
+          <!-- TAB 2: FORM & TOPOLOGIE -->
+          <div class="tab-panel" id="tab-shape">
             <div class="panel-section">
-              <h3 class="section-title">Zentraler Kreis (Artwork)</h3>
+              <h3 class="section-title">Visualizer Form & Topologie</h3>
+              
+              <div class="shape-grid-picker">
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="circle" checked>
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">⭕</span>
+                    <span class="shape-label">Kreis</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="linear">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">➖</span>
+                    <span class="shape-label">Linear</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="hexagon">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">⬡</span>
+                    <span class="shape-label">Hexagon</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="diamond">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">💎</span>
+                    <span class="shape-label">Diamond</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="triangle">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">🔺</span>
+                    <span class="shape-label">Dreieck</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="octagon">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">🛑</span>
+                    <span class="shape-label">Achteck</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="oscilloscope">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">〰️</span>
+                    <span class="shape-label">Oszilloskop</span>
+                  </div>
+                </label>
+                <label class="shape-card">
+                  <input type="radio" name="shapeType" value="tunnel">
+                  <div class="shape-card-inner">
+                    <span class="shape-icon">🌀</span>
+                    <span class="shape-label">3D Tunnel</span>
+                  </div>
+                </label>
+              </div>
+            </div>
+
+            <div class="panel-section">
+              <h3 class="section-title">Größe & Bass-Pulse</h3>
               
               <div class="control-row">
-                <label for="circleRadius">Kreis-Radius</label>
+                <label for="circleRadius">Größe / Radius</label>
                 <div class="range-group">
-                  <input type="range" id="circleRadius" min="60" max="300" value="150" step="1">
+                  <input type="range" id="circleRadius" min="40" max="350" value="150" step="1">
                   <span class="range-value" id="valCircleRadius">150px</span>
                 </div>
               </div>
@@ -232,29 +301,51 @@
             </div>
 
             <div class="panel-section">
-              <h3 class="section-title">Rand & Progress-Ring</h3>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">Rand & Rahmen</h3>
+                <label class="switch-toggle">
+                  <input type="checkbox" id="showBorder" checked>
+                  <span class="switch-slider"></span>
+                </label>
+              </div>
 
-              <div class="control-row">
-                <label for="borderWidth">Rand-Dicke</label>
-                <div class="range-group">
-                  <input type="range" id="borderWidth" min="0" max="25" value="6" step="1">
-                  <span class="range-value" id="valBorderWidth">6px</span>
+              <div id="borderOptionsContainer">
+                <div class="control-row">
+                  <label for="borderWidth">Rand-Dicke</label>
+                  <div class="range-group">
+                    <input type="range" id="borderWidth" min="1" max="30" value="6" step="1">
+                    <span class="range-value" id="valBorderWidth">6px</span>
+                  </div>
+                </div>
+
+                <div class="control-row">
+                  <label for="borderColor">Rand-Farbe</label>
+                  <input type="color" id="borderColor" value="#ffffff" class="color-picker-input">
                 </div>
               </div>
+            </div>
 
-              <div class="control-row">
-                <label for="borderColor">Rand-Farbe</label>
-                <input type="color" id="borderColor" value="#ffffff" class="color-picker-input">
+            <div class="panel-section">
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">Fortschritts-Ring (0-360°)</h3>
+                <label class="switch-toggle">
+                  <input type="checkbox" id="showProgressRing" checked>
+                  <span class="switch-slider"></span>
+                </label>
               </div>
 
-              <div class="toggle-row">
-                <label for="showProgressRing">Fortschritts-Ring (0-360°)</label>
-                <input type="checkbox" id="showProgressRing" checked>
-              </div>
-
-              <div class="control-row">
-                <label for="progressRingColor">Ring-Farbe</label>
-                <input type="color" id="progressRingColor" value="#00f0ff" class="color-picker-input">
+              <div id="progressRingOptionsContainer">
+                <div class="control-row">
+                  <label for="progressRingColor">Ring-Farbe</label>
+                  <input type="color" id="progressRingColor" value="#00f0ff" class="color-picker-input">
+                </div>
+                <div class="control-row">
+                  <label for="progressRingWidth">Ring-Dicke</label>
+                  <div class="range-group">
+                    <input type="range" id="progressRingWidth" min="2" max="20" value="6" step="1">
+                    <span class="range-value" id="valProgressRingWidth">6px</span>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -279,7 +370,13 @@
           <!-- TAB 3: SPECTRUM -->
           <div class="tab-panel" id="tab-spectrum">
             <div class="panel-section">
-              <h3 class="section-title">Spektrum-Modus</h3>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">Audio-Spektrum</h3>
+                <label class="switch-toggle" title="Spektrum ein-/ausschalten">
+                  <input type="checkbox" id="showSpectrum" checked>
+                  <span class="switch-slider"></span>
+                </label>
+              </div>
               
               <div class="radio-pill-group">
                 <label class="radio-pill">
@@ -298,16 +395,31 @@
                   <input type="radio" name="spectrumMode" value="dual_ring">
                   <span>⭕ Dual Ring</span>
                 </label>
+                <label class="radio-pill">
+                  <input type="radio" name="spectrumMode" value="block_matrix">
+                  <span>🧱 Block EQ</span>
+                </label>
               </div>
             </div>
 
+            <!-- Linear-spezifische Ausrichtung (sichtbar wenn Linear gewählt) -->
+            <div class="panel-section" id="linearAlignmentSection">
+              <h3 class="section-title">Lineare Horizont-Ausrichtung</h3>
+              <select id="linearAlignment" class="select-input">
+                <option value="center_mirrored">Symmetrischer Horizont (Oben & Unten)</option>
+                <option value="bottom_up">Boden-Equalizer (Von Unten Aufsteigend)</option>
+                <option value="top_down">Decken-Equalizer (Von Oben Herabfallend)</option>
+                <option value="floating_wave">Frei schwebende Center-Welle</option>
+              </select>
+            </div>
+
             <div class="panel-section">
               <h3 class="section-title">Geometrie & Dichte</h3>
 
               <div class="control-row">
                 <label for="barCount">Anzahl Balken / Punkte</label>
                 <div class="range-group">
-                  <input type="range" id="barCount" min="32" max="256" value="96" step="8">
+                  <input type="range" id="barCount" min="24" max="256" value="96" step="8">
                   <span class="range-value" id="valBarCount">96</span>
                 </div>
               </div>
@@ -315,7 +427,7 @@
               <div class="control-row">
                 <label for="spectrumMaxHeight">Maximale Höhe</label>
                 <div class="range-group">
-                  <input type="range" id="spectrumMaxHeight" min="20" max="300" value="130" step="5">
+                  <input type="range" id="spectrumMaxHeight" min="20" max="400" value="130" step="5">
                   <span class="range-value" id="valSpectrumMaxHeight">130px</span>
                 </div>
               </div>
@@ -323,18 +435,26 @@
               <div class="control-row">
                 <label for="barWidth">Balkenbreite</label>
                 <div class="range-group">
-                  <input type="range" id="barWidth" min="1" max="15" value="4" step="0.5">
+                  <input type="range" id="barWidth" min="1" max="25" value="4" step="0.5">
                   <span class="range-value" id="valBarWidth">4px</span>
                 </div>
               </div>
 
               <div class="control-row">
-                <label for="barSpacing">Abstand vom Kreis</label>
+                <label for="barSpacing">Abstand vom Zentrum</label>
                 <div class="range-group">
-                  <input type="range" id="barSpacing" min="0" max="60" value="12" step="1">
+                  <input type="range" id="barSpacing" min="0" max="100" value="12" step="1">
                   <span class="range-value" id="valBarSpacing">12px</span>
                 </div>
               </div>
+
+              <div class="control-row">
+                <label for="barCornerRadius">Ecken-Abrundung</label>
+                <div class="range-group">
+                  <input type="range" id="barCornerRadius" min="0" max="10" value="2" step="0.5">
+                  <span class="range-value" id="valBarCornerRadius">2px</span>
+                </div>
+              </div>
             </div>
 
             <div class="panel-section">
@@ -343,7 +463,7 @@
               <div class="control-row">
                 <label for="freqSensitivity">Empfindlichkeit</label>
                 <div class="range-group">
-                  <input type="range" id="freqSensitivity" min="0.5" max="3.0" value="1.3" step="0.1">
+                  <input type="range" id="freqSensitivity" min="0.5" max="3.5" value="1.3" step="0.1">
                   <span class="range-value" id="valFreqSensitivity">1.3x</span>
                 </div>
               </div>
@@ -364,54 +484,109 @@
             </div>
           </div>
 
-          <!-- TAB 4: FX & SHAKE -->
+          <!-- TAB 4: FX & 3D -->
           <div class="tab-panel" id="tab-fx">
             <div class="panel-section">
-              <h3 class="section-title">Partikel-System (Staub & Funken)</h3>
-
-              <div class="toggle-row">
-                <label for="enableParticles">Partikel aktivieren</label>
-                <input type="checkbox" id="enableParticles" checked>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">Partikel-System</h3>
+                <label class="switch-toggle">
+                  <input type="checkbox" id="enableParticles" checked>
+                  <span class="switch-slider"></span>
+                </label>
               </div>
 
-              <div class="control-row">
-                <label for="particleCount">Partikel-Anzahl</label>
-                <div class="range-group">
-                  <input type="range" id="particleCount" min="20" max="250" value="90" step="5">
-                  <span class="range-value" id="valParticleCount">90</span>
+              <div id="particleOptionsContainer">
+                <div class="control-row">
+                  <label for="particleType">Partikel-Typ</label>
+                  <select id="particleType" class="select-input">
+                    <option value="starfield">3D Warp Starfield (Kameraflug)</option>
+                    <option value="dust">Schwebender Staub (Floating Dust)</option>
+                    <option value="sparks">Audio-Funken (Reactive Sparks)</option>
+                  </select>
                 </div>
-              </div>
 
-              <div class="control-row">
-                <label for="particleSpeed">Basis-Geschwindigkeit</label>
-                <div class="range-group">
-                  <input type="range" id="particleSpeed" min="0.2" max="4.0" value="1.0" step="0.1">
-                  <span class="range-value" id="valParticleSpeed">1.0x</span>
+                <div class="control-row">
+                  <label for="particleCount">Partikel-Anzahl</label>
+                  <div class="range-group">
+                    <input type="range" id="particleCount" min="20" max="300" value="100" step="10">
+                    <span class="range-value" id="valParticleCount">100</span>
+                  </div>
                 </div>
-              </div>
 
-              <div class="control-row">
-                <label for="particleWarp">Warp-Explosion bei Drops</label>
-                <div class="range-group">
-                  <input type="range" id="particleWarp" min="0" max="5.0" value="2.5" step="0.1">
-                  <span class="range-value" id="valParticleWarp">2.5x</span>
+                <div class="control-row">
+                  <label for="particleSpeed">Geschwindigkeit</label>
+                  <div class="range-group">
+                    <input type="range" id="particleSpeed" min="0.2" max="4.0" value="1.0" step="0.1">
+                    <span class="range-value" id="valParticleSpeed">1.0x</span>
+                  </div>
+                </div>
+
+                <div class="control-row">
+                  <label for="particleWarp">Warp-Explosion bei Drops</label>
+                  <div class="range-group">
+                    <input type="range" id="particleWarp" min="0" max="6.0" value="2.5" step="0.2">
+                    <span class="range-value" id="valParticleWarp">2.5x</span>
+                  </div>
                 </div>
               </div>
             </div>
 
             <div class="panel-section">
-              <h3 class="section-title">Kamera & Bass-Shake</h3>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">3D Synthwave Grid Floor</h3>
+                <label class="switch-toggle" title="Retro-Perspektiven-Gitterboden aktivieren">
+                  <input type="checkbox" id="enableGrid">
+                  <span class="switch-slider"></span>
+                </label>
+              </div>
+
+              <div id="gridOptionsContainer">
+                <div class="control-row">
+                  <label for="colorGrid">Grid-Farbe</label>
+                  <input type="color" id="colorGrid" value="#ff007f" class="color-picker-input">
+                </div>
+
+                <div class="control-row">
+                  <label for="gridPerspective">Gitter-Perspektive (Horizont)</label>
+                  <div class="range-group">
+                    <input type="range" id="gridPerspective" min="0.3" max="0.9" value="0.65" step="0.05">
+                    <span class="range-value" id="valGridPerspective">65%</span>
+                  </div>
+                </div>
+
+                <div class="control-row">
+                  <label for="gridAudioReactive">Audio-Reaktivität</label>
+                  <div class="range-group">
+                    <input type="range" id="gridAudioReactive" min="0" max="1.0" value="0.5" step="0.05">
+                    <span class="range-value" id="valGridAudioReactive">50%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="panel-section">
+              <h3 class="section-title">Kamera & Beat-Effekte</h3>
+
+              <div class="toggle-row">
+                <label for="enableShake">Bass-Shake (Kamera-Erschütterung)</label>
+                <input type="checkbox" id="enableShake" checked>
+              </div>
 
               <div class="control-row">
-                <label for="camShakeIntensity">Bass-Shake Intensität</label>
+                <label for="camShakeIntensity">Shake-Intensität</label>
                 <div class="range-group">
                   <input type="range" id="camShakeIntensity" min="0" max="1.0" value="0.35" step="0.05">
                   <span class="range-value" id="valCamShakeIntensity">35%</span>
                 </div>
               </div>
 
+              <div class="toggle-row">
+                <label for="enableGlitch">RGB-Split / Glitch bei Drops</label>
+                <input type="checkbox" id="enableGlitch" checked>
+              </div>
+
               <div class="control-row">
-                <label for="rgbSplitIntensity">RGB-Split / Glitch bei Drops</label>
+                <label for="rgbSplitIntensity">Glitch-Stärke</label>
                 <div class="range-group">
                   <input type="range" id="rgbSplitIntensity" min="0" max="1.0" value="0.25" step="0.05">
                   <span class="range-value" id="valRgbSplitIntensity">25%</span>
@@ -419,59 +594,125 @@
               </div>
 
               <div class="toggle-row">
-                <label for="beatFlash">Beat-Flash (Helligkeits-Flash)</label>
+                <label for="beatFlash">Beat-Flash (Strobe-Effekt bei Kicks)</label>
                 <input type="checkbox" id="beatFlash">
               </div>
+
+              <div class="toggle-row">
+                <label for="enableBassZoom">Kamera Bass-Zoom (Pulsierender Viewport)</label>
+                <input type="checkbox" id="enableBassZoom" checked>
+              </div>
             </div>
           </div>
 
-          <!-- TAB 5: COLORS & GLOW -->
+          <!-- TAB 5: COLORS & NEON GLOW -->
           <div class="tab-panel" id="tab-colors">
             <div class="panel-section">
-              <h3 class="section-title">Farbpalette & Gradients</h3>
+              <h3 class="section-title">Kuratierte Farbpaletten</h3>
+              <div class="palette-quick-grid">
+                <button class="palette-chip" data-p1="#00f0ff" data-p2="#ff007f" data-p3="#7000ff" title="Cyberpunk Neon">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #00f0ff, #ff007f, #7000ff);"></span>
+                  <span>Cyberpunk</span>
+                </button>
+                <button class="palette-chip" data-p1="#ff7700" data-p2="#ff0055" data-p3="#7900ff" title="Synthwave Sunset">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #ff7700, #ff0055, #7900ff);"></span>
+                  <span>Synthwave</span>
+                </button>
+                <button class="palette-chip" data-p1="#00ff88" data-p2="#00e5ff" data-p3="#0055ff" title="Toxic Emerald">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #00ff88, #00e5ff, #0055ff);"></span>
+                  <span>Emerald</span>
+                </button>
+                <button class="palette-chip" data-p1="#00e1ff" data-p2="#ffffff" data-p3="#0051ff" title="Ice Blade">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #00e1ff, #ffffff, #0051ff);"></span>
+                  <span>Ice Blade</span>
+                </button>
+                <button class="palette-chip" data-p1="#ffcc00" data-p2="#ff3300" data-p3="#880000" title="Fire Amber">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #ffcc00, #ff3300, #880000);"></span>
+                  <span>Fire Amber</span>
+                </button>
+                <button class="palette-chip" data-p1="#bf00ff" data-p2="#e066ff" data-p3="#3b0066" title="Royal Violet">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #bf00ff, #e066ff, #3b0066);"></span>
+                  <span>Royal Violet</span>
+                </button>
+                <button class="palette-chip" data-p1="#ffffff" data-p2="#aaaaaa" data-p3="#555555" title="Monochrome Clean">
+                  <span class="palette-preview" style="background: linear-gradient(135deg, #ffffff, #aaaaaa, #555555);"></span>
+                  <span>Monochrome</span>
+                </button>
+              </div>
+            </div>
+
+            <div class="panel-section">
+              <h3 class="section-title">Farbverlaufs-Editor</h3>
 
               <div class="control-row">
-                <label for="colorGrad1">Hauptfarbe 1</label>
-                <input type="color" id="colorGrad1" value="#00f0ff" class="color-picker-input">
+                <label for="colorMode">Farb-Modus</label>
+                <select id="colorMode" class="select-input">
+                  <option value="gradient_2">2-Farben Verlauf</option>
+                  <option value="gradient_3">3-Farben Verlauf</option>
+                  <option value="rainbow">Regenbogen / Chroma Beat-Loop</option>
+                  <option value="solid">Einfarbig (Solid)</option>
+                </select>
+              </div>
+
+              <div class="color-picker-row">
+                <div class="color-picker-item">
+                  <label for="colorGrad1">Farbe 1</label>
+                  <input type="color" id="colorGrad1" value="#00f0ff" class="color-picker-input">
+                </div>
+                <div class="color-picker-item" id="colorGrad2Item">
+                  <label for="colorGrad2">Farbe 2</label>
+                  <input type="color" id="colorGrad2" value="#ff007f" class="color-picker-input">
+                </div>
+                <div class="color-picker-item" id="colorGrad3Item">
+                  <label for="colorGrad3">Farbe 3</label>
+                  <input type="color" id="colorGrad3" value="#7000ff" class="color-picker-input">
+                </div>
+                <div class="color-picker-item">
+                  <label for="colorParticle">Partikel</label>
+                  <input type="color" id="colorParticle" value="#ffffff" class="color-picker-input">
+                </div>
               </div>
 
               <div class="control-row">
-                <label for="colorGrad2">Hauptfarbe 2</label>
-                <input type="color" id="colorGrad2" value="#ff007f" class="color-picker-input">
-              </div>
-
-              <div class="control-row">
-                <label for="colorParticle">Partikel-Farbe</label>
-                <input type="color" id="colorParticle" value="#ffffff" class="color-picker-input">
-              </div>
-
-              <div class="control-row">
-                <label for="gradientStyle">Farbverlauf-Art</label>
+                <label for="gradientStyle">Verlauf-Geometrie</label>
                 <select id="gradientStyle" class="select-input">
                   <option value="angular">360° Winkelverlauf (Radial Conic)</option>
                   <option value="radial">Zentrum zu Rand (Linear Radial)</option>
                   <option value="linear_h">Horizontal (Links nach Rechts)</option>
-                  <option value="rainbow">Dynamischer Regenbogen-Zyklus</option>
+                  <option value="linear_v">Vertikal (Oben nach Unten)</option>
                 </select>
               </div>
             </div>
 
             <div class="panel-section">
-              <h3 class="section-title">Neon Bloom & Glow</h3>
-
-              <div class="control-row">
-                <label for="glowIntensity">Glow-Leuchtkraft</label>
-                <div class="range-group">
-                  <input type="range" id="glowIntensity" min="0" max="1.0" value="0.65" step="0.05">
-                  <span class="range-value" id="valGlowIntensity">65%</span>
-                </div>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">Neon Bloom & Glow Engine</h3>
+                <label class="switch-toggle" title="Neon-Glow aktivieren">
+                  <input type="checkbox" id="enableGlow" checked>
+                  <span class="switch-slider"></span>
+                </label>
               </div>
 
-              <div class="control-row">
-                <label for="glowBlur">Glow-Radius</label>
-                <div class="range-group">
-                  <input type="range" id="glowBlur" min="0" max="50" value="20" step="2">
-                  <span class="range-value" id="valGlowBlur">20px</span>
+              <div id="glowOptionsContainer">
+                <div class="control-row">
+                  <label for="glowIntensity">Glow-Leuchtkraft</label>
+                  <div class="range-group">
+                    <input type="range" id="glowIntensity" min="0" max="1.0" value="0.75" step="0.05">
+                    <span class="range-value" id="valGlowIntensity">75%</span>
+                  </div>
+                </div>
+
+                <div class="control-row">
+                  <label for="glowBlur">Glow-Radius (Bloom Spread)</label>
+                  <div class="range-group">
+                    <input type="range" id="glowBlur" min="0" max="60" value="25" step="2">
+                    <span class="range-value" id="valGlowBlur">25px</span>
+                  </div>
+                </div>
+
+                <div class="toggle-row">
+                  <label for="laserCore">Doppelter Laser-Kern (Laser Core Line)</label>
+                  <input type="checkbox" id="laserCore" checked>
                 </div>
               </div>
             </div>
@@ -479,7 +720,7 @@
             <div class="panel-section">
               <h3 class="section-title">Hintergrund-Modus</h3>
               <select id="backgroundMode" class="select-input">
-                <option value="transparent">100% Transparent (Alpha-Kanal für DaVinci)</option>
+                <option value="transparent">100% Transparent (Alpha-Kanal für DaVinci Resolve)</option>
                 <option value="blurred_cover">Unscharfes Cover-Artwork im Hintergrund</option>
                 <option value="dark_vignette">Dunkle Obsidian-Vignette</option>
                 <option value="solid_black">Reines Schwarz (#000000)</option>
@@ -490,57 +731,66 @@
           <!-- TAB 6: TYPOGRAPHY -->
           <div class="tab-panel" id="tab-text">
             <div class="panel-section">
-              <h3 class="section-title">Song-Info Overlay</h3>
-
-              <div class="toggle-row">
-                <label for="showTextOverlay">Text-Overlay anzeigen</label>
-                <input type="checkbox" id="showTextOverlay" checked>
+              <div class="section-header-with-toggle">
+                <h3 class="section-title">Song-Info Overlay</h3>
+                <label class="switch-toggle" title="Text-Overlay aktivieren">
+                  <input type="checkbox" id="showTextOverlay" checked>
+                  <span class="switch-slider"></span>
+                </label>
               </div>
 
-              <div class="control-row">
-                <label for="fontFamily">Schriftart</label>
-                <select id="fontFamily" class="select-input">
-                  <option value="'Outfit', sans-serif">Outfit (Modern Clean)</option>
-                  <option value="'Orbitron', sans-serif">Orbitron (Cyber / EDM)</option>
-                  <option value="'Montserrat', sans-serif">Montserrat (Bold Studio)</option>
-                  <option value="'Inter', sans-serif">Inter (Minimalist)</option>
-                  <option value="'Cinzel', serif">Cinzel (Cinematic Serif)</option>
-                </select>
-              </div>
-
-              <div class="control-row">
-                <label for="textPosition">Position</label>
-                <select id="textPosition" class="select-input">
-                  <option value="below_circle">Direkt unter dem Kreis</option>
-                  <option value="bottom_center">Unten Zentriert</option>
-                  <option value="top_center">Oben Zentriert</option>
-                </select>
-              </div>
-
-              <div class="control-row">
-                <label for="titleFontSize">Titel Schriftgröße</label>
-                <div class="range-group">
-                  <input type="range" id="titleFontSize" min="16" max="72" value="38" step="2">
-                  <span class="range-value" id="valTitleFontSize">38px</span>
+              <div id="textOptionsContainer">
+                <div class="control-row">
+                  <label for="fontFamily">Schriftart</label>
+                  <select id="fontFamily" class="select-input">
+                    <option value="'Outfit', sans-serif">Outfit (Modern Clean)</option>
+                    <option value="'Orbitron', sans-serif">Orbitron (Cyber / EDM)</option>
+                    <option value="'Syncopate', sans-serif">Syncopate (Futuristic Wide)</option>
+                    <option value="'Montserrat', sans-serif">Montserrat (Bold Studio)</option>
+                    <option value="'Inter', sans-serif">Inter (Minimalist)</option>
+                    <option value="'Cinzel', serif">Cinzel (Cinematic Serif)</option>
+                  </select>
                 </div>
-              </div>
 
-              <div class="control-row">
-                <label for="artistFontSize">Artist Schriftgröße</label>
-                <div class="range-group">
-                  <input type="range" id="artistFontSize" min="12" max="48" value="22" step="2">
-                  <span class="range-value" id="valArtistFontSize">22px</span>
+                <div class="control-row">
+                  <label for="textPosition">Position</label>
+                  <select id="textPosition" class="select-input">
+                    <option value="below_circle">Direkt unter der Form</option>
+                    <option value="bottom_center">Unten Zentriert</option>
+                    <option value="top_center">Oben Zentriert</option>
+                  </select>
                 </div>
-              </div>
 
-              <div class="toggle-row">
-                <label for="textPulseWithBeat">Text pulsiert im Beat</label>
-                <input type="checkbox" id="textPulseWithBeat" checked>
-              </div>
+                <div class="control-row">
+                  <label for="titleFontSize">Titel Schriftgröße</label>
+                  <div class="range-group">
+                    <input type="range" id="titleFontSize" min="16" max="72" value="38" step="2">
+                    <span class="range-value" id="valTitleFontSize">38px</span>
+                  </div>
+                </div>
 
-              <div class="toggle-row">
-                <label for="showTimecode">Live-Timecode einblenden</label>
-                <input type="checkbox" id="showTimecode" checked>
+                <div class="control-row">
+                  <label for="artistFontSize">Artist Schriftgröße</label>
+                  <div class="range-group">
+                    <input type="range" id="artistFontSize" min="12" max="48" value="22" step="2">
+                    <span class="range-value" id="valArtistFontSize">22px</span>
+                  </div>
+                </div>
+
+                <div class="toggle-row">
+                  <label for="textPulseWithBeat">Text pulsiert im Beat</label>
+                  <input type="checkbox" id="textPulseWithBeat" checked>
+                </div>
+
+                <div class="toggle-row">
+                  <label for="showTimecode">Live-Timecode einblenden</label>
+                  <input type="checkbox" id="showTimecode" checked>
+                </div>
+
+                <div class="toggle-row">
+                  <label for="showProgressBar">Linearer Fortschrittsbalken</label>
+                  <input type="checkbox" id="showProgressBar">
+                </div>
               </div>
             </div>
           </div>
@@ -582,7 +832,7 @@
                 <div class="export-banner-icon">💡</div>
                 <div class="export-banner-text">
                   <strong>Workflow in DaVinci Resolve:</strong><br>
-                  Ziehe die exportierte <code>.mov</code> Datei einfach auf eine Videospur über deinen Hintergrund. Der Hintergrund ist zu 100% transparent freigestellt!
+                  Ziehe die exportierte <code>.mov</code> Datei einfach auf eine Videospur (V2) über dein Hintergrund-Footage (V1). Alle Elemente sind transparent freigestellt!
                 </div>
               </div>
 

public/presets.js

@@ -1,252 +1,509 @@
 /**
- * VIZ Visualizer Presets Library
+ * VIZ 2.0 Visualizer Presets Library
+ * Inspired by Videobolt, Monstercat, Trap Nation & Synthwave aesthetics.
  */
 const VIZ_PRESETS = {
   trap_nation: {
     name: 'Trap Nation Classic',
+    shapeType: 'circle',
+    showCover: true,
+    coverShape: 'circle',
     circleRadius: 155,
     pulseIntensity: 0.55,
     pulseDecay: 0.78,
+    showBorder: true,
     borderWidth: 6,
     borderColor: '#ffffff',
     showProgressRing: true,
     progressRingColor: '#ffffff',
+    progressRingWidth: 6,
     rotationSpeed: 3,
     beatSpinImpulse: true,
+    showSpectrum: true,
     spectrumMode: 'radial_bars',
+    linearAlignment: 'center_mirrored',
     barCount: 128,
-    spectrumMaxHeight: 140,
+    spectrumMaxHeight: 145,
     barWidth: 4,
     barSpacing: 10,
+    barCornerRadius: 2,
     freqSensitivity: 1.4,
     freqFocus: 'bass_heavy',
     mirrorSpectrum: true,
     enableParticles: true,
+    particleType: 'starfield',
     particleCount: 110,
     particleSpeed: 1.2,
     particleWarp: 3.0,
+    enableGrid: false,
+    colorGrid: '#ff007f',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.5,
+    enableShake: true,
     camShakeIntensity: 0.45,
+    enableGlitch: true,
     rgbSplitIntensity: 0.2,
     beatFlash: false,
+    enableBassZoom: true,
+    colorMode: 'gradient_2',
     colorGrad1: '#ffffff',
     colorGrad2: '#cccccc',
+    colorGrad3: '#777777',
     colorParticle: '#ffffff',
     gradientStyle: 'angular',
+    enableGlow: true,
     glowIntensity: 0.8,
     glowBlur: 24,
+    laserCore: false,
     backgroundMode: 'transparent',
+    showTextOverlay: true,
     fontFamily: "'Outfit', sans-serif",
     textPosition: 'below_circle',
     titleFontSize: 38,
     artistFontSize: 22,
     textPulseWithBeat: true,
-    showTimecode: true
+    showTimecode: true,
+    showProgressBar: false
   },
 
-  cyberpunk: {
-    name: 'Cyberpunk Neon',
-    circleRadius: 140,
-    pulseIntensity: 0.6,
+  cyber_hexagon: {
+    name: 'Cyber Hexagon (Neon Core)',
+    shapeType: 'hexagon',
+    showCover: true,
+    coverShape: 'hexagon',
+    circleRadius: 145,
+    pulseIntensity: 0.62,
     pulseDecay: 0.82,
-    borderWidth: 5,
+    showBorder: true,
+    borderWidth: 6,
     borderColor: '#00f0ff',
     showProgressRing: true,
     progressRingColor: '#ff007f',
-    rotationSpeed: 4.5,
+    progressRingWidth: 7,
+    rotationSpeed: 4.0,
     beatSpinImpulse: true,
+    showSpectrum: true,
     spectrumMode: 'radial_bars',
+    linearAlignment: 'center_mirrored',
     barCount: 144,
     spectrumMaxHeight: 160,
     barWidth: 3.5,
     barSpacing: 14,
+    barCornerRadius: 2,
     freqSensitivity: 1.5,
     freqFocus: 'balanced',
     mirrorSpectrum: true,
     enableParticles: true,
+    particleType: 'starfield',
     particleCount: 140,
-    particleSpeed: 1.6,
+    particleSpeed: 1.5,
     particleWarp: 3.5,
+    enableGrid: false,
+    colorGrid: '#00f0ff',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.6,
+    enableShake: true,
     camShakeIntensity: 0.5,
-    rgbSplitIntensity: 0.55,
+    enableGlitch: true,
+    rgbSplitIntensity: 0.4,
     beatFlash: true,
+    enableBassZoom: true,
+    colorMode: 'gradient_3',
     colorGrad1: '#00f0ff',
     colorGrad2: '#ff007f',
+    colorGrad3: '#7000ff',
     colorParticle: '#00f0ff',
     gradientStyle: 'angular',
+    enableGlow: true,
     glowIntensity: 0.95,
     glowBlur: 30,
+    laserCore: true,
     backgroundMode: 'transparent',
+    showTextOverlay: true,
     fontFamily: "'Orbitron', sans-serif",
     textPosition: 'below_circle',
     titleFontSize: 36,
     artistFontSize: 20,
     textPulseWithBeat: true,
-    showTimecode: true
+    showTimecode: true,
+    showProgressBar: false
   },
 
-  minimal_clean: {
-    name: 'Minimal Clean',
-    circleRadius: 160,
-    pulseIntensity: 0.3,
-    pulseDecay: 0.85,
-    borderWidth: 3,
-    borderColor: '#ffffff',
-    showProgressRing: true,
-    progressRingColor: '#ffffff',
-    rotationSpeed: 1.5,
+  synthwave_horizon: {
+    name: 'Synthwave Horizon (Linear & 3D Grid)',
+    shapeType: 'linear',
+    showCover: false,
+    coverShape: 'square',
+    circleRadius: 120,
+    pulseIntensity: 0.4,
+    pulseDecay: 0.8,
+    showBorder: false,
+    borderWidth: 4,
+    borderColor: '#ff007f',
+    showProgressRing: false,
+    progressRingColor: '#ff7700',
+    progressRingWidth: 5,
+    rotationSpeed: 0,
     beatSpinImpulse: false,
+    showSpectrum: true,
     spectrumMode: 'smooth_wave',
-    barCount: 80,
-    spectrumMaxHeight: 90,
-    barWidth: 3,
-    barSpacing: 16,
-    freqSensitivity: 1.1,
+    linearAlignment: 'center_mirrored',
+    barCount: 96,
+    spectrumMaxHeight: 180,
+    barWidth: 5,
+    barSpacing: 10,
+    barCornerRadius: 4,
+    freqSensitivity: 1.3,
     freqFocus: 'balanced',
     mirrorSpectrum: true,
     enableParticles: true,
-    particleCount: 40,
-    particleSpeed: 0.6,
-    particleWarp: 1.2,
-    camShakeIntensity: 0.15,
+    particleType: 'dust',
+    particleCount: 80,
+    particleSpeed: 0.8,
+    particleWarp: 1.8,
+    enableGrid: true,
+    colorGrid: '#ff0055',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.7,
+    enableShake: true,
+    camShakeIntensity: 0.25,
+    enableGlitch: false,
+    rgbSplitIntensity: 0.15,
+    beatFlash: false,
+    enableBassZoom: false,
+    colorMode: 'gradient_3',
+    colorGrad1: '#ff7700',
+    colorGrad2: '#ff0055',
+    colorGrad3: '#7900ff',
+    colorParticle: '#ffaa00',
+    gradientStyle: 'linear_h',
+    enableGlow: true,
+    glowIntensity: 0.9,
+    glowBlur: 28,
+    laserCore: true,
+    backgroundMode: 'transparent',
+    showTextOverlay: true,
+    fontFamily: "'Syncopate', sans-serif",
+    textPosition: 'top_center',
+    titleFontSize: 40,
+    artistFontSize: 22,
+    textPulseWithBeat: true,
+    showTimecode: true,
+    showProgressBar: true
+  },
+
+  laser_oscilloscope: {
+    name: 'Laser Oscilloscope (No-Cover Wave)',
+    shapeType: 'oscilloscope',
+    showCover: false,
+    coverShape: 'circle',
+    circleRadius: 130,
+    pulseIntensity: 0.45,
+    pulseDecay: 0.82,
+    showBorder: false,
+    borderWidth: 2,
+    borderColor: '#00ff88',
+    showProgressRing: false,
+    progressRingColor: '#00ff88',
+    progressRingWidth: 4,
+    rotationSpeed: 0,
+    beatSpinImpulse: false,
+    showSpectrum: true,
+    spectrumMode: 'smooth_wave',
+    linearAlignment: 'center_mirrored',
+    barCount: 128,
+    spectrumMaxHeight: 170,
+    barWidth: 4,
+    barSpacing: 8,
+    barCornerRadius: 2,
+    freqSensitivity: 1.5,
+    freqFocus: 'balanced',
+    mirrorSpectrum: false,
+    enableParticles: true,
+    particleType: 'sparks',
+    particleCount: 75,
+    particleSpeed: 1.4,
+    particleWarp: 2.5,
+    enableGrid: false,
+    colorGrid: '#00ff88',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.5,
+    enableShake: true,
+    camShakeIntensity: 0.3,
+    enableGlitch: true,
+    rgbSplitIntensity: 0.2,
+    beatFlash: false,
+    enableBassZoom: true,
+    colorMode: 'gradient_2',
+    colorGrad1: '#00ff88',
+    colorGrad2: '#00e5ff',
+    colorGrad3: '#0055ff',
+    colorParticle: '#00ff88',
+    gradientStyle: 'linear_h',
+    enableGlow: true,
+    glowIntensity: 1.0,
+    glowBlur: 32,
+    laserCore: true,
+    backgroundMode: 'transparent',
+    showTextOverlay: true,
+    fontFamily: "'Orbitron', sans-serif",
+    textPosition: 'bottom_center',
+    titleFontSize: 34,
+    artistFontSize: 18,
+    textPulseWithBeat: true,
+    showTimecode: true,
+    showProgressBar: true
+  },
+
+  diamond_bass: {
+    name: 'Diamond Bass Drop (Polygon Core)',
+    shapeType: 'diamond',
+    showCover: true,
+    coverShape: 'diamond',
+    circleRadius: 150,
+    pulseIntensity: 0.65,
+    pulseDecay: 0.76,
+    showBorder: true,
+    borderWidth: 7,
+    borderColor: '#ffcc00',
+    showProgressRing: true,
+    progressRingColor: '#ff3300',
+    progressRingWidth: 7,
+    rotationSpeed: 2.5,
+    beatSpinImpulse: true,
+    showSpectrum: true,
+    spectrumMode: 'radial_bars',
+    linearAlignment: 'center_mirrored',
+    barCount: 112,
+    spectrumMaxHeight: 155,
+    barWidth: 4.5,
+    barSpacing: 14,
+    barCornerRadius: 2,
+    freqSensitivity: 1.45,
+    freqFocus: 'bass_heavy',
+    mirrorSpectrum: true,
+    enableParticles: true,
+    particleType: 'sparks',
+    particleCount: 130,
+    particleSpeed: 1.6,
+    particleWarp: 3.5,
+    enableGrid: false,
+    colorGrid: '#ff3300',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.5,
+    enableShake: true,
+    camShakeIntensity: 0.5,
+    enableGlitch: true,
+    rgbSplitIntensity: 0.35,
+    beatFlash: true,
+    enableBassZoom: true,
+    colorMode: 'gradient_3',
+    colorGrad1: '#ffcc00',
+    colorGrad2: '#ff3300',
+    colorGrad3: '#880000',
+    colorParticle: '#ffdd44',
+    gradientStyle: 'angular',
+    enableGlow: true,
+    glowIntensity: 0.9,
+    glowBlur: 28,
+    laserCore: true,
+    backgroundMode: 'transparent',
+    showTextOverlay: true,
+    fontFamily: "'Outfit', sans-serif",
+    textPosition: 'below_circle',
+    titleFontSize: 36,
+    artistFontSize: 20,
+    textPulseWithBeat: true,
+    showTimecode: true,
+    showProgressBar: false
+  },
+
+  cosmic_wormhole: {
+    name: 'Cosmic Wormhole (3D Tunnel)',
+    shapeType: 'tunnel',
+    showCover: true,
+    coverShape: 'circle',
+    circleRadius: 135,
+    pulseIntensity: 0.5,
+    pulseDecay: 0.8,
+    showBorder: true,
+    borderWidth: 4,
+    borderColor: '#e066ff',
+    showProgressRing: true,
+    progressRingColor: '#bf00ff',
+    progressRingWidth: 5,
+    rotationSpeed: 3.0,
+    beatSpinImpulse: true,
+    showSpectrum: true,
+    spectrumMode: 'dual_ring',
+    linearAlignment: 'center_mirrored',
+    barCount: 96,
+    spectrumMaxHeight: 130,
+    barWidth: 3.5,
+    barSpacing: 10,
+    barCornerRadius: 3,
+    freqSensitivity: 1.35,
+    freqFocus: 'balanced',
+    mirrorSpectrum: true,
+    enableParticles: true,
+    particleType: 'starfield',
+    particleCount: 160,
+    particleSpeed: 2.0,
+    particleWarp: 4.5,
+    enableGrid: false,
+    colorGrid: '#bf00ff',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.5,
+    enableShake: true,
+    camShakeIntensity: 0.4,
+    enableGlitch: false,
+    rgbSplitIntensity: 0.2,
+    beatFlash: false,
+    enableBassZoom: true,
+    colorMode: 'gradient_3',
+    colorGrad1: '#bf00ff',
+    colorGrad2: '#e066ff',
+    colorGrad3: '#3b0066',
+    colorParticle: '#e066ff',
+    gradientStyle: 'angular',
+    enableGlow: true,
+    glowIntensity: 0.85,
+    glowBlur: 26,
+    laserCore: true,
+    backgroundMode: 'transparent',
+    showTextOverlay: true,
+    fontFamily: "'Orbitron', sans-serif",
+    textPosition: 'below_circle',
+    titleFontSize: 36,
+    artistFontSize: 20,
+    textPulseWithBeat: true,
+    showTimecode: true,
+    showProgressBar: false
+  },
+
+  studio_rack_eq: {
+    name: 'Studio Graphic EQ (Block Bars)',
+    shapeType: 'linear',
+    showCover: false,
+    coverShape: 'square',
+    circleRadius: 100,
+    pulseIntensity: 0.3,
+    pulseDecay: 0.85,
+    showBorder: false,
+    borderWidth: 2,
+    borderColor: '#00f0ff',
+    showProgressRing: false,
+    progressRingColor: '#00f0ff',
+    progressRingWidth: 4,
+    rotationSpeed: 0,
+    beatSpinImpulse: false,
+    showSpectrum: true,
+    spectrumMode: 'block_matrix',
+    linearAlignment: 'bottom_up',
+    barCount: 64,
+    spectrumMaxHeight: 240,
+    barWidth: 10,
+    barSpacing: 6,
+    barCornerRadius: 2,
+    freqSensitivity: 1.25,
+    freqFocus: 'balanced',
+    mirrorSpectrum: false,
+    enableParticles: false,
+    particleType: 'dust',
+    particleCount: 50,
+    particleSpeed: 0.8,
+    particleWarp: 1.5,
+    enableGrid: false,
+    colorGrid: '#00f0ff',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.4,
+    enableShake: false,
+    camShakeIntensity: 0.1,
+    enableGlitch: false,
     rgbSplitIntensity: 0.05,
     beatFlash: false,
-    colorGrad1: '#ffffff',
-    colorGrad2: '#a0aab8',
+    enableBassZoom: false,
+    colorMode: 'gradient_3',
+    colorGrad1: '#00ff88',
+    colorGrad2: '#ffcc00',
+    colorGrad3: '#ff0055',
+    colorParticle: '#ffffff',
+    gradientStyle: 'linear_v',
+    enableGlow: true,
+    glowIntensity: 0.6,
+    glowBlur: 16,
+    laserCore: false,
+    backgroundMode: 'transparent',
+    showTextOverlay: true,
+    fontFamily: "'Montserrat', sans-serif",
+    textPosition: 'top_center',
+    titleFontSize: 36,
+    artistFontSize: 20,
+    textPulseWithBeat: false,
+    showTimecode: true,
+    showProgressBar: true
+  },
+
+  minimal_ice_wave: {
+    name: 'Minimal Ice Wave (Clean Spline)',
+    shapeType: 'circle',
+    showCover: true,
+    coverShape: 'circle',
+    circleRadius: 160,
+    pulseIntensity: 0.35,
+    pulseDecay: 0.88,
+    showBorder: true,
+    borderWidth: 3,
+    borderColor: '#ffffff',
+    showProgressRing: true,
+    progressRingColor: '#00e1ff',
+    progressRingWidth: 4,
+    rotationSpeed: 1.5,
+    beatSpinImpulse: false,
+    showSpectrum: true,
+    spectrumMode: 'smooth_wave',
+    linearAlignment: 'center_mirrored',
+    barCount: 88,
+    spectrumMaxHeight: 95,
+    barWidth: 3.5,
+    barSpacing: 16,
+    barCornerRadius: 2,
+    freqSensitivity: 1.15,
+    freqFocus: 'balanced',
+    mirrorSpectrum: true,
+    enableParticles: true,
+    particleType: 'dust',
+    particleCount: 50,
+    particleSpeed: 0.6,
+    particleWarp: 1.2,
+    enableGrid: false,
+    colorGrid: '#00e1ff',
+    gridPerspective: 0.65,
+    gridAudioReactive: 0.4,
+    enableShake: true,
+    camShakeIntensity: 0.15,
+    enableGlitch: false,
+    rgbSplitIntensity: 0.05,
+    beatFlash: false,
+    enableBassZoom: false,
+    colorMode: 'gradient_3',
+    colorGrad1: '#00e1ff',
+    colorGrad2: '#ffffff',
+    colorGrad3: '#0051ff',
     colorParticle: '#ffffff',
     gradientStyle: 'linear_h',
-    glowIntensity: 0.4,
-    glowBlur: 14,
+    enableGlow: true,
+    glowIntensity: 0.6,
+    glowBlur: 18,
+    laserCore: true,
     backgroundMode: 'transparent',
+    showTextOverlay: true,
     fontFamily: "'Inter', sans-serif",
     textPosition: 'bottom_center',
     titleFontSize: 32,
     artistFontSize: 18,
     textPulseWithBeat: false,
-    showTimecode: false
-  },
-
-  fire_amber: {
-    name: 'Fire & Amber',
-    circleRadius: 145,
-    pulseIntensity: 0.5,
-    pulseDecay: 0.8,
-    borderWidth: 6,
-    borderColor: '#ffaa00',
-    showProgressRing: true,
-    progressRingColor: '#ff3700',
-    rotationSpeed: 2.5,
-    beatSpinImpulse: true,
-    spectrumMode: 'radial_bars',
-    barCount: 112,
-    spectrumMaxHeight: 150,
-    barWidth: 4.5,
-    barSpacing: 12,
-    freqSensitivity: 1.35,
-    freqFocus: 'bass_heavy',
-    mirrorSpectrum: true,
-    enableParticles: true,
-    particleCount: 130,
-    particleSpeed: 1.4,
-    particleWarp: 3.2,
-    camShakeIntensity: 0.4,
-    rgbSplitIntensity: 0.3,
-    beatFlash: true,
-    colorGrad1: '#ffaa00',
-    colorGrad2: '#ff2200',
-    colorParticle: '#ffd700',
-    gradientStyle: 'angular',
-    glowIntensity: 0.85,
-    glowBlur: 26,
-    backgroundMode: 'transparent',
-    fontFamily: "'Montserrat', sans-serif",
-    textPosition: 'below_circle',
-    titleFontSize: 38,
-    artistFontSize: 22,
-    textPulseWithBeat: true,
-    showTimecode: true
-  },
-
-  matrix_glitch: {
-    name: 'Matrix Glitch',
-    circleRadius: 135,
-    pulseIntensity: 0.65,
-    pulseDecay: 0.72,
-    borderWidth: 4,
-    borderColor: '#00ff66',
-    showProgressRing: true,
-    progressRingColor: '#00ff88',
-    rotationSpeed: 5,
-    beatSpinImpulse: true,
-    spectrumMode: 'floating_dots',
-    barCount: 160,
-    spectrumMaxHeight: 170,
-    barWidth: 4,
-    barSpacing: 14,
-    freqSensitivity: 1.6,
-    freqFocus: 'bass_heavy',
-    mirrorSpectrum: false,
-    enableParticles: true,
-    particleCount: 160,
-    particleSpeed: 2.0,
-    particleWarp: 4.0,
-    camShakeIntensity: 0.6,
-    rgbSplitIntensity: 0.7,
-    beatFlash: true,
-    colorGrad1: '#00ff66',
-    colorGrad2: '#003311',
-    colorParticle: '#00ff88',
-    gradientStyle: 'angular',
-    glowIntensity: 0.9,
-    glowBlur: 25,
-    backgroundMode: 'transparent',
-    fontFamily: "'Orbitron', sans-serif",
-    textPosition: 'below_circle',
-    titleFontSize: 36,
-    artistFontSize: 20,
-    textPulseWithBeat: true,
-    showTimecode: true
-  },
-
-  deep_violet: {
-    name: 'Deep Violet Dream',
-    circleRadius: 150,
-    pulseIntensity: 0.45,
-    pulseDecay: 0.82,
-    borderWidth: 5,
-    borderColor: '#b347ff',
-    showProgressRing: true,
-    progressRingColor: '#00f0ff',
-    rotationSpeed: 2.5,
-    beatSpinImpulse: true,
-    spectrumMode: 'dual_ring',
-    barCount: 112,
-    spectrumMaxHeight: 130,
-    barWidth: 3.5,
-    barSpacing: 12,
-    freqSensitivity: 1.3,
-    freqFocus: 'balanced',
-    mirrorSpectrum: true,
-    enableParticles: true,
-    particleCount: 100,
-    particleSpeed: 1.0,
-    particleWarp: 2.5,
-    camShakeIntensity: 0.35,
-    rgbSplitIntensity: 0.25,
-    beatFlash: false,
-    colorGrad1: '#b347ff',
-    colorGrad2: '#00f0ff',
-    colorParticle: '#e6b8ff',
-    gradientStyle: 'angular',
-    glowIntensity: 0.8,
-    glowBlur: 22,
-    backgroundMode: 'transparent',
-    fontFamily: "'Outfit', sans-serif",
-    textPosition: 'below_circle',
-    titleFontSize: 38,
-    artistFontSize: 22,
-    textPulseWithBeat: true,
-    showTimecode: true
+    showTimecode: false,
+    showProgressBar: false
   }
 };
-
-window.VIZ_PRESETS = VIZ_PRESETS;