feat(visualizer): add multiple visualizers with mouse tracking and beat response

- Add BaseVisualizer class for shared visualizer logic
- Add Helix visualizer (DNA helix with rungs, beat compression/bounce)
- Add Tunnel visualizer (ring tunnel with depth parallax)
- Refactor SphereVisualizer to extend BaseVisualizer
- Add mouse tracking to all visualizers (canvas-relative, centered)
- Add visualizer switching via logo click (persisted to localStorage)
- Add beat-responsive bouncing and compression effects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

layouts/_default/baseof.html

@@ -64,6 +64,18 @@
 
       // Player UI component
       Alpine.data('playerUI', () => ({
+        visualizerName: 'Sphere',
+
+        init() {
+          // Get initial visualizer name
+          this.$nextTick(() => {
+            const viz = window.__pivoine?.visualizer;
+            if (viz) {
+              this.visualizerName = viz.getCurrentName() || 'Sphere';
+            }
+          });
+        },
+
         togglePlay() {
           window.__pivoine?.audioManager?.toggle();
         },
@@ -85,6 +97,12 @@
             this.setVolume(this._previousVolume || 0.8);
           }
         },
+        cycleVisualizer() {
+          const viz = window.__pivoine?.visualizer;
+          if (viz) {
+            this.visualizerName = viz.nextVisualizer();
+          }
+        },
         formatTime(seconds) {
           if (!seconds || isNaN(seconds)) return '0:00';
           const mins = Math.floor(seconds / 60);

layouts/partials/header.html

@@ -1,23 +1,25 @@
 <header class="fixed top-0 left-0 right-0 z-sticky bg-surface-0/80 backdrop-blur-md border-b border-border">
   <nav class="container-wide flex items-center justify-between h-16">
     {{/* Logo */}}
-    <a
-      href="{{ "/" | relURL }}"
-      class="flex items-center gap-3 group"
-      aria-label="{{ .Site.Title }} - Home"
-    >
+    <div class="flex items-center gap-3 group">
       <canvas
         id="logo-canvas"
         hx-preserve="true"
-        class="w-8 h-8"
+        class="w-8 h-8 cursor-pointer"
         width="32"
         height="32"
         aria-hidden="true"
+        @click="window.__pivoine?.visualizer?.nextVisualizer()"
+        title="Click to change visualizer"
       ></canvas>
-      <span class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors">
+      <a
+        href="{{ "/" | relURL }}"
+        class="text-lg font-medium tracking-tight group-hover:text-accent transition-colors"
+        aria-label="{{ .Site.Title }} - Home"
+      >
         VALKNAR'S
-      </span>
-    </a>
+      </a>
+    </div>
 
     {{/* Navigation */}}
     <ul