Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Have you ever noticed why an acoustic guitar or subtle backing vocal suddenly feels right in front of your face the second you clamp a compressor onto it?

While most producers treat compression purely as volume control, in modern mixing it acts as your primary tool for positioning sounds in 3D depth.

How does your brain actually figure out whether a sound is near or far in the first place?

Perceived acoustic depth ($z$-axis placement) in a stereo mix is governed by psychoacoustic cues: **Direct-to-Reverberant Ratio** ($DRR$), transient sharpness, high-frequency spectral balance, and dynamic contrast.

A high $DRR$ with sharp, uncompressed **transients** places a sound in the immediate foreground, while lower ratios and softer transients push it deep into the virtual room.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      margin-bottom: 8px;
    }

    .btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .btn-audio {
      flex: 0 0 auto;
      padding: 8px 14px;
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
    }
    .btn-audio:active {
      background: #e5e7eb;
    }

    .main-stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 480px;
      flex: 1;
    }

    @media (max-width: 400px) {
      .main-stage {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      min-height: 200px;
    }

    /* Waveform Display */
    .waveform-svg {
      width: 100%;
      height: 140px;
    }

    .wave-path {
      transition: d 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .label-tag {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #6b7280;
    }

    .tag-transient { color: #f59e0b; }
    .tag-sustain { color: #8b5cf6; }

    /* Depth Stage */
    .depth-view {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .grid-lines {
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(ellipse at 50% 100%, rgba(34, 183, 255, 0.08) 0%, rgba(34, 183, 255, 0) 70%),
        linear-gradient(to top, rgba(0,0,0,0.04) 1px, transparent 1px);
      background-size: 100% 100%, 100% 25%;
    }

    .depth-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      background: #f1f5f9;
      color: #1e2945;
      transition: all 0.3s ease;
      z-index: 2;
    }

    .source-node {
      width: 44px;
      height: 44px;
      background: #22b7ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.4);
      position: absolute;
      left: calc(50% - 22px);
      transition: top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.45s ease, background 0.3s ease;
      z-index: 3;
    }

    .listener-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      z-index: 2;
      font-size: 12px;
      font-weight: 700;
      color: #6b7280;
    }
    .listener-icon {
      font-size: 22px;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" id="btnRaw" onclick="setMode('raw')">Uncompressed</button>
    <button class="btn" id="btnComp" onclick="setMode('comp')">Compressed</button>
    <button class="btn btn-audio" onclick="playCurrentAudio()">Audition 🔊</button>
  </div>

  <div class="main-stage">
    
    <div class="panel">
      <div style="display: flex; justify-content: space-between; width: 100%;">
        <span class="label-tag tag-transient">Transient</span>
        <span class="label-tag tag-sustain">Sustain</span>
      </div>

      <svg class="waveform-svg" viewBox="0 0 200 120">
        
        <line x1="10" y1="60" x2="190" y2="60" stroke="#e5e7eb" stroke-width="1.5" stroke-dasharray="3 3" />
        
        
        <path id="sustainFill" class="wave-path" fill="rgba(139, 92, 246, 0.15)" stroke="none" />
        
        
        <path id="waveShape" class="wave-path" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        
        
        <circle id="peakDot" cx="36" cy="15" r="4" fill="#f59e0b" style="transition: cy 0.4s ease;" />
      </svg>

      <div style="font-size: 12px; color: #9ca3af; font-weight: 600;">Envelope Profile</div>
    </div>

    
    <div class="panel">
      <div class="depth-view">
        <div class="grid-lines"></div>

        <div id="depthBadge" class="depth-badge">Foreground</div>

        
        <div id="sourceNode" class="source-node" style="top: 85px;">
          🥁
        </div>

        <div class="listener-node">
          <span class="listener-icon">🎧</span>
          <span>Listener</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    let mode = 'raw';
    let audioCtx = null;

    // SVG Waveform paths
    // Raw: High sharp spike, rapid drop to low sustain
    const rawPath = "M 15,60 Q 25,60 30,30 L 36,15 L 42,75 L 50,55 L 60,63 L 100,60 L 185,60";
    const rawFill = "M 36,15 L 42,75 L 50,55 L 60,63 L 100,60 L 185,60 L 185,60 L 36,60 Z";
    
    // Compressed: Clamped peak, boosted high sustain tail
    const compPath = "M 15,60 Q 25,60 30,45 L 36,40 L 45,70 L 60,45 L 90,48 L 130,52 L 185,58";
    const compFill = "M 36,40 L 45,70 L 60,45 L 90,48 L 130,52 L 185,58 L 185,60 L 36,60 Z";

    function updateView() {
      const isRaw = mode === 'raw';
      
      document.getElementById('btnRaw').classList.toggle('active', isRaw);
      document.getElementById('btnComp').classList.toggle('active', !isRaw);

      // Update Waveform
      document.getElementById('waveShape').setAttribute('d', isRaw ? rawPath : compPath);
      document.getElementById('sustainFill').setAttribute('d', isRaw ? rawFill : compFill);
      document.getElementById('peakDot').setAttribute('cy', isRaw ? '15' : '40');

      // Update Depth Stage (Top position: near = 85px, distant = 22px)
      const source = document.getElementById('sourceNode');
      const badge = document.getElementById('depthBadge');

      if (isRaw) {
        source.style.top = '85px';
        source.style.transform = 'scale(1.1)';
        source.style.background = '#22b7ff';
        badge.textContent = 'Foreground';
        badge.style.background = '#e0f2fe';
        badge.style.color = '#0369a1';
      } else {
        source.style.top = '24px';
        source.style.transform = 'scale(0.8)';
        source.style.background = '#8b5cf6';
        badge.textContent = 'Distant';
        badge.style.background = '#f3e8ff';
        badge.style.color = '#6b21a8';
      }
    }

    function setMode(newMode) {
      mode = newMode;
      updateView();
    }

    // Audio tone synthesis demonstrating transient punch vs sustained tail
    function playCurrentAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const now = audioCtx.currentTime;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.type = 'triangle';
      osc.frequency.setValueAtTime(140, now);
      osc.frequency.exponentialRampToValueAtTime(45, now + 0.12);

      if (mode === 'raw') {
        // High transient spike, quick decay
        gain.gain.setValueAtTime(0.7, now);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.22);
      } else {
        // Clamped peak, louder lingering sustain tail
        gain.gain.setValueAtTime(0.35, now);
        gain.gain.linearRampToValueAtTime(0.3, now + 0.2);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.55);
      }

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start(now);
      osc.stop(now + (mode === 'raw' ? 0.25 : 0.6));
    }

    // Initialize default
    updateView();
  </script>
</body>
</html>

So what happens to this distance calculation when a compressor reshapes the waveform?

A compressor reduces the volume of signals exceeding a set **threshold**, and **makeup gain** boosts the entire processed signal back up to match reference levels.

Downward dynamic compression reduces peak transient levels relative to sustained tones, and applying **makeup gain** amplifies room reflections—effectively decreasing the **Direct-to-Reverberant Ratio** ($DRR$) to bring background acoustic spaces forward into audible perception.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      padding: 10px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      border: 1px solid #e6e6e6;
    }

    .controls label {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      white-space: nowrap;
    }

    input[type=range] {
      flex: 1;
      accent-color: #22b7ff;
      cursor: pointer;
      height: 6px;
    }

    .stage-container {
      width: 100%;
      max-width: 440px;
      height: 280px;
      position: relative;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .depth-axis {
      position: absolute;
      left: 12px;
      top: 12px;
      bottom: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      z-index: 5;
      pointer-events: none;
    }

    .depth-axis span:first-child { color: #64748b; }
    .depth-axis span:last-child { color: #22b7ff; }

    /* Soundstage perspective grid */
    .stage {
      position: absolute;
      inset: 0;
      perspective: 350px;
      overflow: hidden;
    }

    .grid-plane {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: rotateX(55deg);
      transform-origin: 50% 100%;
      background: 
        linear-gradient(to top, rgba(34, 183, 255, 0.12) 1px, transparent 1px),
        linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
      background-size: 100% 30px, 40px 100%;
    }

    /* Sound Objects */
    .sound-source {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                  opacity 0.4s ease,
                  transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 10;
    }

    .node {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .label {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      padding: 2px 8px;
      border-radius: 6px;
      background: rgba(255,255,255,0.92);
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    /* Direct Sound */
    #directSound {
      top: 72%;
    }
    #directSound .node {
      background: #22b7ff;
      color: #fff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.4);
    }
    #directSound .label {
      color: #0284c7;
    }

    /* Room Tone / Sustain */
    #roomSound {
      top: 22%;
      opacity: 0.4;
      transform: translate(-50%, -50%) scale(0.75);
    }
    #roomSound .node {
      background: #8b5cf6;
      color: #fff;
      box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
    }
    #roomSound .label {
      color: #6d28d9;
    }

    /* Listener at bottom */
    .listener {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      z-index: 12;
      opacity: 0.85;
    }

    /* Bottom Waveform representation */
    .wave-display {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .wave-bars {
      flex: 1;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .bar {
      border-radius: 3px;
      transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease;
    }

    .bar-peak {
      width: 12px;
      background: #22b7ff;
      height: 34px;
    }

    .bar-tail {
      width: 8px;
      background: #cbd5e1;
      height: 6px;
    }

    .wave-tag {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      min-width: 100px;
      text-align: right;
    }
  </style>
</head>
<body>

  <div class="controls">
    <label>Compression</label>
    <input type="range" id="compSlider" min="0" max="100" value="0">
  </div>

  <div class="stage-container">
    <div class="depth-axis">
      <span>Distant</span>
      <span>Close</span>
    </div>

    <div class="stage">
      <div class="grid-plane"></div>

      
      <div class="sound-source" id="roomSound">
        <div class="node">🏛️</div>
        <div class="label">Room &amp; Sustain</div>
      </div>

      
      <div class="sound-source" id="directSound">
        <div class="node">🎤</div>
        <div class="label">Direct Sound</div>
      </div>

      <div class="listener">🎧</div>
    </div>
  </div>

  <div class="wave-display">
    <div class="wave-bars">
      <div class="bar bar-peak" id="p1"></div>
      <div class="bar bar-tail" id="t1"></div>
      <div class="bar bar-tail" id="t2"></div>
      <div class="bar bar-peak" id="p2"></div>
      <div class="bar bar-tail" id="t3"></div>
      <div class="bar bar-tail" id="t4"></div>
    </div>
    <div class="wave-tag" id="statusTag">Natural Dynamic</div>
  </div>

  <script>
    const slider = document.getElementById('compSlider');
    const room = document.getElementById('roomSound');
    const statusTag = document.getElementById('statusTag');
    const p1 = document.getElementById('p1');
    const p2 = document.getElementById('p2');
    const tails = [document.getElementById('t1'), document.getElementById('t2'), document.getElementById('t3'), document.getElementById('t4')];

    function update(val) {
      const norm = val / 100;
      
      // Move Room Sound forward towards listener (top: 22% -> 56%)
      const topPos = 22 + (norm * 34);
      const scale = 0.75 + (norm * 0.25);
      const opacity = 0.4 + (norm * 0.6);

      room.style.top = topPos + '%';
      room.style.transform = `translate(-50%, -50%) scale(${scale})`;
      room.style.opacity = opacity;

      // Waveform bars: squash peak, boost quiet tail
      const peakH = 34 - (norm * 12);
      const tailH = 6 + (norm * 16);

      p1.style.height = peakH + 'px';
      p2.style.height = peakH + 'px';

      tails.forEach(t => {
        t.style.height = tailH + 'px';
        t.style.backgroundColor = norm > 0.4 ? '#8b5cf6' : '#cbd5e1';
      });

      if (norm < 0.25) {
        statusTag.textContent = 'Natural Dynamic';
      } else if (norm < 0.7) {
        statusTag.textContent = 'Detail Lifted';
      } else {
        statusTag.textContent = 'Upfront Blend';
      }
    }

    slider.addEventListener('input', (e) => update(e.target.value));
    update(0);
  </script>
</body>
</html>

This brings quiet background textures forward, but how does compression keep an erratic sound from drifting back and forth across the virtual stage?

An uncompressed acoustic instrument has wide **dynamic range** (the gap between its loudest peak and quietest decay), causing loud notes to leap forward and quiet notes to fall backward into the mix.

By leveling peak-to-sustain variations, compression anchors the element at a fixed, consistent depth plane so it neither jumps out unexpectedly nor gets swallowed by other tracks.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
      flex-wrap: wrap;
      z-index: 10;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.25s ease;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* 3D Soundstage Container */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 270px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 14px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    /* Perspective Grid */
    .depth-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      perspective: 300px;
    }
    .grid-plane {
      position: absolute;
      inset: -10% -20%;
      background-image:
        linear-gradient(to right, rgba(226, 232, 240, 0.7) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.7) 1px, transparent 1px);
      background-size: 32px 24px;
      transform: rotateX(56deg);
      transform-origin: 50% 0%;
      opacity: 0.75;
    }

    /* Depth Zones */
    .depth-marker {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #94a3b8;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .depth-marker::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #e2e8f0;
    }

    /* Mix Bed Reference */
    .mix-bed {
      position: absolute;
      left: 12%;
      right: 12%;
      top: 50%;
      transform: translateY(-50%);
      height: 48px;
      background: rgba(241, 245, 249, 0.85);
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 12px;
      z-index: 2;
    }
    .mix-item {
      font-size: 16px;
      opacity: 0.35;
      filter: grayscale(1);
    }

    /* Target Instrument Object */
    .sound-source {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                  transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .source-orb {
      width: 44px;
      height: 44px;
      background: #22b7ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.45);
      transition: all 0.6s ease;
    }
    .source-label {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      background: rgba(255, 255, 255, 0.9);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
    }

    /* Range Bracket Visualization */
    .range-bracket {
      position: absolute;
      right: 18px;
      width: 6px;
      background: rgba(34, 183, 255, 0.2);
      border: 1px solid #22b7ff;
      border-radius: 3px;
      z-index: 3;
      transition: all 0.5s ease;
    }

    /* Target states on depth axis */
    /* State 0: Uncompressed (Drifting/Fluctuating) */
    .stage.mode-uncompressed .sound-source {
      animation: floatDepth 3.2s ease-in-out infinite alternate;
    }
    .stage.mode-uncompressed .range-bracket {
      top: 22%;
      height: 60%;
    }

    /* State 1: Compressed (Anchored in Blend) */
    .stage.mode-compressed .sound-source {
      top: 50%;
      transform: translate(-50%, -50%) scale(1);
    }
    .stage.mode-compressed .range-bracket {
      top: 45%;
      height: 12%;
    }

    /* State 2: Slow Attack (Transient Punch Forward) */
    .stage.mode-slow .sound-source {
      top: 80%;
      transform: translate(-50%, -50%) scale(1.22);
    }
    .stage.mode-slow .source-orb {
      box-shadow: 0 8px 24px rgba(34, 183, 255, 0.6);
    }
    .stage.mode-slow .range-bracket {
      top: 72%;
      height: 16%;
    }

    /* State 3: Fast Attack (Clamped / Pushed Back) */
    .stage.mode-fast .sound-source {
      top: 24%;
      transform: translate(-50%, -50%) scale(0.82);
    }
    .stage.mode-fast .source-orb {
      opacity: 0.85;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }
    .stage.mode-fast .range-bracket {
      top: 20%;
      height: 14%;
    }

    @keyframes floatDepth {
      0% {
        top: 22%;
        transform: translate(-50%, -50%) scale(0.8);
      }
      100% {
        top: 82%;
        transform: translate(-50%, -50%) scale(1.25);
      }
    }

    /* Bottom Listener Bar */
    .listener-bar {
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-top: 4px;
    }
    .listener-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" onclick="setMode(0)">Uncompressed</button>
    <button class="btn" onclick="setMode(1)">Compressed</button>
    <button class="btn" onclick="setMode(2)">Slow Attack</button>
    <button class="btn" onclick="setMode(3)">Fast Attack</button>
  </div>

  
  <div id="stage" class="stage-container stage mode-uncompressed">
    <div class="depth-grid">
      <div class="grid-plane"></div>
    </div>

    
    <div class="depth-marker">Background (Far)</div>

    
    <div class="mix-bed">
      <span class="mix-item">🎸</span>
      <span class="mix-item">🎹</span>
      <span class="mix-item">🥁</span>
      <span class="mix-item">🎺</span>
    </div>

    
    <div class="sound-source">
      <div class="source-orb">🎤</div>
      <div class="source-label">Lead Vocal</div>
    </div>

    
    <div class="range-bracket"></div>

    
    <div class="listener-bar">
      <div class="depth-marker" style="margin: 0; width: 65%;">Foreground (Near)</div>
      <div class="listener-badge">
        <span>🎧 Listener</span>
      </div>
    </div>
  </div>

  <script>
    const modes = ['mode-uncompressed', 'mode-compressed', 'mode-slow', 'mode-fast'];
    const stage = document.getElementById('stage');
    const buttons = document.querySelectorAll('.btn');

    function setMode(index) {
      modes.forEach(m => stage.classList.remove(m));
      stage.classList.add(modes[index]);
      buttons.forEach((b, i) => b.classList.toggle('active', i === index));
    }
  </script>
</body>
</html>

Can you use time constants like attack and release to deliberately push an element forward or tuck it into the background?

## Controlling Depth with Attack and Release

Fast compressor attack times ($< 5\text{ ms}$) clamp initial attack transients, reducing high-frequency onset energy and **crest factor** ($\text{Crest Factor} = L_{\text{peak}} - L_{\text{RMS}}$), which softens front-edge definition and pushes the primary dry sound deeper into the mix fabric.

A slower **attack time** (20 to 50 ms) allows the initial punch through before compression begins, accentuating the direct transient hit to thrust lead vocals and snares into the foreground.

A common mistake is using lightning-fast attack times across every track in a mix; flattening every transient eliminates the depth contrast your ears need, collapsing your mix into a two-dimensional wall.

When dialing in a compressor, always adjust the attack control while listening to the full mix—adjust the dial until the track snaps forward or settles backward into its designated pocket.

music-technology

How Compression Affects Perceived Depth and Blend. Explain how dynamic compression brings background elements forward and stabilizes their perceived front-to-back placement.

Creating A Sense Of Depth In Your Mixes: Dynamics, EQ, and Spatial Positioning

A-Level Music Technology: Compression Fundamentals, Dynamic Envelopes, and Mix Blend

Audio Dynamics: How Compression Shapes Perceived Distance, Depth, and Texture

For Year 13 (A2 Level) GCE Music Technology students, pedagogical delivery must bridge theoretical signal processing equations with critical listening analysis. Instructors should emphasize that depth in a mix is not merely an effect of time-based processors (reverb/delay), but a psychoacoustic interaction between transient energy, crest factor, and continuous RMS stability. In classroom practicals, use A/B level-matched blind tests with extreme fast-attack vs. slow-attack compression settings to demonstrate how transient modification physically relocates an element forward or backward on the soundstage.

How Compression Affects Perceived Depth and Blend

The Acoustic Cues of Depth

Pulling Low-Level Detail Forward