Working on processors a tiny bit

src/App.svelte

@@ -5,15 +5,35 @@
   import WelcomeModal from "./lib/components/WelcomeModal.svelte";
   import ProcessorPopup from "./lib/components/ProcessorPopup.svelte";
   import { engines } from "./lib/audio/engines/registry";
-  import type { SynthEngine, PitchLock } from "./lib/audio/engines/base/SynthEngine";
+  import type {
+    SynthEngine,
+    PitchLock,
+  } from "./lib/audio/engines/base/SynthEngine";
   import type { EngineType } from "./lib/audio/engines/base/SynthEngine";
   import { AudioService } from "./lib/audio/services/AudioService";
   import { downloadWAV } from "./lib/audio/utils/WAVEncoder";
-  import { loadVolume, saveVolume, loadDuration, saveDuration, loadPitchLockEnabled, savePitchLockEnabled, loadPitchLockFrequency, savePitchLockFrequency, loadExpandedCategories, saveExpandedCategories } from "./lib/utils/settings";
+  import {
-  import { cropAudio, cutAudio, processSelection } from "./lib/audio/utils/AudioEdit";
+    loadVolume,
+    saveVolume,
+    loadDuration,
+    saveDuration,
+    loadPitchLockEnabled,
+    savePitchLockEnabled,
+    loadPitchLockFrequency,
+    savePitchLockFrequency,
+    loadExpandedCategories,
+    saveExpandedCategories,
+    loadEnabledProcessorCategories,
+    saveEnabledProcessorCategories,
+  } from "./lib/utils/settings";
+  import {
+    cropAudio,
+    cutAudio,
+    processSelection,
+  } from "./lib/audio/utils/AudioEdit";
   import { generateRandomColor } from "./lib/utils/colors";
   import { getRandomProcessor } from "./lib/audio/processors/registry";
-  import type { AudioProcessor } from "./lib/audio/processors/AudioProcessor";
+  import type { AudioProcessor, ProcessorCategory } from "./lib/audio/processors/AudioProcessor";
   import { Sample } from "./lib/audio/engines/Sample";
   import { Input } from "./lib/audio/engines/Input";
   import { createKeyboardHandler } from "./lib/utils/keyboard";
@@ -48,15 +68,25 @@
   let canUndo = $state(false);
   let sidebarOpen = $state(false);
   let expandedCategories = $state<Set<string>>(loadExpandedCategories());
+  let enabledProcessorCategories = $state<Set<ProcessorCategory>>(
+    loadEnabledProcessorCategories() as Set<ProcessorCategory>
+  );
 
-  const showDuration = $derived(engineType !== 'sample');
+  const showDuration = $derived(engineType !== "sample");
-  const showRandomButton = $derived(engineType === 'generative');
+  const showRandomButton = $derived(engineType === "generative");
-  const showRecordButton = $derived(engineType === 'input');
+  const showRecordButton = $derived(engineType === "input");
-  const showFileDropZone = $derived(engineType === 'sample' && !currentBuffer);
+  const showFileDropZone = $derived(engineType === "sample" && !currentBuffer);
-  const showMutateButton = $derived(engineType === 'generative' && !isProcessed && currentBuffer);
+  const showMutateButton = $derived(
-  const showPitchLock = $derived(engineType === 'generative');
+    engineType === "generative" && !isProcessed && currentBuffer,
-  const pitchLock = $derived<PitchLock>({ enabled: pitchLockEnabled, frequency: pitchLockFrequency });
+  );
-  const hasSelection = $derived(selectionStart !== null && selectionEnd !== null && currentBuffer !== null);
+  const showPitchLock = $derived(engineType === "generative");
+  const pitchLock = $derived<PitchLock>({
+    enabled: pitchLockEnabled,
+    frequency: pitchLockFrequency,
+  });
+  const hasSelection = $derived(
+    selectionStart !== null && selectionEnd !== null && currentBuffer !== null,
+  );
   const showEditButtons = $derived(hasSelection);
 
   $effect(() => {
@@ -80,6 +110,10 @@
     saveExpandedCategories(expandedCategories);
   });
 
+  $effect(() => {
+    saveEnabledProcessorCategories(enabledProcessorCategories as Set<string>);
+  });
+
   // Group engines by category
   const enginesByCategory = $derived.by(() => {
     const grouped = new Map<EngineCategory, typeof engines>();
@@ -103,6 +137,16 @@
     expandedCategories = newSet;
   }
 
+  function toggleProcessorCategory(category: ProcessorCategory) {
+    const newSet = new Set(enabledProcessorCategories);
+    if (newSet.has(category)) {
+      newSet.delete(category);
+    } else {
+      newSet.add(category);
+    }
+    enabledProcessorCategories = newSet;
+  }
+
   onMount(() => {
     audioService.setPlaybackUpdateCallback((position) => {
       playbackPosition = position;
@@ -116,7 +160,7 @@
       currentParams,
       isProcessed,
       waveformColor,
-      currentEngineIndex
+      currentEngineIndex,
     );
   }
 
@@ -129,7 +173,10 @@
   }
 
   function restoreState(state: AudioState): void {
-    currentBuffer = audioService.createAudioBuffer([state.leftChannel, state.rightChannel]);
+    currentBuffer = audioService.createAudioBuffer([
+      state.leftChannel,
+      state.rightChannel,
+    ]);
     currentParams = state.params;
     isProcessed = state.isProcessed;
     waveformColor = state.waveformColor;
@@ -219,7 +266,12 @@
     if (!currentParams) return;
 
     const sampleRate = audioService.getSampleRate();
-    const data = await engine.generate(currentParams, sampleRate, duration, pitchLock);
+    const data = await engine.generate(
+      currentParams,
+      sampleRate,
+      duration,
+      pitchLock,
+    );
     currentBuffer = audioService.createAudioBuffer(data);
     audioService.play(currentBuffer);
   }
@@ -264,15 +316,21 @@
         start,
         end,
         processor,
-        sampleRate
+        sampleRate,
       );
     } else {
       const leftChannel = currentBuffer.getChannelData(0);
       const rightChannel = currentBuffer.getChannelData(1);
-      [processedLeft, processedRight] = await processor.process(leftChannel, rightChannel);
+      [processedLeft, processedRight] = await processor.process(
+        leftChannel,
+        rightChannel,
+      );
     }
 
-    currentBuffer = audioService.createAudioBuffer([processedLeft, processedRight]);
+    currentBuffer = audioService.createAudioBuffer([
+      processedLeft,
+      processedRight,
+    ]);
     isProcessed = true;
     audioService.play(currentBuffer);
     hideProcessorPopup();
@@ -288,7 +346,7 @@
     clearSelection();
     sidebarOpen = false;
 
-    if (engineType === 'generative') {
+    if (engineType === "generative") {
       generateRandom();
     }
   }
@@ -311,7 +369,7 @@
       isProcessed = false;
       regenerateBuffer();
     } catch (error) {
-      console.error('Failed to load audio file:', error);
+      console.error("Failed to load audio file:", error);
       alert(`Failed to load audio file: ${error}`);
     }
   }
@@ -329,7 +387,7 @@
       isProcessed = false;
       regenerateBuffer();
     } catch (error) {
-      console.error('Failed to record audio:', error);
+      console.error("Failed to record audio:", error);
       alert(`Failed to record audio: ${error}`);
     } finally {
       isRecording = false;
@@ -344,8 +402,8 @@
     if (!files?.length) return;
 
     const file = files[0];
-    if (!file.type.startsWith('audio/')) {
+    if (!file.type.startsWith("audio/")) {
-      alert('Please drop an audio file');
+      alert("Please drop an audio file");
       return;
     }
 
@@ -365,12 +423,17 @@
   function showPopup() {
     if (popupTimeout) clearTimeout(popupTimeout);
     showProcessorPopup = true;
-    popupTimeout = setTimeout(() => showProcessorPopup = false, 2000);
+    popupTimeout = setTimeout(() => (showProcessorPopup = false), 2000);
+  }
+
+  function keepPopupOpen() {
+    if (popupTimeout) clearTimeout(popupTimeout);
+    showProcessorPopup = true;
   }
 
   function scheduleHidePopup() {
     if (popupTimeout) clearTimeout(popupTimeout);
-    popupTimeout = setTimeout(() => showProcessorPopup = false, 200);
+    popupTimeout = setTimeout(() => (showProcessorPopup = false), 200);
   }
 
   function hideProcessorPopup() {
@@ -389,7 +452,8 @@
   }
 
   function cropSelection() {
-    if (!currentBuffer || selectionStart === null || selectionEnd === null) return;
+    if (!currentBuffer || selectionStart === null || selectionEnd === null)
+      return;
 
     pushState();
 
@@ -397,7 +461,12 @@
     const end = Math.max(selectionStart, selectionEnd);
 
     const sampleRate = audioService.getSampleRate();
-    const [newLeft, newRight] = cropAudio(currentBuffer, start, end, sampleRate);
+    const [newLeft, newRight] = cropAudio(
+      currentBuffer,
+      start,
+      end,
+      sampleRate,
+    );
 
     currentBuffer = audioService.createAudioBuffer([newLeft, newRight]);
     clearSelection();
@@ -405,7 +474,8 @@
   }
 
   function cutSelection() {
-    if (!currentBuffer || selectionStart === null || selectionEnd === null) return;
+    if (!currentBuffer || selectionStart === null || selectionEnd === null)
+      return;
 
     pushState();
 
@@ -434,31 +504,54 @@
 
 <div class="container">
   {#if sidebarOpen}
-    <div class="sidebar-overlay" onclick={toggleSidebar} onkeydown={(e) => e.key === 'Escape' && toggleSidebar()} role="button" tabindex="-1" aria-label="Close sidebar"></div>
+    <div
+      class="sidebar-overlay"
+      onclick={toggleSidebar}
+      onkeydown={(e) => e.key === "Escape" && toggleSidebar()}
+      role="button"
+      tabindex="-1"
+      aria-label="Close sidebar"
+    ></div>
   {/if}
   <div class="top-bar">
-      <button class="hamburger" onclick={toggleSidebar} aria-label="Toggle engine menu">
+    <button
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      class="hamburger"
+      onclick={toggleSidebar}
+      aria-label="Toggle engine menu"
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
         <line x1="3" y1="6" x2="21" y2="6" />
         <line x1="3" y1="12" x2="21" y2="12" />
         <line x1="3" y1="18" x2="21" y2="18" />
       </svg>
     </button>
-      <h1 class="app-title">Poof: a sample generator</h1>
+    <h1 class="app-title">Poof: a sample generator and processor</h1>
     <div class="controls-group">
       {#if showPitchLock}
         <div class="control-item pitch-lock-control">
           <div class="control-header">
             <label for="pitch">Pitch</label>
-            <label class="custom-checkbox" title="Lock pitch across random/mutate">
+            <label
-              <input
+              class="custom-checkbox"
-                type="checkbox"
+              title="Lock pitch across random/mutate"
-                bind:checked={pitchLockEnabled}
+            >
-              />
+              <input type="checkbox" bind:checked={pitchLockEnabled} />
               <span class="checkbox-box" class:checked={pitchLockEnabled}>
                 {#if pitchLockEnabled}
                   <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-                    <path d="M1 5L4 8L9 2" stroke="currentColor" stroke-width="2" stroke-linecap="square"/>
+                    <path
+                      d="M1 5L4 8L9 2"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="square"
+                    />
                   </svg>
                 {/if}
               </span>
@@ -521,8 +614,19 @@
               class:collapsed={!expandedCategories.has(category)}
               onclick={() => toggleCategory(category)}
             >
-              <svg class="category-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
+              <svg
-                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
+                class="category-arrow"
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+              >
+                <path
+                  d="M3 4.5L6 7.5L9 4.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="square"
+                />
               </svg>
               <span>{category}</span>
             </button>
@@ -588,7 +692,7 @@
           {/if}
           {#if showRecordButton}
             <button onclick={recordAudio} disabled={isRecording}>
-            {isRecording ? 'Recording...' : 'Record'}
+              {isRecording ? "Recording..." : "Record"}
             </button>
           {/if}
           {#if showMutateButton}
@@ -607,7 +711,13 @@
             >
               <button onclick={processSound}>Process (P)</button>
               {#if showProcessorPopup}
-              <ProcessorPopup onselect={applyProcessor} />
+                <div onmouseenter={keepPopupOpen} onmouseleave={scheduleHidePopup}>
+                  <ProcessorPopup
+                    onselect={applyProcessor}
+                    enabledCategories={enabledProcessorCategories}
+                    ontogglecategory={toggleProcessorCategory}
+                  />
+                </div>
               {/if}
             </div>
             <button onclick={download}>Download (D)</button>
@@ -692,7 +802,9 @@
     border: 1px solid #3a3a3a;
     color: #fff;
     cursor: pointer;
-    transition: border-color 0.2s, background-color 0.2s;
+    transition:
+      border-color 0.2s,
+      background-color 0.2s;
   }
 
   .hamburger svg {
@@ -759,7 +871,9 @@
     color: #999;
     text-align: left;
     cursor: pointer;
-    transition: color 0.2s, background-color 0.2s;
+    transition:
+      color 0.2s,
+      background-color 0.2s;
     flex-shrink: 0;
   }
 
@@ -950,7 +1064,10 @@
     color: #fff;
     font-size: 0.7rem;
     font-weight: 600;
-    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition:
+      border-color 0.2s,
+      background-color 0.2s,
+      box-shadow 0.2s;
     font-variant-numeric: tabular-nums;
     box-sizing: border-box;
   }
@@ -981,7 +1098,6 @@
     font-weight: 400;
   }
 
-
   @media (min-width: 768px) {
     .sidebar {
       position: static;

src/lib/audio/processors/AudioProcessor.ts

@@ -1,6 +1,9 @@
+export type ProcessorCategory = 'Amplitude' | 'Filter' | 'Time' | 'Space' | 'Pitch' | 'Modulation' | 'Distortion' | 'Spectral' | 'Utility';
+
 export interface AudioProcessor {
   getName(): string;
   getDescription(): string;
+  getCategory(): ProcessorCategory;
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/BitCrusher.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class BitCrusher implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class BitCrusher implements AudioProcessor {
     return "Reduces bit depth for lo-fi digital distortion";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Distortion';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Chorus.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class Chorus implements AudioProcessor {
   private readonly sampleRate = 44100;
@@ -11,6 +11,10 @@ export class Chorus implements AudioProcessor {
     return 'Multiple delayed copies with pitch modulation for thick, ensemble sounds';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Time';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Compressor.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class Compressor implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class Compressor implements AudioProcessor {
     return "Reduces dynamic range by taming peaks with makeup gain";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Amplitude';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/ConvolutionReverb.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 type RoomType = 'small' | 'medium' | 'large' | 'hall' | 'plate' | 'chamber';
 
@@ -22,6 +22,10 @@ export class ConvolutionReverb implements AudioProcessor {
     return 'Realistic room ambience using Web Audio ConvolverNode with synthetic impulse responses';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Space';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/DCOffsetRemover.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class DCOffsetRemover implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class DCOffsetRemover implements AudioProcessor {
     return "Removes DC offset bias from the audio signal";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Utility';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/ExpFadeIn.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class ExpFadeIn implements AudioProcessor {
 	getName(): string {
@@ -9,6 +9,10 @@ export class ExpFadeIn implements AudioProcessor {
 		return 'Applies an exponential fade from silence to current level';
 	}
 
+	getCategory(): ProcessorCategory {
+		return 'Amplitude';
+	}
+
 	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
 		const length = leftIn.length;
 

src/lib/audio/processors/ExpFadeOut.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class ExpFadeOut implements AudioProcessor {
 	getName(): string {
@@ -9,6 +9,10 @@ export class ExpFadeOut implements AudioProcessor {
 		return 'Applies an exponential fade from current level to silence';
 	}
 
+	getCategory(): ProcessorCategory {
+		return 'Amplitude';
+	}
+
 	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
 		const length = leftIn.length;
 

src/lib/audio/processors/HaasEffect.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class HaasEffect implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class HaasEffect implements AudioProcessor {
     return "Creates stereo width with micro-delay (precedence effect)";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Space';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/HighPassSweepDown.ts

@@ -0,0 +1,65 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class HighPassSweepDown implements AudioProcessor {
+	getName(): string {
+		return 'HP Sweep Down';
+	}
+
+	getDescription(): string {
+		return 'Sweeps a high-pass filter from thin to full';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Filter';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const sampleRate = 44100;
+		const startFreq = 8000;
+		const endFreq = 20;
+		const Q = 1.5;
+
+		let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
+		let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
+
+		let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i % 64 === 0) {
+				const t = i / length;
+				const freq = startFreq * Math.pow(endFreq / startFreq, t);
+				const omega = 2.0 * Math.PI * freq / sampleRate;
+				const alpha = Math.sin(omega) / (2.0 * Q);
+
+				const a0 = 1.0 + alpha;
+				b0 = ((1.0 + Math.cos(omega)) / 2.0) / a0;
+				b1 = (-(1.0 + Math.cos(omega))) / a0;
+				b2 = b0;
+				a1 = (-2.0 * Math.cos(omega)) / a0;
+				a2 = (1.0 - alpha) / a0;
+			}
+
+			const lx0 = leftIn[i];
+			const rx0 = rightIn[i];
+
+			leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
+			rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
+
+			lx2 = lx1;
+			lx1 = lx0;
+			ly2 = ly1;
+			ly1 = leftOut[i];
+
+			rx2 = rx1;
+			rx1 = rx0;
+			ry2 = ry1;
+			ry1 = rightOut[i];
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/HighPassSweepUp.ts

@@ -0,0 +1,65 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class HighPassSweepUp implements AudioProcessor {
+	getName(): string {
+		return 'HP Sweep Up';
+	}
+
+	getDescription(): string {
+		return 'Sweeps a high-pass filter from full to thin';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Filter';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const sampleRate = 44100;
+		const startFreq = 20;
+		const endFreq = 8000;
+		const Q = 1.5;
+
+		let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
+		let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
+
+		let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i % 64 === 0) {
+				const t = i / length;
+				const freq = startFreq * Math.pow(endFreq / startFreq, t);
+				const omega = 2.0 * Math.PI * freq / sampleRate;
+				const alpha = Math.sin(omega) / (2.0 * Q);
+
+				const a0 = 1.0 + alpha;
+				b0 = ((1.0 + Math.cos(omega)) / 2.0) / a0;
+				b1 = (-(1.0 + Math.cos(omega))) / a0;
+				b2 = b0;
+				a1 = (-2.0 * Math.cos(omega)) / a0;
+				a2 = (1.0 - alpha) / a0;
+			}
+
+			const lx0 = leftIn[i];
+			const rx0 = rightIn[i];
+
+			leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
+			rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
+
+			lx2 = lx1;
+			lx1 = lx0;
+			ly2 = ly1;
+			ly1 = leftOut[i];
+
+			rx2 = rx1;
+			rx1 = rx0;
+			ry2 = ry1;
+			ry1 = rightOut[i];
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/LinearFadeIn.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class LinearFadeIn implements AudioProcessor {
 	getName(): string {
@@ -9,6 +9,10 @@ export class LinearFadeIn implements AudioProcessor {
 		return 'Applies a linear fade from silence to current level';
 	}
 
+	getCategory(): ProcessorCategory {
+		return 'Amplitude';
+	}
+
 	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
 		const length = leftIn.length;
 

src/lib/audio/processors/LinearFadeOut.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class LinearFadeOut implements AudioProcessor {
 	getName(): string {
@@ -9,6 +9,10 @@ export class LinearFadeOut implements AudioProcessor {
 		return 'Applies a linear fade from current level to silence';
 	}
 
+	getCategory(): ProcessorCategory {
+		return 'Amplitude';
+	}
+
 	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
 		const length = leftIn.length;
 

src/lib/audio/processors/LowPassSweepDown.ts

@@ -0,0 +1,65 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class LowPassSweepDown implements AudioProcessor {
+	getName(): string {
+		return 'LP Sweep Down';
+	}
+
+	getDescription(): string {
+		return 'Sweeps a low-pass filter from bright to dark';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Filter';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const sampleRate = 44100;
+		const startFreq = 18000;
+		const endFreq = 100;
+		const Q = 1.5;
+
+		let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
+		let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
+
+		let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i % 64 === 0) {
+				const t = i / length;
+				const freq = startFreq * Math.pow(endFreq / startFreq, t);
+				const omega = 2.0 * Math.PI * freq / sampleRate;
+				const alpha = Math.sin(omega) / (2.0 * Q);
+
+				const a0 = 1.0 + alpha;
+				b0 = ((1.0 - Math.cos(omega)) / 2.0) / a0;
+				b1 = (1.0 - Math.cos(omega)) / a0;
+				b2 = b0;
+				a1 = (-2.0 * Math.cos(omega)) / a0;
+				a2 = (1.0 - alpha) / a0;
+			}
+
+			const lx0 = leftIn[i];
+			const rx0 = rightIn[i];
+
+			leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
+			rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
+
+			lx2 = lx1;
+			lx1 = lx0;
+			ly2 = ly1;
+			ly1 = leftOut[i];
+
+			rx2 = rx1;
+			rx1 = rx0;
+			ry2 = ry1;
+			ry1 = rightOut[i];
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/LowPassSweepUp.ts

@@ -0,0 +1,65 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class LowPassSweepUp implements AudioProcessor {
+	getName(): string {
+		return 'LP Sweep Up';
+	}
+
+	getDescription(): string {
+		return 'Sweeps a low-pass filter from dark to bright';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Filter';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const sampleRate = 44100;
+		const startFreq = 100;
+		const endFreq = 18000;
+		const Q = 1.5;
+
+		let lx1 = 0, lx2 = 0, ly1 = 0, ly2 = 0;
+		let rx1 = 0, rx2 = 0, ry1 = 0, ry2 = 0;
+
+		let b0 = 0, b1 = 0, b2 = 0, a1 = 0, a2 = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i % 64 === 0) {
+				const t = i / length;
+				const freq = startFreq * Math.pow(endFreq / startFreq, t);
+				const omega = 2.0 * Math.PI * freq / sampleRate;
+				const alpha = Math.sin(omega) / (2.0 * Q);
+
+				const a0 = 1.0 + alpha;
+				b0 = ((1.0 - Math.cos(omega)) / 2.0) / a0;
+				b1 = (1.0 - Math.cos(omega)) / a0;
+				b2 = b0;
+				a1 = (-2.0 * Math.cos(omega)) / a0;
+				a2 = (1.0 - alpha) / a0;
+			}
+
+			const lx0 = leftIn[i];
+			const rx0 = rightIn[i];
+
+			leftOut[i] = b0 * lx0 + b1 * lx1 + b2 * lx2 - a1 * ly1 - a2 * ly2;
+			rightOut[i] = b0 * rx0 + b1 * rx1 + b2 * rx2 - a1 * ry1 - a2 * ry2;
+
+			lx2 = lx1;
+			lx1 = lx0;
+			ly2 = ly1;
+			ly1 = leftOut[i];
+
+			rx2 = rx1;
+			rx1 = rx0;
+			ry2 = ry1;
+			ry1 = rightOut[i];
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/MicroPitch.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class MicroPitch implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class MicroPitch implements AudioProcessor {
     return 'Applies subtle random pitch variations for analog warmth and character';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Pitch';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Normalize.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class Normalize implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class Normalize implements AudioProcessor {
     return "Normalizes audio to maximum amplitude without clipping";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Amplitude';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/OctaveDown.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class OctaveDown implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class OctaveDown implements AudioProcessor {
     return "Shifts pitch down one octave by halving playback rate";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Pitch';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/OctaveUp.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class OctaveUp implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class OctaveUp implements AudioProcessor {
     return "Shifts pitch up one octave by doubling playback rate";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Pitch';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/PanLeftToRight.ts

@@ -0,0 +1,34 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class PanLeftToRight implements AudioProcessor {
+	getName(): string {
+		return 'Pan L→R';
+	}
+
+	getDescription(): string {
+		return 'Gradually pans the sound from left to right';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Space';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		for (let i = 0; i < length; i++) {
+			const t = i / length;
+			const panAngle = t * Math.PI * 0.5;
+			const leftGain = Math.cos(panAngle);
+			const rightGain = Math.sin(panAngle);
+
+			const mono = (leftIn[i] + rightIn[i]) * 0.5;
+			leftOut[i] = mono * leftGain;
+			rightOut[i] = mono * rightGain;
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/PanRightToLeft.ts

@@ -0,0 +1,34 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class PanRightToLeft implements AudioProcessor {
+	getName(): string {
+		return 'Pan R→L';
+	}
+
+	getDescription(): string {
+		return 'Gradually pans the sound from right to left';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Space';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		for (let i = 0; i < length; i++) {
+			const t = i / length;
+			const panAngle = (1.0 - t) * Math.PI * 0.5;
+			const leftGain = Math.cos(panAngle);
+			const rightGain = Math.sin(panAngle);
+
+			const mono = (leftIn[i] + rightIn[i]) * 0.5;
+			leftOut[i] = mono * leftGain;
+			rightOut[i] = mono * rightGain;
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/PanShuffler.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class PanShuffler implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class PanShuffler implements AudioProcessor {
     return 'Smoothly pans segments across the stereo field';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Space';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/PhaseInverter.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class PhaseInverter implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class PhaseInverter implements AudioProcessor {
     return "Inverts polarity of one or both channels";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Utility';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Phaser.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class Phaser implements AudioProcessor {
   private readonly sampleRate = 44100;
@@ -11,6 +11,10 @@ export class Phaser implements AudioProcessor {
     return 'Classic phaser effect with sweeping all-pass filters for swirling, spacey sounds';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Filter';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/PitchShifter.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class PitchShifter implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class PitchShifter implements AudioProcessor {
     return 'Transposes audio up or down in semitones without changing duration';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Pitch';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/PitchWobble.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class PitchWobble implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class PitchWobble implements AudioProcessor {
     return 'Variable-rate playback with LFO modulation for tape wow/vibrato effects';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Pitch';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Resonator.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class Resonator implements AudioProcessor {
   private readonly sampleRate = 44100;
@@ -11,6 +11,10 @@ export class Resonator implements AudioProcessor {
     return 'Multi-band resonant filter bank that adds tonal character through resonance';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Filter';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Reverser.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class Reverser implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class Reverser implements AudioProcessor {
     return 'Plays the sound backwards';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Time';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/RingModulator.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class RingModulator implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class RingModulator implements AudioProcessor {
     return "Frequency modulation for metallic, bell-like tones";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Modulation';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/SegmentShuffler.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class SegmentShuffler implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class SegmentShuffler implements AudioProcessor {
     return 'Randomly reorganizes and swaps parts of the sound';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Time';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/SlowTapeStop.ts

@@ -0,0 +1,50 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class SlowTapeStop implements AudioProcessor {
+	getName(): string {
+		return 'Slow Tape Stop';
+	}
+
+	getDescription(): string {
+		return 'Simulates a tape machine gradually slowing to a stop';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Time';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const stopPoint = length * 0.4;
+		const stopDuration = length * 0.6;
+
+		let readPos = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i < stopPoint) {
+				readPos = i;
+			} else {
+				const t = (i - stopPoint) / stopDuration;
+				const curve = 1.0 - (t * t * t);
+				const speed = Math.max(0, curve);
+				readPos += speed;
+			}
+
+			const idx = Math.floor(readPos);
+			const frac = readPos - idx;
+
+			if (idx < length - 1) {
+				leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
+				rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
+			} else if (idx < length) {
+				leftOut[i] = leftIn[idx];
+				rightOut[i] = rightIn[idx];
+			}
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/SpectralBlur.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class SpectralBlur implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class SpectralBlur implements AudioProcessor {
     return 'Smears frequency content across neighboring bins for dreamy, diffused textures';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Spectral';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/SpectralShift.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class SpectralShift implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class SpectralShift implements AudioProcessor {
     return 'Shifts all frequencies by a fixed Hz amount creating inharmonic, metallic timbres';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Spectral';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/StereoSwap.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class StereoSwap implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class StereoSwap implements AudioProcessor {
     return 'Swaps left and right channels';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Space';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/StereoWidener.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class StereoWidener implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class StereoWidener implements AudioProcessor {
     return "Expands stereo field using mid-side processing";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Space';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/Stutter.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class Stutter implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class Stutter implements AudioProcessor {
     return 'Rapidly repeats small fragments with smooth crossfades';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Time';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/TapeSpeedUp.ts

@@ -0,0 +1,49 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class TapeSpeedUp implements AudioProcessor {
+	getName(): string {
+		return 'Tape Speed Up';
+	}
+
+	getDescription(): string {
+		return 'Simulates a tape machine accelerating from slow to normal speed';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Time';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const accelDuration = length * 0.3;
+
+		let readPos = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i < accelDuration) {
+				const t = i / accelDuration;
+				const curve = t * t * t;
+				const speed = curve;
+				readPos += speed;
+			} else {
+				readPos += 1.0;
+			}
+
+			const idx = Math.floor(readPos);
+			const frac = readPos - idx;
+
+			if (idx < length - 1) {
+				leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
+				rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
+			} else if (idx < length) {
+				leftOut[i] = leftIn[idx];
+				rightOut[i] = rightIn[idx];
+			}
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/TapeStop.ts

@@ -0,0 +1,50 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class TapeStop implements AudioProcessor {
+	getName(): string {
+		return 'Tape Stop';
+	}
+
+	getDescription(): string {
+		return 'Simulates a tape machine slowing to a stop';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Time';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const stopPoint = length * 0.7;
+		const stopDuration = length * 0.3;
+
+		let readPos = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i < stopPoint) {
+				readPos = i;
+			} else {
+				const t = (i - stopPoint) / stopDuration;
+				const curve = 1.0 - (t * t * t);
+				const speed = Math.max(0, curve);
+				readPos += speed;
+			}
+
+			const idx = Math.floor(readPos);
+			const frac = readPos - idx;
+
+			if (idx < length - 1) {
+				leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
+				rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
+			} else if (idx < length) {
+				leftOut[i] = leftIn[idx];
+				rightOut[i] = rightIn[idx];
+			}
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/TapeWobble.ts

@@ -0,0 +1,48 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class TapeWobble implements AudioProcessor {
+	getName(): string {
+		return 'Tape Wobble';
+	}
+
+	getDescription(): string {
+		return 'Simulates tape machine speed instability with pitch variations';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Time';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const sampleRate = 44100;
+		const wobbleFreq = 2.0 + Math.random() * 2.0;
+		const wobbleDepth = 0.015;
+
+		let readPos = 0;
+
+		for (let i = 0; i < length; i++) {
+			const t = i / sampleRate;
+			const wobble = Math.sin(2.0 * Math.PI * wobbleFreq * t) * wobbleDepth;
+			const speed = 1.0 + wobble;
+
+			readPos += speed;
+
+			const idx = Math.floor(readPos);
+			const frac = readPos - idx;
+
+			if (idx < length - 1) {
+				leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
+				rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
+			} else if (idx < length) {
+				leftOut[i] = leftIn[idx];
+				rightOut[i] = rightIn[idx];
+			}
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/Tremolo.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from './AudioProcessor';
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
 
 export class Tremolo implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class Tremolo implements AudioProcessor {
     return 'Applies rhythmic volume modulation';
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Amplitude';
+  }
+
   process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/TrimSilence.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class TrimSilence implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class TrimSilence implements AudioProcessor {
     return "Removes leading and trailing silence from audio";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Utility';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/VinylStop.ts

@@ -0,0 +1,50 @@
+import type { AudioProcessor, ProcessorCategory } from './AudioProcessor';
+
+export class VinylStop implements AudioProcessor {
+	getName(): string {
+		return 'Vinyl Stop';
+	}
+
+	getDescription(): string {
+		return 'Simulates a turntable slowing to a stop with realistic physics';
+	}
+
+	getCategory(): ProcessorCategory {
+		return 'Time';
+	}
+
+	process(leftIn: Float32Array, rightIn: Float32Array): [Float32Array, Float32Array] {
+		const length = leftIn.length;
+		const leftOut = new Float32Array(length);
+		const rightOut = new Float32Array(length);
+
+		const stopPoint = length * 0.7;
+		const stopDuration = length * 0.3;
+
+		let readPos = 0;
+
+		for (let i = 0; i < length; i++) {
+			if (i < stopPoint) {
+				readPos = i;
+			} else {
+				const t = (i - stopPoint) / stopDuration;
+				const curve = Math.exp(-5.0 * t);
+				const speed = Math.max(0, curve);
+				readPos += speed;
+			}
+
+			const idx = Math.floor(readPos);
+			const frac = readPos - idx;
+
+			if (idx < length - 1) {
+				leftOut[i] = leftIn[idx] * (1.0 - frac) + leftIn[idx + 1] * frac;
+				rightOut[i] = rightIn[idx] * (1.0 - frac) + rightIn[idx + 1] * frac;
+			} else if (idx < length) {
+				leftOut[i] = leftIn[idx];
+				rightOut[i] = rightIn[idx];
+			}
+		}
+
+		return [leftOut, rightOut];
+	}
+}

src/lib/audio/processors/Waveshaper.ts

@@ -1,4 +1,4 @@
-import type { AudioProcessor } from "./AudioProcessor";
+import type { AudioProcessor, ProcessorCategory } from "./AudioProcessor";
 
 export class Waveshaper implements AudioProcessor {
   getName(): string {
@@ -9,6 +9,10 @@ export class Waveshaper implements AudioProcessor {
     return "Transfer function distortion with various curve shapes";
   }
 
+  getCategory(): ProcessorCategory {
+    return 'Distortion';
+  }
+
   async process(
     leftChannel: Float32Array,
     rightChannel: Float32Array

src/lib/audio/processors/registry.ts

@@ -29,6 +29,17 @@ import { LinearFadeOut } from './LinearFadeOut';
 import { ExpFadeOut } from './ExpFadeOut';
 import { LinearFadeIn } from './LinearFadeIn';
 import { ExpFadeIn } from './ExpFadeIn';
+import { PanLeftToRight } from './PanLeftToRight';
+import { PanRightToLeft } from './PanRightToLeft';
+import { LowPassSweepDown } from './LowPassSweepDown';
+import { LowPassSweepUp } from './LowPassSweepUp';
+import { HighPassSweepDown } from './HighPassSweepDown';
+import { HighPassSweepUp } from './HighPassSweepUp';
+import { TapeStop } from './TapeStop';
+import { SlowTapeStop } from './SlowTapeStop';
+import { TapeSpeedUp } from './TapeSpeedUp';
+import { VinylStop } from './VinylStop';
+import { TapeWobble } from './TapeWobble';
 
 const processors: AudioProcessor[] = [
   new SegmentShuffler(),
@@ -61,6 +72,17 @@ const processors: AudioProcessor[] = [
   new ExpFadeOut(),
   new LinearFadeIn(),
   new ExpFadeIn(),
+  new PanLeftToRight(),
+  new PanRightToLeft(),
+  new LowPassSweepDown(),
+  new LowPassSweepUp(),
+  new HighPassSweepDown(),
+  new HighPassSweepUp(),
+  new TapeStop(),
+  new SlowTapeStop(),
+  new TapeSpeedUp(),
+  new VinylStop(),
+  new TapeWobble(),
 ];
 
 export function getRandomProcessor(): AudioProcessor {

src/lib/components/ProcessorPopup.svelte

@@ -1,20 +1,50 @@
 <script lang="ts">
   import { getAllProcessors } from "../audio/processors/registry";
-  import type { AudioProcessor } from "../audio/processors/AudioProcessor";
+  import type { AudioProcessor, ProcessorCategory } from "../audio/processors/AudioProcessor";
 
   interface Props {
     onselect: (processor: AudioProcessor) => void;
+    enabledCategories: Set<ProcessorCategory>;
+    ontogglecategory: (category: ProcessorCategory) => void;
   }
 
-  let { onselect }: Props = $props();
+  let { onselect, enabledCategories, ontogglecategory }: Props = $props();
 
-  const allProcessors = getAllProcessors().sort((a, b) =>
+  const allProcessors = getAllProcessors();
-    a.getName().localeCompare(b.getName())
+
+  const allCategories: ProcessorCategory[] = [
+    'Amplitude',
+    'Filter',
+    'Time',
+    'Space',
+    'Pitch',
+    'Modulation',
+    'Distortion',
+    'Spectral',
+    'Utility'
+  ];
+
+  const filteredProcessors = $derived(
+    allProcessors
+      .filter(p => enabledCategories.has(p.getCategory()))
+      .sort((a, b) => a.getName().localeCompare(b.getName()))
   );
 </script>
 
 <div class="processor-popup">
-  {#each allProcessors as processor}
+  <div class="popup-sidebar">
+    {#each allCategories as category}
+      <button
+        class="category-filter"
+        class:active={enabledCategories.has(category)}
+        onclick={() => ontogglecategory(category)}
+      >
+        {category}
+      </button>
+    {/each}
+  </div>
+  <div class="processors-grid">
+    {#each filteredProcessors as processor}
       <button
         class="processor-tile"
         data-description={processor.getDescription()}
@@ -24,6 +54,7 @@
       </button>
     {/each}
   </div>
+</div>
 
 <style>
   .processor-popup {
@@ -31,18 +62,74 @@
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
-    background-color: #000;
+    background-color: #0a0a0a;
     border: 2px solid #fff;
-    padding: 0.5rem;
     z-index: 1000;
+    width: 90vw;
+    max-width: 500px;
+    margin-bottom: 0.5rem;
+    max-height: 60vh;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  .popup-sidebar {
+    display: flex;
+    flex-direction: column;
+    background-color: #1a1a1a;
+    border-right: 1px solid #333;
+    min-width: 80px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #444 transparent;
+  }
+
+  .popup-sidebar::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  .popup-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .popup-sidebar::-webkit-scrollbar-thumb {
+    background: #444;
+  }
+
+  .category-filter {
+    font-size: 0.65rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    padding: 0.5rem 0.4rem;
+    background-color: #1a1a1a;
+    border: none;
+    border-bottom: 1px solid #2a2a2a;
+    color: #888;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+    white-space: nowrap;
+  }
+
+  .category-filter:hover {
+    background-color: #222;
+    color: #aaa;
+  }
+
+  .category-filter.active {
+    background-color: #0a0a0a;
+    color: #fff;
+  }
+
+  .processors-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0.4rem;
-    width: 90vw;
+    padding: 0.5rem;
-    max-width: 400px;
-    margin-bottom: 0.5rem;
-    max-height: 60vh;
     overflow-y: auto;
+    flex: 1;
   }
 
   .processor-tile {
@@ -90,11 +177,23 @@
 
   @media (min-width: 768px) {
     .processor-popup {
+      width: 550px;
+      max-width: 550px;
+    }
+
+    .popup-sidebar {
+      min-width: 100px;
+    }
+
+    .category-filter {
+      font-size: 0.7rem;
+      padding: 0.5rem 0.6rem;
+    }
+
+    .processors-grid {
       grid-template-columns: repeat(3, 1fr);
-      width: 500px;
-      max-width: 500px;
-      padding: 0.6rem;
       gap: 0.5rem;
+      padding: 0.6rem;
     }
 
     .processor-tile {
@@ -114,9 +213,16 @@
 
   @media (min-width: 1024px) {
     .processor-popup {
+      width: 650px;
+      max-width: 650px;
+    }
+
+    .popup-sidebar {
+      min-width: 110px;
+    }
+
+    .processors-grid {
       grid-template-columns: repeat(4, 1fr);
-      width: 600px;
-      max-width: 600px;
       padding: 0.75rem;
     }
 

src/lib/utils/keyboard.ts

@@ -32,7 +32,7 @@ export function createKeyboardHandler(actions: KeyboardActions) {
       case 'p':
         actions.onProcess?.();
         break;
-      case 's':
+      case 'd':
         actions.onDownload?.();
         break;
       case ' ':

src/lib/utils/settings.ts

@@ -9,6 +9,7 @@ const STORAGE_KEYS = {
   PITCH_LOCK_ENABLED: 'pitchLockEnabled',
   PITCH_LOCK_FREQUENCY: 'pitchLockFrequency',
   EXPANDED_CATEGORIES: 'expandedCategories',
+  ENABLED_PROCESSOR_CATEGORIES: 'enabledProcessorCategories',
 } as const;
 
 export function loadVolume(): number {
@@ -63,3 +64,20 @@ export function loadExpandedCategories(): Set<string> {
 export function saveExpandedCategories(categories: Set<string>): void {
   localStorage.setItem(STORAGE_KEYS.EXPANDED_CATEGORIES, JSON.stringify(Array.from(categories)));
 }
+
+export function loadEnabledProcessorCategories(): Set<string> {
+  const stored = localStorage.getItem(STORAGE_KEYS.ENABLED_PROCESSOR_CATEGORIES);
+  if (stored) {
+    try {
+      const parsed = JSON.parse(stored);
+      return new Set(Array.isArray(parsed) ? parsed : []);
+    } catch {
+      return new Set(['Amplitude', 'Filter', 'Time', 'Space', 'Pitch', 'Modulation', 'Distortion', 'Spectral', 'Utility']);
+    }
+  }
+  return new Set(['Amplitude', 'Filter', 'Time', 'Space', 'Pitch', 'Modulation', 'Distortion', 'Spectral', 'Utility']);
+}
+
+export function saveEnabledProcessorCategories(categories: Set<string>): void {
+  localStorage.setItem(STORAGE_KEYS.ENABLED_PROCESSOR_CATEGORIES, JSON.stringify(Array.from(categories)));
+}