From c24dee3a0e54f2d6759a0a024d2a11d50ed40db1 Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Sat, 11 Jul 2026 21:35:52 -0700
Subject: [PATCH 1/3] feat: add radial FFT visualizer

Adds a full-screen visualizer panel (Waves icon in toolbar, Escape to
close) with 64-band FFT-driven radial bars around the album art.

- Rust: new `AnalysisSource` wraps the audio pipeline with RMS EMA and
  a 2048-sample Hann-windowed FFT (rustfft), writing log-spaced band
  magnitudes with attack/decay smoothing to a shared ArcSwap. Engine
  tick lowered to 50ms; a new `visualizer-data` event fires at 20Hz
  only while the panel is open (enable/disable commands gate it).
- Frontend: canvas rAF loop interpolates toward incoming FFT bands for
  smooth motion between frames; radial wedge bars drawn with a glow
  gradient from the accent colour. Album art fades to 28% opacity and
  morphs to a circle while playing, returning on pause.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src-tauri/Cargo.lock                          |   1 +
 src-tauri/Cargo.toml                          |   1 +
 src-tauri/src/audio/analysis.rs               | 320 ++++++++++++++++++
 src-tauri/src/audio/engine.rs                 |  55 ++-
 src-tauri/src/audio/mod.rs                    |  36 +-
 src-tauri/src/audio/rms.rs                    | 148 ++++++++
 src-tauri/src/commands/playback.rs            |  10 +
 src-tauri/src/lib.rs                          |   2 +
 src/lib/api/commands.ts                       |   2 +
 src/lib/api/events.ts                         |   3 +
 .../visualizer/VisualizerPanel.svelte         | 270 +++++++++++++++
 src/lib/stores/player.svelte.ts               |   1 +
 src/lib/stores/ui.svelte.ts                   |  10 +
 src/lib/types.ts                              |   1 +
 src/routes/+layout.svelte                     |  20 +-
 15 files changed, 868 insertions(+), 12 deletions(-)
 create mode 100644 src-tauri/src/audio/analysis.rs
 create mode 100644 src-tauri/src/audio/rms.rs
 create mode 100644 src/lib/components/visualizer/VisualizerPanel.svelte

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index fb2717b..a11161a 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4910,6 +4910,7 @@ dependencies = [
  "rubato",
  "rusqlite",
  "rusqlite_migration",
+ "rustfft",
  "serde",
  "serde_json",
  "souvlaki",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index f53f8a9..6b17c90 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -42,4 +42,5 @@ rubato = "0.15"
 souvlaki = { version = "0.7", default-features = false, features = ["use_zbus"] }
 tauri-plugin-dialog = "2.7.1"
 reqwest = { version = "0.12", default-features = false, features = ["json", "rustls-tls"] }
+rustfft = "6"
 
diff --git a/src-tauri/src/audio/analysis.rs b/src-tauri/src/audio/analysis.rs
new file mode 100644
index 0000000..8641c7d
--- /dev/null
+++ b/src-tauri/src/audio/analysis.rs
@@ -0,0 +1,320 @@
+use std::sync::atomic::{AtomicU32, Ordering};
+use std::sync::Arc;
+use std::time::Duration;
+
+use arc_swap::ArcSwap;
+use rodio::source::SeekError;
+use rodio::Source;
+use rustfft::num_complex::Complex;
+use rustfft::{Fft, FftPlanner};
+
+pub const FFT_SIZE: usize = 2048;
+pub const NUM_BANDS: usize = 64;
+
+// dB floor for normalization: bands below this are treated as silent (mapped to 0).
+const DB_FLOOR: f32 = -80.0;
+
+// Exponential smoothing: bands rise quickly on transients and fall slowly.
+const ATTACK_ALPHA: f32 = 0.8;
+const DECAY_ALPHA: f32 = 0.15;
+
+/// Precomputes which FFT output bins contribute to each log-spaced frequency band.
+/// Returns `NUM_BANDS` entries of `(start_bin, end_bin)` (inclusive).
+fn compute_band_bins(sample_rate: u32) -> Vec<(usize, usize)> {
+    let min_freq = 20.0f32;
+    let max_freq = (sample_rate as f32 / 2.0).min(20_000.0);
+    let log_min = min_freq.log2();
+    let log_max = max_freq.log2();
+    (0..NUM_BANDS)
+        .map(|i| {
+            let low =
+                2f32.powf(log_min + i as f32 * (log_max - log_min) / NUM_BANDS as f32);
+            let high = 2f32
+                .powf(log_min + (i + 1) as f32 * (log_max - log_min) / NUM_BANDS as f32);
+            let start = ((low * FFT_SIZE as f32 / sample_rate as f32).floor() as usize).max(1);
+            let end = ((high * FFT_SIZE as f32 / sample_rate as f32).ceil() as usize)
+                .min(FFT_SIZE / 2)
+                .max(start);
+            (start, end)
+        })
+        .collect()
+}
+
+fn hann_window() -> Vec<f32> {
+    (0..FFT_SIZE)
+        .map(|i| {
+            0.5 * (1.0
+                - (2.0 * std::f32::consts::PI * i as f32 / (FFT_SIZE - 1) as f32).cos())
+        })
+        .collect()
+}
+
+/// Wraps any `Source<Item = i16>` and continuously computes two things:
+///
+/// - **RMS amplitude**: exponential moving average written to `shared_rms`.
+/// - **Frequency spectrum**: 64-band FFT run on every `FFT_SIZE`-sample mono
+///   frame, with log-spaced bands and temporal smoothing, written to `shared_fft`.
+///
+/// Both shared values are updated inside `Iterator::next` so they reflect the
+/// audio the device is actually playing, not a lookahead.
+pub struct AnalysisSource<S: Source<Item = i16>> {
+    inner: S,
+    // RMS
+    ema_squared: f32,
+    alpha_rms: f32,
+    shared_rms: Arc<AtomicU32>,
+    // FFT — mono mix-down buffer
+    channel_accumulator: f32,
+    channel_counter: u16,
+    channels: u16,
+    mono_buffer: Vec<f32>,
+    // FFT plan and working buffers (reused each frame)
+    fft: Arc<dyn Fft<f32>>,
+    fft_buffer: Vec<Complex<f32>>,
+    scratch: Vec<Complex<f32>>,
+    window: Vec<f32>,
+    band_bins: Vec<(usize, usize)>,
+    smoothed_bands: Vec<f32>,
+    shared_fft: Arc<ArcSwap<Vec<f32>>>,
+}
+
+impl<S: Source<Item = i16>> AnalysisSource<S> {
+    pub fn new(
+        inner: S,
+        shared_rms: Arc<AtomicU32>,
+        shared_fft: Arc<ArcSwap<Vec<f32>>>,
+    ) -> Self {
+        let sample_rate = inner.sample_rate();
+        let channels = inner.channels().max(1);
+
+        let alpha_rms = 1.0 / (sample_rate as f32 * 0.1);
+
+        let mut planner = FftPlanner::<f32>::new();
+        let fft = planner.plan_fft_forward(FFT_SIZE);
+        let scratch_len = fft.get_inplace_scratch_len();
+
+        Self {
+            inner,
+            ema_squared: 0.0,
+            alpha_rms,
+            shared_rms,
+            channel_accumulator: 0.0,
+            channel_counter: 0,
+            channels,
+            mono_buffer: Vec::with_capacity(FFT_SIZE),
+            fft,
+            fft_buffer: vec![Complex::new(0.0, 0.0); FFT_SIZE],
+            scratch: vec![Complex::new(0.0, 0.0); scratch_len],
+            window: hann_window(),
+            band_bins: compute_band_bins(sample_rate),
+            smoothed_bands: vec![0.0; NUM_BANDS],
+            shared_fft,
+        }
+    }
+
+    fn run_fft(&mut self) {
+        // Apply Hann window and fill the FFT input buffer.
+        for (i, &sample) in self.mono_buffer.iter().enumerate() {
+            self.fft_buffer[i] = Complex::new(sample * self.window[i], 0.0);
+        }
+        self.fft.process_with_scratch(&mut self.fft_buffer, &mut self.scratch);
+
+        // Compute magnitude for each log-spaced band.
+        let scale = 2.0 / FFT_SIZE as f32;
+        let mut new_bands = vec![0.0f32; NUM_BANDS];
+        for (band, &(start, end)) in self.band_bins.iter().enumerate() {
+            let mean_mag = self.fft_buffer[start..=end]
+                .iter()
+                .map(|c| c.norm() * scale)
+                .sum::<f32>()
+                / (end - start + 1) as f32;
+
+            // Convert to dB and normalize to [0, 1].
+            let db = 20.0 * mean_mag.max(1e-10).log10();
+            new_bands[band] = ((db - DB_FLOOR) / DB_FLOOR.abs()).clamp(0.0, 1.0);
+        }
+
+        // Temporal smoothing: fast attack, slow decay.
+        for i in 0..NUM_BANDS {
+            let alpha = if new_bands[i] > self.smoothed_bands[i] {
+                ATTACK_ALPHA
+            } else {
+                DECAY_ALPHA
+            };
+            self.smoothed_bands[i] =
+                self.smoothed_bands[i] * (1.0 - alpha) + new_bands[i] * alpha;
+        }
+
+        self.shared_fft.store(Arc::new(self.smoothed_bands.clone()));
+        self.mono_buffer.clear();
+    }
+
+    fn reset(&mut self) {
+        self.ema_squared = 0.0;
+        self.channel_accumulator = 0.0;
+        self.channel_counter = 0;
+        self.mono_buffer.clear();
+        self.smoothed_bands.fill(0.0);
+        self.shared_rms.store(0.0f32.to_bits(), Ordering::Relaxed);
+        self.shared_fft.store(Arc::new(vec![0.0; NUM_BANDS]));
+    }
+}
+
+impl<S: Source<Item = i16>> Iterator for AnalysisSource<S> {
+    type Item = i16;
+
+    fn next(&mut self) -> Option<i16> {
+        let sample = self.inner.next()?;
+
+        // Update RMS.
+        let normalized = sample as f32 / 32768.0;
+        self.ema_squared =
+            self.ema_squared * (1.0 - self.alpha_rms) + normalized * normalized * self.alpha_rms;
+        self.shared_rms.store(self.ema_squared.sqrt().to_bits(), Ordering::Relaxed);
+
+        // Mix down to mono for FFT.
+        self.channel_accumulator += normalized;
+        self.channel_counter += 1;
+        if self.channel_counter == self.channels {
+            let mono = self.channel_accumulator / self.channels as f32;
+            self.mono_buffer.push(mono);
+            self.channel_counter = 0;
+            self.channel_accumulator = 0.0;
+
+            if self.mono_buffer.len() == FFT_SIZE {
+                self.run_fft();
+            }
+        }
+
+        Some(sample)
+    }
+}
+
+impl<S: Source<Item = i16>> Source for AnalysisSource<S> {
+    fn current_frame_len(&self) -> Option<usize> {
+        self.inner.current_frame_len()
+    }
+
+    fn channels(&self) -> u16 {
+        self.inner.channels()
+    }
+
+    fn sample_rate(&self) -> u32 {
+        self.inner.sample_rate()
+    }
+
+    fn total_duration(&self) -> Option<Duration> {
+        self.inner.total_duration()
+    }
+
+    fn try_seek(&mut self, pos: Duration) -> Result<(), SeekError> {
+        let result = self.inner.try_seek(pos);
+        if result.is_ok() {
+            self.reset();
+        }
+        result
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    struct TestSource {
+        samples: std::vec::IntoIter<i16>,
+        sample_rate: u32,
+        channels: u16,
+    }
+
+    impl Iterator for TestSource {
+        type Item = i16;
+        fn next(&mut self) -> Option<i16> {
+            self.samples.next()
+        }
+    }
+
+    impl Source for TestSource {
+        fn current_frame_len(&self) -> Option<usize> {
+            None
+        }
+        fn channels(&self) -> u16 {
+            self.channels
+        }
+        fn sample_rate(&self) -> u32 {
+            self.sample_rate
+        }
+        fn total_duration(&self) -> Option<Duration> {
+            None
+        }
+    }
+
+    fn make_source(samples: Vec<i16>) -> TestSource {
+        TestSource { samples: samples.into_iter(), sample_rate: 44100, channels: 1 }
+    }
+
+    #[test]
+    fn silence_gives_zero_rms() {
+        let shared_rms = Arc::new(AtomicU32::new(0));
+        let shared_fft = Arc::new(ArcSwap::from_pointee(vec![0.0f32; NUM_BANDS]));
+        let source = make_source(vec![0i16; FFT_SIZE * 2]);
+        let mut analysis = AnalysisSource::new(source, shared_rms.clone(), shared_fft);
+        for _ in 0..FFT_SIZE * 2 {
+            analysis.next();
+        }
+        let rms = f32::from_bits(shared_rms.load(Ordering::Relaxed));
+        assert!(rms < 1e-6, "expected near-zero RMS for silence, got {rms}");
+    }
+
+    #[test]
+    fn loud_signal_gives_nonzero_rms() {
+        let shared_rms = Arc::new(AtomicU32::new(0));
+        let shared_fft = Arc::new(ArcSwap::from_pointee(vec![0.0f32; NUM_BANDS]));
+        let samples = vec![16000i16; FFT_SIZE * 4];
+        let source = make_source(samples);
+        let mut analysis = AnalysisSource::new(source, shared_rms.clone(), shared_fft);
+        for _ in 0..FFT_SIZE * 4 {
+            analysis.next();
+        }
+        let rms = f32::from_bits(shared_rms.load(Ordering::Relaxed));
+        assert!(rms > 0.1, "expected nonzero RMS for loud signal, got {rms}");
+    }
+
+    #[test]
+    fn fft_runs_after_enough_samples_and_produces_nonzero_bands() {
+        let shared_rms = Arc::new(AtomicU32::new(0));
+        let shared_fft = Arc::new(ArcSwap::from_pointee(vec![0.0f32; NUM_BANDS]));
+
+        // Generate a 1 kHz sine wave.
+        let sample_rate = 44100u32;
+        let frequency = 1000.0f32;
+        let omega = 2.0 * std::f32::consts::PI * frequency / sample_rate as f32;
+        let samples: Vec<i16> =
+            (0..FFT_SIZE * 2).map(|i| ((omega * i as f32).sin() * 16000.0) as i16).collect();
+
+        let source =
+            TestSource { samples: samples.into_iter(), sample_rate, channels: 1 };
+        let mut analysis =
+            AnalysisSource::new(source, shared_rms, shared_fft.clone());
+        for _ in 0..FFT_SIZE * 2 {
+            analysis.next();
+        }
+
+        let bands = shared_fft.load();
+        let max_band = bands.iter().cloned().fold(0.0f32, f32::max);
+        assert!(max_band > 0.1, "expected nonzero FFT output for 1 kHz tone, max band was {max_band}");
+    }
+
+    #[test]
+    fn band_bins_cover_audible_range() {
+        let bins = compute_band_bins(44100);
+        assert_eq!(bins.len(), NUM_BANDS);
+        // First band must start at a bin > 0 (DC component excluded).
+        assert!(bins[0].0 >= 1);
+        // Last band must not exceed Nyquist.
+        assert!(bins[NUM_BANDS - 1].1 <= FFT_SIZE / 2);
+        // Bins should be monotonically non-decreasing.
+        for i in 1..NUM_BANDS {
+            assert!(bins[i].0 >= bins[i - 1].0);
+        }
+    }
+}
diff --git a/src-tauri/src/audio/engine.rs b/src-tauri/src/audio/engine.rs
index 97e67f8..85088e9 100644
--- a/src-tauri/src/audio/engine.rs
+++ b/src-tauri/src/audio/engine.rs
@@ -1,3 +1,4 @@
+use std::sync::atomic::{AtomicBool, AtomicU32, Ordering};
 use std::sync::mpsc::{Receiver, RecvTimeoutError};
 use std::sync::Arc;
 use std::time::{Duration, SystemTime, UNIX_EPOCH};
@@ -7,16 +8,25 @@ use rodio::{OutputStream, OutputStreamHandle, Sink};
 use souvlaki::{MediaMetadata, MediaPlayback, MediaPosition};
 use tauri::{AppHandle, Emitter};
 
+use super::analysis::NUM_BANDS;
 use super::decode::FileSource;
 use super::eq::{EqGains, EQ_BAND_COUNT};
-use super::{EqualizerSource, PlaybackSnapshot, PlaybackState, PlayerCommand, Queue, TrackInfo};
+use super::{AnalysisSource, EqualizerSource, PlaybackSnapshot, PlaybackState, PlayerCommand, Queue, TrackInfo};
 use crate::db::queries::{settings, stats, tracks};
 use crate::mpris::Mpris;
 use crate::state::DbPool;
 
 const PROGRESS_EVENT: &str = "playback-progress";
-const TICK: Duration = Duration::from_millis(250);
-const SESSION_CHECKPOINT_TICKS: u64 = 40;
+const VISUALIZER_EVENT: &str = "visualizer-data";
+
+// Tick at 20 Hz so visualizer data is smooth.
+const TICK: Duration = Duration::from_millis(50);
+
+// Only emit the full playback-progress snapshot every 5 ticks (= 250ms, same as before).
+const PROGRESS_EMIT_TICKS: u64 = 5;
+
+// Checkpoint session state every 200 ticks (= 10 seconds, same as before).
+const SESSION_CHECKPOINT_TICKS: u64 = 200;
 
 const SETTING_VOLUME: &str = "volume";
 const SETTING_LAST_QUEUE: &str = "last_queue";
@@ -32,6 +42,9 @@ struct EngineState {
     last_sink_len: usize,
     volume: f32,
     eq: Arc<ArcSwap<EqGains>>,
+    rms: Arc<AtomicU32>,
+    fft_bands: Arc<ArcSwap<Vec<f32>>>,
+    visualizer_enabled: Arc<AtomicBool>,
     db: DbPool,
     tick_count: u64,
 }
@@ -43,6 +56,9 @@ pub(super) fn run_engine(
     mpris: Arc<Mpris>,
     db: DbPool,
     eq: Arc<ArcSwap<EqGains>>,
+    rms: Arc<AtomicU32>,
+    fft_bands: Arc<ArcSwap<Vec<f32>>>,
+    visualizer_enabled: Arc<AtomicBool>,
 ) {
     let (_stream, handle) = match OutputStream::try_default() {
         Ok(v) => v,
@@ -59,6 +75,9 @@ pub(super) fn run_engine(
         last_sink_len: 0,
         volume: 1.0,
         eq,
+        rms,
+        fft_bands,
+        visualizer_enabled,
         db,
         tick_count: 0,
     };
@@ -82,7 +101,15 @@ pub(super) fn run_engine(
 
         let snap = build_snapshot(&state);
         snapshot.store(Arc::new(snap.clone()));
-        let _ = app.emit(PROGRESS_EVENT, snap);
+
+        if state.tick_count % PROGRESS_EMIT_TICKS == 0 {
+            let _ = app.emit(PROGRESS_EVENT, snap);
+        }
+
+        if state.visualizer_enabled.load(Ordering::Relaxed) {
+            let bands = (**state.fft_bands.load()).clone();
+            let _ = app.emit(VISUALIZER_EVENT, bands);
+        }
     }
 }
 
@@ -118,7 +145,7 @@ fn poll_queue_advance(state: &mut EngineState, mpris: &Mpris) {
         if let Some(queue) = &state.queue {
             announce_current(queue, mpris, true);
             if let Some(next) = queue.peek_next() {
-                append_track(sink, next, state.eq.clone());
+                append_track(sink, next, state.eq.clone(), state.rms.clone(), state.fft_bands.clone());
             }
         }
         state.last_sink_len = sink.len();
@@ -175,6 +202,8 @@ fn handle_command(state: &mut EngineState, cmd: PlayerCommand, mpris: &Mpris) {
             state.sink = None;
             state.queue = None;
             state.last_sink_len = 0;
+            state.rms.store(0.0f32.to_bits(), Ordering::Relaxed);
+            state.fft_bands.store(Arc::new(vec![0.0f32; NUM_BANDS]));
             mpris.set_playback(MediaPlayback::Stopped);
             clear_session(state);
         }
@@ -241,11 +270,11 @@ fn start_playback_from_queue(
     {
         let Some(queue) = &state.queue else { return };
         let Some(current) = queue.current() else { return };
-        if !append_track(&sink, current, state.eq.clone()) {
+        if !append_track(&sink, current, state.eq.clone(), state.rms.clone(), state.fft_bands.clone()) {
             return;
         }
         if let Some(next) = queue.peek_next() {
-            append_track(&sink, next, state.eq.clone());
+            append_track(&sink, next, state.eq.clone(), state.rms.clone(), state.fft_bands.clone());
         }
         if autoplay {
             sink.play();
@@ -262,10 +291,16 @@ fn start_playback_from_queue(
     state.sink = Some(sink);
 }
 
-fn append_track(sink: &Sink, track: &TrackInfo, eq: Arc<ArcSwap<EqGains>>) -> bool {
+fn append_track(
+    sink: &Sink,
+    track: &TrackInfo,
+    eq: Arc<ArcSwap<EqGains>>,
+    rms: Arc<AtomicU32>,
+    fft_bands: Arc<ArcSwap<Vec<f32>>>,
+) -> bool {
     match FileSource::open(&track.path) {
         Ok(source) => {
-            sink.append(EqualizerSource::new(source, eq));
+            sink.append(AnalysisSource::new(EqualizerSource::new(source, eq), rms, fft_bands));
             true
         }
         Err(e) => {
@@ -417,6 +452,7 @@ fn build_snapshot(state: &EngineState) -> PlaybackSnapshot {
         Some(_) => PlaybackState::Playing,
     };
     let current = state.queue.as_ref().and_then(|q| q.current());
+    let rms_amplitude = f32::from_bits(state.rms.load(Ordering::Relaxed));
     PlaybackSnapshot {
         state: playback_state,
         track_id: current.map(|t| t.track_id),
@@ -428,5 +464,6 @@ fn build_snapshot(state: &EngineState) -> PlaybackSnapshot {
         album: current.map(|t| t.album.clone()),
         album_id: current.and_then(|t| t.album_id),
         art_path: current.and_then(|t| t.art_path.clone()),
+        rms_amplitude,
     }
 }
diff --git a/src-tauri/src/audio/mod.rs b/src-tauri/src/audio/mod.rs
index 0b79c9c..f9f406e 100644
--- a/src-tauri/src/audio/mod.rs
+++ b/src-tauri/src/audio/mod.rs
@@ -1,12 +1,16 @@
+mod analysis;
 mod decode;
 mod engine;
 pub mod eq;
 mod queue;
+mod rms;
 
+pub use analysis::{AnalysisSource, NUM_BANDS};
 pub use eq::{EqGains, EqualizerSource, EQ_BAND_COUNT};
 pub use queue::Queue;
 
 use std::path::PathBuf;
+use std::sync::atomic::{AtomicBool, AtomicU32};
 use std::sync::mpsc::{channel, Receiver, Sender};
 use std::sync::Arc;
 use std::thread;
@@ -39,6 +43,7 @@ pub struct PlaybackSnapshot {
     pub album: Option<String>,
     pub album_id: Option<i64>,
     pub art_path: Option<String>,
+    pub rms_amplitude: f32,
 }
 
 impl Default for PlaybackSnapshot {
@@ -54,6 +59,7 @@ impl Default for PlaybackSnapshot {
             album: None,
             album_id: None,
             art_path: None,
+            rms_amplitude: 0.0,
         }
     }
 }
@@ -86,6 +92,7 @@ pub struct PlayerHandle {
     tx: Sender<PlayerCommand>,
     snapshot: Arc<ArcSwap<PlaybackSnapshot>>,
     eq: Arc<ArcSwap<EqGains>>,
+    pub visualizer_enabled: Arc<AtomicBool>,
 }
 
 impl PlayerHandle {
@@ -100,6 +107,14 @@ impl PlayerHandle {
     pub fn eq_state(&self) -> Arc<EqGains> {
         self.eq.load_full()
     }
+
+    pub fn enable_visualizer(&self) {
+        self.visualizer_enabled.store(true, std::sync::atomic::Ordering::Relaxed);
+    }
+
+    pub fn disable_visualizer(&self) {
+        self.visualizer_enabled.store(false, std::sync::atomic::Ordering::Relaxed);
+    }
 }
 
 /// Two-step construction resolves the circular dependency between the
@@ -112,6 +127,9 @@ pub struct EngineBuilder {
     rx: Receiver<PlayerCommand>,
     snapshot: Arc<ArcSwap<PlaybackSnapshot>>,
     eq: Arc<ArcSwap<EqGains>>,
+    rms: Arc<AtomicU32>,
+    fft_bands: Arc<ArcSwap<Vec<f32>>>,
+    visualizer_enabled: Arc<AtomicBool>,
 }
 
 impl EngineBuilder {
@@ -119,7 +137,10 @@ impl EngineBuilder {
         let (tx, rx) = channel();
         let snapshot = Arc::new(ArcSwap::from_pointee(PlaybackSnapshot::default()));
         let eq = Arc::new(ArcSwap::from_pointee(EqGains::default()));
-        Self { tx, rx, snapshot, eq }
+        let rms = Arc::new(AtomicU32::new(0.0f32.to_bits()));
+        let fft_bands = Arc::new(ArcSwap::from_pointee(vec![0.0f32; NUM_BANDS]));
+        let visualizer_enabled = Arc::new(AtomicBool::new(false));
+        Self { tx, rx, snapshot, eq, rms, fft_bands, visualizer_enabled }
     }
 
     pub fn handle(&self) -> PlayerHandle {
@@ -127,12 +148,23 @@ impl EngineBuilder {
             tx: self.tx.clone(),
             snapshot: self.snapshot.clone(),
             eq: self.eq.clone(),
+            visualizer_enabled: self.visualizer_enabled.clone(),
         }
     }
 
     pub fn spawn(self, app: AppHandle, mpris: Arc<Mpris>, db: DbPool) {
         thread::spawn(move || {
-            engine::run_engine(self.rx, self.snapshot, app, mpris, db, self.eq)
+            engine::run_engine(
+                self.rx,
+                self.snapshot,
+                app,
+                mpris,
+                db,
+                self.eq,
+                self.rms,
+                self.fft_bands,
+                self.visualizer_enabled,
+            )
         });
     }
 }
diff --git a/src-tauri/src/audio/rms.rs b/src-tauri/src/audio/rms.rs
new file mode 100644
index 0000000..186d1c8
--- /dev/null
+++ b/src-tauri/src/audio/rms.rs
@@ -0,0 +1,148 @@
+use std::sync::atomic::{AtomicU32, Ordering};
+use std::sync::Arc;
+use std::time::Duration;
+
+use rodio::source::SeekError;
+use rodio::Source;
+
+/// Wraps any `Source<Item = i16>`, maintains an exponential moving average of
+/// signal amplitude, and writes the current RMS to a shared atomic so the
+/// audio engine can include it in playback snapshots without owning the source.
+///
+/// Time constant is fixed at 100ms (relative to the source's sample rate),
+/// which produces a value that tracks the recent loudness of a passage rather
+/// than individual transients.
+pub struct RmsSource<S: Source<Item = i16>> {
+    inner: S,
+    ema_squared: f32,
+    alpha: f32,
+    shared: Arc<AtomicU32>,
+}
+
+impl<S: Source<Item = i16>> RmsSource<S> {
+    pub fn new(inner: S, shared: Arc<AtomicU32>) -> Self {
+        let sample_rate = inner.sample_rate();
+        let alpha = 1.0 / (sample_rate as f32 * 0.1);
+        Self { inner, ema_squared: 0.0, alpha, shared }
+    }
+}
+
+impl<S: Source<Item = i16>> Iterator for RmsSource<S> {
+    type Item = i16;
+
+    fn next(&mut self) -> Option<i16> {
+        let sample = self.inner.next()?;
+        let normalized = sample as f32 / 32768.0;
+        self.ema_squared =
+            self.ema_squared * (1.0 - self.alpha) + normalized * normalized * self.alpha;
+        let rms = self.ema_squared.sqrt();
+        self.shared.store(rms.to_bits(), Ordering::Relaxed);
+        Some(sample)
+    }
+}
+
+impl<S: Source<Item = i16>> Source for RmsSource<S> {
+    fn current_frame_len(&self) -> Option<usize> {
+        self.inner.current_frame_len()
+    }
+
+    fn channels(&self) -> u16 {
+        self.inner.channels()
+    }
+
+    fn sample_rate(&self) -> u32 {
+        self.inner.sample_rate()
+    }
+
+    fn total_duration(&self) -> Option<Duration> {
+        self.inner.total_duration()
+    }
+
+    fn try_seek(&mut self, pos: Duration) -> Result<(), SeekError> {
+        let result = self.inner.try_seek(pos);
+        if result.is_ok() {
+            self.ema_squared = 0.0;
+            self.shared.store(0.0f32.to_bits(), Ordering::Relaxed);
+        }
+        result
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::sync::Arc;
+
+    struct TestSource {
+        samples: std::vec::IntoIter<i16>,
+        sample_rate: u32,
+    }
+
+    impl Iterator for TestSource {
+        type Item = i16;
+        fn next(&mut self) -> Option<i16> {
+            self.samples.next()
+        }
+    }
+
+    impl Source for TestSource {
+        fn current_frame_len(&self) -> Option<usize> {
+            None
+        }
+        fn channels(&self) -> u16 {
+            1
+        }
+        fn sample_rate(&self) -> u32 {
+            self.sample_rate
+        }
+        fn total_duration(&self) -> Option<Duration> {
+            None
+        }
+    }
+
+    #[test]
+    fn silence_produces_zero_rms() {
+        let shared = Arc::new(AtomicU32::new(0));
+        let source = TestSource { samples: vec![0i16; 100].into_iter(), sample_rate: 44100 };
+        let mut rms_source = RmsSource::new(source, shared.clone());
+        for _ in 0..100 {
+            rms_source.next();
+        }
+        let rms = f32::from_bits(shared.load(Ordering::Relaxed));
+        assert!(rms < 1e-6, "expected RMS near zero for silence, got {rms}");
+    }
+
+    #[test]
+    fn loud_signal_produces_nonzero_rms() {
+        let shared = Arc::new(AtomicU32::new(0));
+        let samples: Vec<i16> = (0..44100).map(|_| 16000i16).collect();
+        let source = TestSource { samples: samples.into_iter(), sample_rate: 44100 };
+        let mut rms_source = RmsSource::new(source, shared.clone());
+        for _ in 0..44100 {
+            rms_source.next();
+        }
+        let rms = f32::from_bits(shared.load(Ordering::Relaxed));
+        assert!(rms > 0.1, "expected nonzero RMS for loud signal, got {rms}");
+    }
+
+    #[test]
+    fn seek_resets_ema_to_zero() {
+        let shared = Arc::new(AtomicU32::new(0));
+        let samples: Vec<i16> = (0..44100).map(|_| 16000i16).collect();
+        let source = TestSource { samples: samples.into_iter(), sample_rate: 44100 };
+        let mut rms_source = RmsSource::new(source, shared.clone());
+        for _ in 0..44100 {
+            rms_source.next();
+        }
+        assert!(f32::from_bits(shared.load(Ordering::Relaxed)) > 0.0);
+
+        // Seeking on a TestSource always fails (not seekable), but the RMS
+        // wrapper should still reset on a successful seek. We verify the
+        // reset path by temporarily trusting the contract: when try_seek
+        // would return Ok, the shared value is zeroed. Since TestSource
+        // returns Err, the value should be unchanged here.
+        let _ = rms_source.try_seek(Duration::ZERO);
+        // Value should be unchanged because the inner seek failed.
+        assert!(f32::from_bits(shared.load(Ordering::Relaxed)) > 0.0);
+    }
+}
diff --git a/src-tauri/src/commands/playback.rs b/src-tauri/src/commands/playback.rs
index 0ba9722..99e1fca 100644
--- a/src-tauri/src/commands/playback.rs
+++ b/src-tauri/src/commands/playback.rs
@@ -131,3 +131,13 @@ pub fn playback_get_eq(state: State<AppState>) -> EqSnapshot {
     let eq = state.player.eq_state();
     EqSnapshot { gains_db: eq.gains_db.to_vec(), enabled: eq.enabled }
 }
+
+#[tauri::command]
+pub fn playback_enable_visualizer(state: State<AppState>) {
+    state.player.enable_visualizer();
+}
+
+#[tauri::command]
+pub fn playback_disable_visualizer(state: State<AppState>) {
+    state.player.disable_visualizer();
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index ef2fcdc..9e32c0c 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -98,6 +98,8 @@ pub fn run() {
             commands::playback::playback_get_snapshot,
             commands::playback::playback_set_eq,
             commands::playback::playback_get_eq,
+            commands::playback::playback_enable_visualizer,
+            commands::playback::playback_disable_visualizer,
             commands::device::device_get_status,
             commands::device::device_find_music_folders,
             commands::device::device_save_music_subfolder,
diff --git a/src/lib/api/commands.ts b/src/lib/api/commands.ts
index bcd1e02..10cdb28 100644
--- a/src/lib/api/commands.ts
+++ b/src/lib/api/commands.ts
@@ -33,6 +33,8 @@ export const commands = {
   playbackSetEq: (gainsDb: number[], enabled: boolean) =>
     invoke<void>("playback_set_eq", { gainsDb, enabled }),
   playbackGetEq: () => invoke<{ gains_db: number[]; enabled: boolean }>("playback_get_eq"),
+  playbackEnableVisualizer: () => invoke<void>("playback_enable_visualizer"),
+  playbackDisableVisualizer: () => invoke<void>("playback_disable_visualizer"),
 
   syncConfigure: (dbUrl: string, token: string) =>
     invoke<void>("sync_configure", { dbUrl, token }),
diff --git a/src/lib/api/events.ts b/src/lib/api/events.ts
index c27f0fe..b016178 100644
--- a/src/lib/api/events.ts
+++ b/src/lib/api/events.ts
@@ -23,3 +23,6 @@ export const onDeviceSyncStarted = (cb: () => void) =>
 
 export const onDeviceSyncEnded = (cb: () => void) =>
   listen("device-sync-ended", () => cb());
+
+export const onVisualizerData = (cb: (bands: number[]) => void) =>
+  listen<number[]>("visualizer-data", (event) => cb(event.payload));
diff --git a/src/lib/components/visualizer/VisualizerPanel.svelte b/src/lib/components/visualizer/VisualizerPanel.svelte
new file mode 100644
index 0000000..2c5f1e0
--- /dev/null
+++ b/src/lib/components/visualizer/VisualizerPanel.svelte
@@ -0,0 +1,270 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
+  import { convertFileSrc } from "@tauri-apps/api/core";
+  import { X } from "@lucide/svelte";
+  import { commands } from "$lib/api/commands";
+  import { onVisualizerData } from "$lib/api/events";
+  import { player } from "$lib/stores/player.svelte";
+
+  const TRANSITION_DURATION_MILLISECONDS = 200;
+  const NUM_BANDS = 64;
+
+  let { onclose }: { onclose: () => void } = $props();
+
+  let canvas: HTMLCanvasElement | undefined = $state();
+
+  // Current smoothed bands used by the rAF loop, interpolating toward target.
+  let currentBands = new Float32Array(NUM_BANDS);
+  let targetBands = new Float32Array(NUM_BANDS);
+  let animationFrameId = 0;
+  let accentColor = '#818cf8';
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") onclose();
+  }
+
+  function drawFrame() {
+    animationFrameId = requestAnimationFrame(drawFrame);
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const width = canvas.width;
+    const height = canvas.height;
+    const cx = width / 2;
+    const cy = height / 2;
+
+    // Art geometry — must match the CSS formula.
+    const artSize = Math.min(width * 0.45, height * 0.45, 480);
+    const innerRadius = artSize / 2 + 4;
+    // Cap to the actual space between innerRadius and the canvas edge so bars
+    // never overflow the canvas boundary (the panel clips with overflow:hidden).
+    const availableRadius = Math.min(width, height) / 2 - innerRadius;
+    const maxBarHeight = availableRadius * 0.88;
+
+    ctx.clearRect(0, 0, width, height);
+
+    // Interpolate current bands toward target (smooth decay between FFT frames).
+    for (let i = 0; i < NUM_BANDS; i++) {
+      currentBands[i] = currentBands[i] * 0.72 + targetBands[i] * 0.28;
+    }
+
+    const angleStep = (Math.PI * 2) / NUM_BANDS;
+
+    // Glow pass: draw wider, fully transparent bars first for bloom effect.
+    ctx.shadowBlur = 18;
+    ctx.shadowColor = accentColor + '80';
+
+    const gradient = ctx.createRadialGradient(cx, cy, innerRadius, cx, cy, innerRadius + maxBarHeight);
+    gradient.addColorStop(0, accentColor + '55');
+    gradient.addColorStop(0.5, accentColor + 'bb');
+    gradient.addColorStop(1, accentColor + 'ff');
+    ctx.fillStyle = gradient;
+
+    for (let i = 0; i < NUM_BANDS; i++) {
+      const magnitude = currentBands[i];
+      if (magnitude < 0.002) continue;
+
+      const barLength = magnitude * maxBarHeight;
+      // Start at 12 o'clock, rotate clockwise.
+      const midAngle = i * angleStep - Math.PI / 2;
+      const halfGap = angleStep * 0.08;
+      const startAngle = midAngle - angleStep / 2 + halfGap;
+      const endAngle = midAngle + angleStep / 2 - halfGap;
+
+      ctx.beginPath();
+      ctx.arc(cx, cy, innerRadius, startAngle, endAngle);
+      ctx.arc(cx, cy, innerRadius + barLength, endAngle, startAngle, true);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+
+  onMount(() => {
+    accentColor = getComputedStyle(document.documentElement)
+      .getPropertyValue('--accent')
+      .trim();
+
+    commands.playbackEnableVisualizer();
+
+    const unsubscribe = onVisualizerData((bands) => {
+      for (let i = 0; i < NUM_BANDS; i++) {
+        targetBands[i] = bands[i] ?? 0;
+      }
+    });
+
+    animationFrameId = requestAnimationFrame(drawFrame);
+
+    // Sync canvas size to its CSS size.
+    const observer = new ResizeObserver(() => {
+      if (!canvas) return;
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
+    });
+    if (canvas) {
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
+      observer.observe(canvas);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+
+  onDestroy(() => {
+    cancelAnimationFrame(animationFrameId);
+    commands.playbackDisableVisualizer();
+  });
+
+  const artPlaying = $derived(player.snapshot.state === 'playing');
+  const artOpacity = $derived(artPlaying ? 0.28 : 1.0);
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+  class="visualizer"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Visualizer"
+  transition:fade={{ duration: TRANSITION_DURATION_MILLISECONDS }}
+>
+  {#if player.snapshot.art_path}
+    <div
+      class="background-art"
+      style:background-image="url({convertFileSrc(player.snapshot.art_path)})"
+    ></div>
+  {:else}
+    <div class="background-gradient"></div>
+  {/if}
+  <div class="scrim"></div>
+
+  <button class="close-button" onclick={onclose} aria-label="Close visualizer">
+    <X size={20} />
+  </button>
+
+  <div class="content">
+    <div class="art-and-canvas">
+      <canvas bind:this={canvas} class="canvas" aria-hidden="true"></canvas>
+
+      <div class="art-wrapper" class:playing={artPlaying} style:opacity={artOpacity}>
+        {#if player.snapshot.art_path}
+          <img
+            class="art"
+            src={convertFileSrc(player.snapshot.art_path)}
+            alt={player.snapshot.album ?? ""}
+          />
+        {:else}
+          <div class="art art-placeholder"></div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .visualizer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: var(--transport-height);
+    z-index: 100;
+    overflow: hidden;
+  }
+
+  .background-art {
+    position: absolute;
+    inset: -40px;
+    background-size: cover;
+    background-position: center;
+    filter: blur(40px);
+    transform: scale(1.1);
+  }
+
+  .background-gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, var(--bg-base), var(--bg-elevated));
+  }
+
+  .scrim {
+    position: absolute;
+    inset: 0;
+    background: var(--scrim-heavy);
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0.75em;
+    right: 0.75em;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: var(--radius);
+    color: var(--on-scrim);
+    cursor: pointer;
+  }
+
+  .close-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .content {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Square container that matches the art/canvas sizing formula. */
+  .art-and-canvas {
+    position: relative;
+    width: min(45vw, 45vh, 480px);
+    height: min(45vw, 45vh, 480px);
+  }
+
+  .canvas {
+    position: absolute;
+    /* Canvas extends beyond the art-and-canvas bounds so bars can overflow. */
+    inset: calc(-1 * min(28vw, 28vh, 300px));
+    width: calc(100% + 2 * min(28vw, 28vh, 300px));
+    height: calc(100% + 2 * min(28vw, 28vh, 300px));
+  }
+
+  .art-wrapper {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: opacity 1.5s ease, border-radius 0.5s ease;
+    z-index: 1;
+  }
+
+  .art-wrapper.playing {
+    border-radius: 50%;
+  }
+
+  .art {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .art-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
+  }
+
+</style>
diff --git a/src/lib/stores/player.svelte.ts b/src/lib/stores/player.svelte.ts
index bbf41e4..d3facf1 100644
--- a/src/lib/stores/player.svelte.ts
+++ b/src/lib/stores/player.svelte.ts
@@ -14,6 +14,7 @@ function createPlayerStore() {
     album: null,
     album_id: null,
     art_path: null,
+    rms_amplitude: 0,
   });
 
   let eqGains = $state<number[]>(new Array(8).fill(0));
diff --git a/src/lib/stores/ui.svelte.ts b/src/lib/stores/ui.svelte.ts
index 00c19d9..267d122 100644
--- a/src/lib/stores/ui.svelte.ts
+++ b/src/lib/stores/ui.svelte.ts
@@ -3,6 +3,7 @@ export type AlbumSort = 'date_added' | 'artist_name' | 'album_name';
 function createUiStore() {
   let showSettings = $state(false);
   let showDeviceSync = $state(false);
+  let showVisualizer = $state(false);
   let albumSort = $state<AlbumSort>('date_added');
   let nowPlayingDrawerOpen = $state(false);
 
@@ -13,6 +14,9 @@ function createUiStore() {
     get showDeviceSync() {
       return showDeviceSync;
     },
+    get showVisualizer() {
+      return showVisualizer;
+    },
     get albumSort() {
       return albumSort;
     },
@@ -35,6 +39,12 @@ function createUiStore() {
     closeDeviceSync() {
       showDeviceSync = false;
     },
+    openVisualizer() {
+      showVisualizer = true;
+    },
+    closeVisualizer() {
+      showVisualizer = false;
+    },
     setAlbumSort(sort: AlbumSort) {
       albumSort = sort;
     },
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 8a44a06..51c0d71 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -11,6 +11,7 @@ export type PlaybackSnapshot = {
   album: string | null;
   album_id: number | null;
   art_path: string | null;
+  rms_amplitude: number;
 };
 
 export type ArtistRow = {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8775900..cecd479 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,13 +7,14 @@
   import "$lib/styles/theme.css";
   import { confirm } from "@tauri-apps/plugin-dialog";
   import { getCurrentWindow } from "@tauri-apps/api/window";
-  import { HardDrive, Settings } from "@lucide/svelte";
+  import { HardDrive, Settings, Waves } from "@lucide/svelte";
   import { untrack } from "svelte";
   import ArtistList from "$lib/components/sidebar/ArtistList.svelte";
   import TransportBar from "$lib/components/transport/TransportBar.svelte";
   import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
   import DeviceSyncPanel from "$lib/components/device/DeviceSyncPanel.svelte";
   import NowPlayingDrawer from "$lib/components/nowplaying/NowPlayingDrawer.svelte";
+  import VisualizerPanel from "$lib/components/visualizer/VisualizerPanel.svelte";
   import ThemeSwitcher from "$lib/components/theme/ThemeSwitcher.svelte";
   import Dropdown from "$lib/components/common/Dropdown.svelte";
   import { library } from "$lib/stores/library.svelte";
@@ -44,6 +45,12 @@
       return;
     }
 
+    if (event.key === "Escape" && ui.showVisualizer) {
+      event.preventDefault();
+      ui.closeVisualizer();
+      return;
+    }
+
     if (event.code !== "Space") return;
     const target = event.target;
     if (
@@ -135,6 +142,14 @@
             <HardDrive size={20} />
           </button>
         {/if}
+        <button
+          class="cog"
+          class:active={ui.showVisualizer}
+          onclick={() => (ui.showVisualizer ? ui.closeVisualizer() : ui.openVisualizer())}
+          aria-label="Visualizer"
+        >
+          <Waves size={20} />
+        </button>
         <ThemeSwitcher />
         <button
           class="cog"
@@ -159,6 +174,9 @@
   <footer class="transport-bar">
     <TransportBar />
   </footer>
+  {#if ui.showVisualizer}
+    <VisualizerPanel onclose={() => ui.closeVisualizer()} />
+  {/if}
   <NowPlayingDrawer />
 </div>
 

From b867126d0c40168ee520d064ed73e13374a092f9 Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Sat, 11 Jul 2026 22:02:31 -0700
Subject: [PATCH 2/3] feat(visualizer): add decay trails, frequency-mapped hue,
 and side vignette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace clearRect with an annulus-clipped decay fill so bars ghost out
  with a brief motion trail; the clip confines the fill to the bar ring so
  the center (behind the art) and canvas exterior stay transparent
- Parse the active theme's --accent hex into HSL and shift hue ±25° across
  band index for each bar, keeping saturation and lightness from the theme
  so every palette stays recognizable
- Switch the full-panel scrim from a uniform overlay to a horizontal gradient
  (darker at edges, lighter in center) so the blurred album art background
  glows through in the middle
- Fix event-listener leak: store and call the unlisten fn from onVisualizerData
  in onDestroy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../visualizer/VisualizerPanel.svelte         | 110 +++++++++++++-----
 1 file changed, 83 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/visualizer/VisualizerPanel.svelte b/src/lib/components/visualizer/VisualizerPanel.svelte
index 2c5f1e0..68f9082 100644
--- a/src/lib/components/visualizer/VisualizerPanel.svelte
+++ b/src/lib/components/visualizer/VisualizerPanel.svelte
@@ -9,25 +9,47 @@
 
   const TRANSITION_DURATION_MILLISECONDS = 200;
   const NUM_BANDS = 64;
+  // How far (in degrees) the hue drifts across the full band range.
+  // Low-frequency bands shift one way, high-frequency the other, but the
+  // total swing is narrow enough that every theme still reads as its own color.
+  const HUE_SPREAD_DEGREES = 50;
 
   let { onclose }: { onclose: () => void } = $props();
 
   let canvas: HTMLCanvasElement | undefined = $state();
 
-  // Current smoothed bands used by the rAF loop, interpolating toward target.
   let currentBands = new Float32Array(NUM_BANDS);
   let targetBands = new Float32Array(NUM_BANDS);
   let animationFrameId = 0;
-  let accentColor = '#818cf8';
+  // HSL components of the active theme's accent color, parsed once on mount.
+  let accentH = 0;
+  let accentS = 0;
+  let accentL = 0;
 
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === "Escape") onclose();
   }
 
+  function hexToHsl(hex: string): [number, number, number] {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min) return [0, 0, l * 100];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+    return [h * 360, s * 100, l * 100];
+  }
+
   function drawFrame() {
     animationFrameId = requestAnimationFrame(drawFrame);
     if (!canvas) return;
-
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
@@ -36,68 +58,95 @@
     const cx = width / 2;
     const cy = height / 2;
 
-    // Art geometry — must match the CSS formula.
     const artSize = Math.min(width * 0.45, height * 0.45, 480);
     const innerRadius = artSize / 2 + 4;
-    // Cap to the actual space between innerRadius and the canvas edge so bars
-    // never overflow the canvas boundary (the panel clips with overflow:hidden).
     const availableRadius = Math.min(width, height) / 2 - innerRadius;
     const maxBarHeight = availableRadius * 0.88;
 
-    ctx.clearRect(0, 0, width, height);
-
-    // Interpolate current bands toward target (smooth decay between FFT frames).
+    // Interpolate toward target bands for smooth motion between FFT frames.
     for (let i = 0; i < NUM_BANDS; i++) {
       currentBands[i] = currentBands[i] * 0.72 + targetBands[i] * 0.28;
     }
 
     const angleStep = (Math.PI * 2) / NUM_BANDS;
 
-    // Glow pass: draw wider, fully transparent bars first for bloom effect.
+    const outerClipRadius = innerRadius + maxBarHeight + 20;
+
+    // Decay trail confined to the bar ring (annulus) only: the inner circle is
+    // punched out with a CCW arc so winding is zero there, leaving the center
+    // and the area outside the bars fully transparent on the canvas.
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, outerClipRadius, 0, Math.PI * 2);
+    ctx.arc(cx, cy, innerRadius - 4, 0, Math.PI * 2, true);
+    ctx.clip();
+    ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
+    ctx.fillRect(0, 0, width, height);
+    ctx.restore();
+
+    // Bars clipped to the outer disc so the glow shadow doesn't bleed outside.
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, outerClipRadius, 0, Math.PI * 2);
+    ctx.clip();
     ctx.shadowBlur = 18;
-    ctx.shadowColor = accentColor + '80';
-
-    const gradient = ctx.createRadialGradient(cx, cy, innerRadius, cx, cy, innerRadius + maxBarHeight);
-    gradient.addColorStop(0, accentColor + '55');
-    gradient.addColorStop(0.5, accentColor + 'bb');
-    gradient.addColorStop(1, accentColor + 'ff');
-    ctx.fillStyle = gradient;
 
     for (let i = 0; i < NUM_BANDS; i++) {
       const magnitude = currentBands[i];
       if (magnitude < 0.002) continue;
 
       const barLength = magnitude * maxBarHeight;
-      // Start at 12 o'clock, rotate clockwise.
       const midAngle = i * angleStep - Math.PI / 2;
       const halfGap = angleStep * 0.08;
       const startAngle = midAngle - angleStep / 2 + halfGap;
       const endAngle = midAngle + angleStep / 2 - halfGap;
 
+      // Shift hue smoothly across the frequency range, keeping saturation and
+      // lightness from the theme accent so the color family stays recognizable.
+      const hueOffset = (i / (NUM_BANDS - 1) - 0.5) * HUE_SPREAD_DEGREES;
+      const barH = ((accentH + hueOffset) % 360 + 360) % 360;
+      const barLighter = Math.min(accentL + 15, 92);
+
+      ctx.shadowColor = `hsla(${barH}, ${accentS}%, ${accentL}%, 0.55)`;
+
+      const gradient = ctx.createRadialGradient(
+        cx, cy, innerRadius * 0.9,
+        cx, cy, innerRadius + barLength,
+      );
+      gradient.addColorStop(0, `hsla(${barH}, ${accentS}%, ${accentL}%, 0.45)`);
+      gradient.addColorStop(1, `hsla(${barH}, ${accentS}%, ${barLighter}%, 1.0)`);
+      ctx.fillStyle = gradient;
+
       ctx.beginPath();
       ctx.arc(cx, cy, innerRadius, startAngle, endAngle);
       ctx.arc(cx, cy, innerRadius + barLength, endAngle, startAngle, true);
       ctx.closePath();
       ctx.fill();
     }
+
+    ctx.restore();
   }
 
+  let unlistenVisualizer: (() => void) | undefined;
+
   onMount(() => {
-    accentColor = getComputedStyle(document.documentElement)
-      .getPropertyValue('--accent')
+    const hex = getComputedStyle(document.documentElement)
+      .getPropertyValue("--accent")
       .trim();
+    [accentH, accentS, accentL] = hexToHsl(hex);
 
     commands.playbackEnableVisualizer();
 
-    const unsubscribe = onVisualizerData((bands) => {
+    onVisualizerData((bands) => {
       for (let i = 0; i < NUM_BANDS; i++) {
         targetBands[i] = bands[i] ?? 0;
       }
+    }).then((fn) => {
+      unlistenVisualizer = fn;
     });
 
     animationFrameId = requestAnimationFrame(drawFrame);
 
-    // Sync canvas size to its CSS size.
     const observer = new ResizeObserver(() => {
       if (!canvas) return;
       canvas.width = canvas.clientWidth;
@@ -116,10 +165,11 @@
 
   onDestroy(() => {
     cancelAnimationFrame(animationFrameId);
+    unlistenVisualizer?.();
     commands.playbackDisableVisualizer();
   });
 
-  const artPlaying = $derived(player.snapshot.state === 'playing');
+  const artPlaying = $derived(player.snapshot.state === "playing");
   const artOpacity = $derived(artPlaying ? 0.28 : 1.0);
 </script>
 
@@ -194,7 +244,16 @@
   .scrim {
     position: absolute;
     inset: 0;
-    background: var(--scrim-heavy);
+    /* Uniform dark layer under the horizontal vignette. Kept lighter than the
+       default --scrim-heavy so the gradient above it reads visually. */
+    background: rgba(0, 0, 0, 0.55);
+    background: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.88) 0%,
+      rgba(0, 0, 0, 0.52) 28%,
+      rgba(0, 0, 0, 0.52) 72%,
+      rgba(0, 0, 0, 0.88) 100%
+    );
   }
 
   .close-button {
@@ -226,7 +285,6 @@
     justify-content: center;
   }
 
-  /* Square container that matches the art/canvas sizing formula. */
   .art-and-canvas {
     position: relative;
     width: min(45vw, 45vh, 480px);
@@ -235,7 +293,6 @@
 
   .canvas {
     position: absolute;
-    /* Canvas extends beyond the art-and-canvas bounds so bars can overflow. */
     inset: calc(-1 * min(28vw, 28vh, 300px));
     width: calc(100% + 2 * min(28vw, 28vh, 300px));
     height: calc(100% + 2 * min(28vw, 28vh, 300px));
@@ -266,5 +323,4 @@
     height: 100%;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
   }
-
 </style>

From 4ca931c932c6b1c30ab9e18f0c24468a2e40e920 Mon Sep 17 00:00:00 2001
From: Luke Stebner <luke.stebner@gmail.com>
Date: Sun, 12 Jul 2026 09:09:16 -0700
Subject: [PATCH 3/3] feat(visualizer): add outline style with style selector
 and band filtering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add an "Outline" style that draws a smooth closed curve through the tip
  positions of the 64 bars using midpoint quadratic Bezier segments, giving
  a C1-continuous polar waveform with per-segment frequency-mapped hue
- Outline uses only bands 6–57 (~40Hz–10kHz) spread evenly around the full
  circle, skipping the sub-bass and ultra-high bands that are typically silent
  and caused a visible flat gap where the curve closed at 12 o'clock
- Outline decays at alpha 0.05 vs bars' 0.15 so ghost shapes accumulate into
  visible artifacts before clearing
- Add a Dropdown in the top-left corner to switch between Bars and Outline;
  Escape inside the dropdown closes the list without closing the visualizer
- Persist the selected style to localStorage (key: spudbox.visualizerStyle)
  so it survives closing and reopening the visualizer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../visualizer/VisualizerPanel.svelte         | 205 ++++++++++++++----
 1 file changed, 163 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/visualizer/VisualizerPanel.svelte b/src/lib/components/visualizer/VisualizerPanel.svelte
index 68f9082..d6e75a5 100644
--- a/src/lib/components/visualizer/VisualizerPanel.svelte
+++ b/src/lib/components/visualizer/VisualizerPanel.svelte
@@ -6,6 +6,7 @@
   import { commands } from "$lib/api/commands";
   import { onVisualizerData } from "$lib/api/events";
   import { player } from "$lib/stores/player.svelte";
+  import Dropdown from "$lib/components/common/Dropdown.svelte";
 
   const TRANSITION_DURATION_MILLISECONDS = 200;
   const NUM_BANDS = 64;
@@ -13,10 +14,31 @@
   // Low-frequency bands shift one way, high-frequency the other, but the
   // total swing is narrow enough that every theme still reads as its own color.
   const HUE_SPREAD_DEGREES = 50;
+  // Sub-bass (bands 0–5, ~20–40Hz) and ultra-highs (bands 58–63, ~12–20kHz)
+  // are nearly silent in most music and create a visible flat gap where the
+  // outline closes at 12 o'clock. The outline uses only this inner slice,
+  // spread evenly around the full circle so the shape stays round.
+  const OUTLINE_BAND_START = 6;
+  const OUTLINE_BAND_END = 57; // inclusive
+
+  type VisualizerStyle = "bars" | "outline";
+  const STYLE_OPTIONS: { value: VisualizerStyle; label: string }[] = [
+    { value: "bars", label: "Bars" },
+    { value: "outline", label: "Outline" },
+  ];
 
   let { onclose }: { onclose: () => void } = $props();
 
+  const STYLE_STORAGE_KEY = "spudbox.visualizerStyle";
+
   let canvas: HTMLCanvasElement | undefined = $state();
+  let visualizerStyle: VisualizerStyle = $state(
+    (localStorage.getItem(STYLE_STORAGE_KEY) as VisualizerStyle | null) ?? "bars",
+  );
+
+  $effect(() => {
+    localStorage.setItem(STYLE_STORAGE_KEY, visualizerStyle);
+  });
 
   let currentBands = new Float32Array(NUM_BANDS);
   let targetBands = new Float32Array(NUM_BANDS);
@@ -47,44 +69,15 @@
     return [h * 360, s * 100, l * 100];
   }
 
-  function drawFrame() {
-    animationFrameId = requestAnimationFrame(drawFrame);
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const width = canvas.width;
-    const height = canvas.height;
-    const cx = width / 2;
-    const cy = height / 2;
-
-    const artSize = Math.min(width * 0.45, height * 0.45, 480);
-    const innerRadius = artSize / 2 + 4;
-    const availableRadius = Math.min(width, height) / 2 - innerRadius;
-    const maxBarHeight = availableRadius * 0.88;
-
-    // Interpolate toward target bands for smooth motion between FFT frames.
-    for (let i = 0; i < NUM_BANDS; i++) {
-      currentBands[i] = currentBands[i] * 0.72 + targetBands[i] * 0.28;
-    }
-
-    const angleStep = (Math.PI * 2) / NUM_BANDS;
-
-    const outerClipRadius = innerRadius + maxBarHeight + 20;
-
-    // Decay trail confined to the bar ring (annulus) only: the inner circle is
-    // punched out with a CCW arc so winding is zero there, leaving the center
-    // and the area outside the bars fully transparent on the canvas.
-    ctx.save();
-    ctx.beginPath();
-    ctx.arc(cx, cy, outerClipRadius, 0, Math.PI * 2);
-    ctx.arc(cx, cy, innerRadius - 4, 0, Math.PI * 2, true);
-    ctx.clip();
-    ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
-    ctx.fillRect(0, 0, width, height);
-    ctx.restore();
-
-    // Bars clipped to the outer disc so the glow shadow doesn't bleed outside.
+  function drawBars(
+    ctx: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    innerRadius: number,
+    maxBarHeight: number,
+    angleStep: number,
+    outerClipRadius: number,
+  ) {
     ctx.save();
     ctx.beginPath();
     ctx.arc(cx, cy, outerClipRadius, 0, Math.PI * 2);
@@ -101,8 +94,6 @@
       const startAngle = midAngle - angleStep / 2 + halfGap;
       const endAngle = midAngle + angleStep / 2 - halfGap;
 
-      // Shift hue smoothly across the frequency range, keeping saturation and
-      // lightness from the theme accent so the color family stays recognizable.
       const hueOffset = (i / (NUM_BANDS - 1) - 0.5) * HUE_SPREAD_DEGREES;
       const barH = ((accentH + hueOffset) % 360 + 360) % 360;
       const barLighter = Math.min(accentL + 15, 92);
@@ -127,6 +118,114 @@
     ctx.restore();
   }
 
+  function drawOutline(
+    ctx: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    innerRadius: number,
+    maxBarHeight: number,
+    _angleStep: number,
+    outerClipRadius: number,
+  ) {
+    const bandCount = OUTLINE_BAND_END - OUTLINE_BAND_START + 1;
+
+    // Compute tip positions using only the musically active band slice.
+    // Angles are derived from position within the slice (not global band index)
+    // so the points are spread evenly around the full 360°.
+    const tipX = new Float32Array(bandCount);
+    const tipY = new Float32Array(bandCount);
+    for (let index = 0; index < bandCount; index++) {
+      const bandIndex = OUTLINE_BAND_START + index;
+      const radius = innerRadius + currentBands[bandIndex] * maxBarHeight;
+      const angle = (index / bandCount) * Math.PI * 2 - Math.PI / 2;
+      tipX[index] = cx + radius * Math.cos(angle);
+      tipY[index] = cy + radius * Math.sin(angle);
+    }
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, outerClipRadius, 0, Math.PI * 2);
+    ctx.clip();
+    ctx.lineWidth = 2.5;
+    ctx.lineCap = "round";
+    ctx.shadowBlur = 14;
+
+    // Draw each segment as a quadratic Bezier from the midpoint before this
+    // tip to the midpoint after it, using the tip itself as the control point.
+    // This gives a smooth C1-continuous closed curve through all tip points.
+    for (let index = 0; index < bandCount; index++) {
+      const previous = (index - 1 + bandCount) % bandCount;
+      const next = (index + 1) % bandCount;
+
+      const startX = (tipX[previous] + tipX[index]) / 2;
+      const startY = (tipY[previous] + tipY[index]) / 2;
+      const endX = (tipX[index] + tipX[next]) / 2;
+      const endY = (tipY[index] + tipY[next]) / 2;
+
+      // Keep hue relative to position in the full frequency range so the color
+      // meaning (low = one end, high = other) is preserved even with fewer bands.
+      const bandIndex = OUTLINE_BAND_START + index;
+      const hueOffset = (bandIndex / (NUM_BANDS - 1) - 0.5) * HUE_SPREAD_DEGREES;
+      const segH = ((accentH + hueOffset) % 360 + 360) % 360;
+      const segLighter = Math.min(accentL + 15, 92);
+
+      ctx.shadowColor = `hsla(${segH}, ${accentS}%, ${accentL}%, 0.7)`;
+      ctx.strokeStyle = `hsla(${segH}, ${accentS}%, ${segLighter}%, 0.95)`;
+
+      ctx.beginPath();
+      ctx.moveTo(startX, startY);
+      ctx.quadraticCurveTo(tipX[index], tipY[index], endX, endY);
+      ctx.stroke();
+    }
+
+    ctx.restore();
+  }
+
+  function drawFrame() {
+    animationFrameId = requestAnimationFrame(drawFrame);
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const width = canvas.width;
+    const height = canvas.height;
+    const cx = width / 2;
+    const cy = height / 2;
+
+    const artSize = Math.min(width * 0.45, height * 0.45, 480);
+    const innerRadius = artSize / 2 + 4;
+    const availableRadius = Math.min(width, height) / 2 - innerRadius;
+    const maxBarHeight = availableRadius * 0.88;
+
+    // Interpolate toward target bands for smooth motion between FFT frames.
+    for (let i = 0; i < NUM_BANDS; i++) {
+      currentBands[i] = currentBands[i] * 0.72 + targetBands[i] * 0.28;
+    }
+
+    const angleStep = (Math.PI * 2) / NUM_BANDS;
+    const outerClipRadius = innerRadius + maxBarHeight + 20;
+
+    // Decay trail confined to the bar ring (annulus) only: the inner circle is
+    // punched out with a CCW arc so winding is zero there, leaving the center
+    // and the area outside the bars fully transparent on the canvas.
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, outerClipRadius, 0, Math.PI * 2);
+    ctx.arc(cx, cy, innerRadius - 4, 0, Math.PI * 2, true);
+    ctx.clip();
+    // Outline trails more slowly so ghosts pile up into visible artifacts.
+    const decayAlpha = visualizerStyle === "outline" ? 0.05 : 0.15;
+    ctx.fillStyle = `rgba(0, 0, 0, ${decayAlpha})`;
+    ctx.fillRect(0, 0, width, height);
+    ctx.restore();
+
+    if (visualizerStyle === "bars") {
+      drawBars(ctx, cx, cy, innerRadius, maxBarHeight, angleStep, outerClipRadius);
+    } else {
+      drawOutline(ctx, cx, cy, innerRadius, maxBarHeight, angleStep, outerClipRadius);
+    }
+  }
+
   let unlistenVisualizer: (() => void) | undefined;
 
   onMount(() => {
@@ -192,6 +291,21 @@
   {/if}
   <div class="scrim"></div>
 
+  <!-- Stop Escape from bubbling past this control so it closes the dropdown
+       without also closing the visualizer. -->
+  <div
+    class="style-control"
+    role="none"
+    onkeydown={(event) => { if (event.key === "Escape") event.stopPropagation(); }}
+  >
+    <Dropdown
+      options={STYLE_OPTIONS}
+      value={visualizerStyle}
+      onChange={(style) => { visualizerStyle = style; }}
+      ariaLabel="Visualizer style"
+    />
+  </div>
+
   <button class="close-button" onclick={onclose} aria-label="Close visualizer">
     <X size={20} />
   </button>
@@ -244,8 +358,8 @@
   .scrim {
     position: absolute;
     inset: 0;
-    /* Uniform dark layer under the horizontal vignette. Kept lighter than the
-       default --scrim-heavy so the gradient above it reads visually. */
+    /* Horizontal gradient: darker at the edges so the blurred background art
+       glows through in the center while the sides fade to near-black. */
     background: rgba(0, 0, 0, 0.55);
     background: linear-gradient(
       to right,
@@ -256,6 +370,13 @@
     );
   }
 
+  .style-control {
+    position: absolute;
+    top: 0.75em;
+    left: 0.75em;
+    z-index: 1;
+  }
+
   .close-button {
     position: absolute;
     top: 0.75em;