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

Gently place two fingers against the front of your throat and hum a low tune. Do you feel that tiny buzzing against your fingertips?

That buzzing sensation is the secret behind every single sound in the entire universe.

A **vibration** is a rapid back-and-forth motion that repeats over and over. When an object vibrates, it creates **sound**.

<!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, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      background: #f1f5f9;
      color: #64748b;
      transition: all 0.25s ease;
    }
    .status-badge.vibrating {
      background: #e0f2fe;
      color: #0284c7;
    }
    .status-badge .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .wave {
      fill: none;
      stroke: #f59e0b;
      stroke-width: 2.5;
      opacity: 0;
      transform-origin: 200px 100px;
    }

    .vibrating-fast .wave-1 { animation: pulseWave 0.6s ease-out infinite 0s; }
    .vibrating-fast .wave-2 { animation: pulseWave 0.6s ease-out infinite 0.2s; }
    .vibrating-fast .wave-3 { animation: pulseWave 0.6s ease-out infinite 0.4s; }

    .vibrating-slow .wave-1 { animation: pulseWave 1.2s ease-out infinite 0s; }
    .vibrating-slow .wave-2 { animation: pulseWave 1.2s ease-out infinite 0.4s; }
    .vibrating-slow .wave-3 { animation: pulseWave 1.2s ease-out infinite 0.8s; }

    @keyframes pulseWave {
      0% { transform: scale(0.6); opacity: 0.85; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    /* Rubber band vibration */
    .band-ghost {
      stroke: #38bdf8;
      stroke-width: 5;
      fill: none;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .band-main {
      stroke: #0284c7;
      stroke-width: 6;
      stroke-linecap: round;
      fill: none;
      transition: stroke 0.2s;
    }

    .vibrating-fast .band-ghost { opacity: 0.35; }
    .vibrating-slow .band-ghost { opacity: 0.25; }

    .vibrating-fast .band-main {
      animation: vibrateFast 0.08s infinite alternate ease-in-out;
    }
    .vibrating-slow .band-main {
      animation: vibrateSlow 0.22s infinite alternate ease-in-out;
    }

    @keyframes vibrateFast {
      0% { d: path("M 60 100 Q 200 68 340 100"); }
      100% { d: path("M 60 100 Q 200 132 340 100"); }
    }

    @keyframes vibrateSlow {
      0% { d: path("M 60 100 Q 200 75 340 100"); }
      100% { d: path("M 60 100 Q 200 125 340 100"); }
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 420px;
    }

    .btn-pluck {
      flex: 1 1 140px;
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    }
    .btn-pluck:active {
      transform: translateY(1px);
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
    }

    .speed-toggle {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 10px;
      gap: 2px;
    }

    .toggle-btn {
      padding: 9px 14px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
  </style>
</head>
<body>

  <div id="statusBadge" class="status-badge">
    <span class="dot"></span>
    <span id="statusText">Rest Position</span>
  </div>

  <div id="stage" class="stage">
    <svg viewBox="0 0 400 200">
      <defs>
        <radialGradient id="pegGrad" cx="35%" cy="35%">
          <stop offset="0%" stop-color="#d97706" />
          <stop offset="100%" stop-color="#92400e" />
        </radialGradient>
      </defs>

      
      <g id="wavesGroup">
        <ellipse class="wave wave-1" cx="200" cy="100" rx="90" ry="50" />
        <ellipse class="wave wave-2" cx="200" cy="100" rx="90" ry="50" />
        <ellipse class="wave wave-3" cx="200" cy="100" rx="90" ry="50" />
      </g>

      
      <path class="band-ghost" d="M 60 100 Q 200 70 340 100" />
      <path class="band-ghost" d="M 60 100 Q 200 130 340 100" />

      
      <path id="band" class="band-main" d="M 60 100 Q 200 100 340 100" />

      
      <rect x="46" y="80" width="18" height="40" rx="4" fill="url(#pegGrad)" />
      <ellipse cx="55" cy="80" rx="9" ry="4" fill="#fcd34d" />
      <ellipse cx="55" cy="120" rx="9" ry="4" fill="#78350f" opacity="0.3" />

      
      <rect x="336" y="80" width="18" height="40" rx="4" fill="url(#pegGrad)" />
      <ellipse cx="345" cy="80" rx="9" ry="4" fill="#fcd34d" />
      <ellipse cx="345" cy="120" rx="9" ry="4" fill="#78350f" opacity="0.3" />
    </svg>
  </div>

  <div class="controls">
    <button id="pluckBtn" class="btn-pluck">
      <span>Pluck Me!</span> ⚡
    </button>

    <div class="speed-toggle">
      <button id="btnSlow" class="toggle-btn">Slow</button>
      <button id="btnFast" class="toggle-btn active">Fast</button>
    </div>
  </div>

  <script>
    let speed = 'fast';
    let timeoutId = null;
    let audioCtx = null;

    const stage = document.getElementById('stage');
    const badge = document.getElementById('statusBadge');
    const statusText = document.getElementById('statusText');
    const pluckBtn = document.getElementById('pluckBtn');
    const btnSlow = document.getElementById('btnSlow');
    const btnFast = document.getElementById('btnFast');

    function playAudioTone(freq, dur = 1.4) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);

        gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + dur);

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

        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch (e) {}
    }

    function pluck() {
      clearTimeout(timeoutId);
      stage.classList.remove('vibrating-fast', 'vibrating-slow');
      void stage.offsetWidth; // Trigger reflow

      const activeClass = speed === 'fast' ? 'vibrating-fast' : 'vibrating-slow';
      const toneFreq = speed === 'fast' ? 380 : 180;
      const duration = speed === 'fast' ? 1400 : 2000;

      stage.classList.add(activeClass);
      badge.classList.add('vibrating');
      statusText.textContent = 'Vibrating Back & Forth';

      playAudioTone(toneFreq, duration / 1000);

      timeoutId = setTimeout(() => {
        stage.classList.remove('vibrating-fast', 'vibrating-slow');
        badge.classList.remove('vibrating');
        statusText.textContent = 'Rest Position';
      }, duration);
    }

    btnSlow.addEventListener('click', () => {
      speed = 'slow';
      btnSlow.classList.add('active');
      btnFast.classList.remove('active');
      pluck();
    });

    btnFast.addEventListener('click', () => {
      speed = 'fast';
      btnFast.classList.add('active');
      btnSlow.classList.remove('active');
      pluck();
    });

    pluckBtn.addEventListener('click', pluck);
  </script>
</body>
</html>

If an object is completely still, it makes no sound at all. Sound only begins the exact moment something starts to move back and forth.

How can we prove that everyday instruments are really shaking back and forth, even when they move too fast to see clearly?

When you strike a drum, the tight drumhead bounces up and down hundreds of times in a single second. Plucking a guitar string makes it blur from moving so fast.

Over 400 years ago, the scientist Galileo Galilei noticed that scraping a blade across brass only made a musical ring when it carved a line of tiny, evenly spaced jumping marks.

<!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, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .status-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #64748b;
      transition: all 0.25s ease;
    }
    .status-bar.active {
      background: #e0f2fe;
      color: #0284c7;
      box-shadow: 0 0 0 2px #38bdf8;
    }

    .scene-wrap {
      width: 100%;
      max-width: 420px;
      aspect-ratio: 4 / 3;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    /* Sound Ripples */
    .ripple {
      fill: none;
      stroke: #38bdf8;
      stroke-width: 2.5;
      opacity: 0;
      transform-origin: 200px 145px;
    }
    .vibrating .r1 { animation: rip 1.6s infinite linear; }
    .vibrating .r2 { animation: rip 1.6s infinite linear 0.53s; }
    .vibrating .r3 { animation: rip 1.6s infinite linear 1.06s; }

    @keyframes rip {
      0% { r: 60px; opacity: 0.85; stroke-width: 3; }
      100% { r: 170px; opacity: 0; stroke-width: 0.5; }
    }

    /* Drum Skin Vibration */
    .vibrating #skin {
      animation: skinVibe 0.12s infinite alternate ease-in-out;
    }
    @keyframes skinVibe {
      0% { transform: translateY(0px) scaleY(1); }
      100% { transform: translateY(2px) scaleY(0.97); }
    }
    #skin { transform-origin: 200px 150px; transition: transform 0.2s ease; }

    /* Rice Grains */
    .grain {
      transition: transform 0.3s ease-out;
      transform-origin: center;
    }
    .vibrating .g1 { animation: jump1 0.34s infinite alternate ease-in-out; }
    .vibrating .g2 { animation: jump2 0.29s infinite alternate ease-in-out 0.05s; }
    .vibrating .g3 { animation: jump3 0.38s infinite alternate ease-in-out 0.1s; }
    .vibrating .g4 { animation: jump1 0.31s infinite alternate ease-in-out 0.08s; }
    .vibrating .g5 { animation: jump2 0.36s infinite alternate ease-in-out 0.02s; }
    .vibrating .g6 { animation: jump3 0.27s infinite alternate ease-in-out 0.12s; }
    .vibrating .g7 { animation: jump2 0.33s infinite alternate ease-in-out 0.07s; }

    @keyframes jump1 {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(-3px, -24px) rotate(35deg); }
    }
    @keyframes jump2 {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(4px, -32px) rotate(-40deg); }
    }
    @keyframes jump3 {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(-2px, -18px) rotate(20deg); }
    }

    /* Drumstick strike */
    #stick {
      transform-origin: 290px 40px;
      transform: rotate(0deg);
      transition: transform 0.15s ease-out;
    }
    #stick.strike {
      transform: rotate(-28deg);
    }

    /* Hand touch */
    #hand {
      transform-origin: 140px 60px;
      transform: translate(-30px, -40px) scale(0.85);
      opacity: 0;
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    #hand.touching {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
      margin-top: 4px;
    }
    .btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 700;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.15s, box-shadow 0.15s;
    }
    .btn-hit {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn-hit:active { background: #0369a1; }
    .btn-touch {
      background: #f1f5f9;
    }
    .btn-touch:active { background: #e2e8f0; }
  </style>
</head>
<body>

  <div id="statusBar" class="status-bar">
    <span id="statusIcon">🔇</span>
    <span id="statusText">Still: No Sound</span>
  </div>

  <div class="scene-wrap">
    <svg id="svgScene" viewBox="0 0 400 300">
      <defs>
        <linearGradient id="drumBody" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#be185d"/>
          <stop offset="40%" stop-color="#f43f5e"/>
          <stop offset="80%" stop-color="#e11d48"/>
          <stop offset="100%" stop-color="#9f1239"/>
        </linearGradient>
        <radialGradient id="skinGrad" cx="50%" cy="40%" r="50%">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="85%" stop-color="#f1f5f9"/>
          <stop offset="100%" stop-color="#cbd5e1"/>
        </radialGradient>
        <linearGradient id="rimGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#94a3b8"/>
          <stop offset="50%" stop-color="#f8fafc"/>
          <stop offset="100%" stop-color="#64748b"/>
        </linearGradient>
      </defs>

      
      <circle class="ripple r1" cx="200" cy="145" r="50" />
      <circle class="ripple r2" cx="200" cy="145" r="50" />
      <circle class="ripple r3" cx="200" cy="145" r="50" />

      
      <path d="M 90 150 L 90 220 C 90 248, 310 248, 310 220 L 310 150 Z" fill="url(#drumBody)" />
      
      <line x1="120" y1="160" x2="120" y2="230" stroke="#fecdd3" stroke-width="3" />
      <line x1="160" y1="165" x2="160" y2="235" stroke="#fecdd3" stroke-width="3" />
      <line x1="200" y1="168" x2="200" y2="237" stroke="#fecdd3" stroke-width="3" />
      <line x1="240" y1="165" x2="240" y2="235" stroke="#fecdd3" stroke-width="3" />
      <line x1="280" y1="160" x2="280" y2="230" stroke="#fecdd3" stroke-width="3" />

      
      <ellipse cx="200" cy="220" rx="110" ry="24" fill="none" stroke="url(#rimGrad)" stroke-width="5" />

      
      <g id="skin">
        <ellipse cx="200" cy="148" rx="110" ry="34" fill="url(#skinGrad)" stroke="url(#rimGrad)" stroke-width="6" />
        
        
        
        <g class="grain g1"><ellipse cx="195" cy="145" rx="5" ry="2.5" fill="#f59e0b" transform="rotate(15 195 145)"/></g>
        <g class="grain g2"><ellipse cx="210" cy="142" rx="5" ry="2.5" fill="#10b981" transform="rotate(-30 210 142)"/></g>
        <g class="grain g3"><ellipse cx="180" cy="148" rx="5" ry="2.5" fill="#8b5cf6" transform="rotate(45 180 148)"/></g>
        <g class="grain g4"><ellipse cx="225" cy="147" rx="5" ry="2.5" fill="#ef4444" transform="rotate(-10 225 147)"/></g>
        <g class="grain g5"><ellipse cx="190" cy="155" rx="5" ry="2.5" fill="#06b6d4" transform="rotate(70 190 155)"/></g>
        <g class="grain g6"><ellipse cx="215" cy="154" rx="5" ry="2.5" fill="#f97316" transform="rotate(-55 215 154)"/></g>
        <g class="grain g7"><ellipse cx="170" cy="142" rx="5" ry="2.5" fill="#ec4899" transform="rotate(25 170 142)"/></g>
        <g class="grain g2"><ellipse cx="232" cy="140" rx="5" ry="2.5" fill="#eab308" transform="rotate(60 232 140)"/></g>
        <g class="grain g4"><ellipse cx="202" cy="138" rx="5" ry="2.5" fill="#6366f1" transform="rotate(-20 202 138)"/></g>
        <g class="grain g1"><ellipse cx="160" cy="149" rx="5" ry="2.5" fill="#14b8a6" transform="rotate(40 160 149)"/></g>
      </g>

      
      <g id="stick">
        
        <polygon points="280,35 292,42 208,124 202,118" fill="#d97706" />
        
        <ellipse cx="204" cy="122" rx="6" ry="4.5" fill="#b45309" transform="rotate(-40 204 122)" />
      </g>

      
      <g id="hand">
        
        <path d="M 125 90 C 125 80 140 80 140 95 L 140 135 C 140 142 150 142 150 132 L 150 92 C 150 82 165 82 165 92 L 165 132 C 165 142 175 142 175 135 L 175 105 C 175 96 188 98 188 108 L 186 145 C 184 158 170 168 152 166 L 132 155 C 122 150 120 140 120 130 Z" fill="#fed7aa" stroke="#ea580c" stroke-width="2" />
        
        <path d="M 115 135 L 105 137 M 118 148 L 108 153" stroke="#ea580c" stroke-width="2" stroke-linecap="round" />
      </g>

      
      <text x="200" y="278" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Rice grains show vibrations</text>
    </svg>
  </div>

  <div class="controls">
    <button id="hitBtn" class="btn btn-hit" onclick="hitDrum()">
      <span>🥁</span> Hit Drum
    </button>
    <button id="touchBtn" class="btn btn-touch" onclick="touchDrum()">
      <span>✋</span> Touch Drum
    </button>
  </div>

  <script>
    let audioCtx = null;
    let isVibrating = false;

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
    }

    function playDrumSound() {
      initAudio();
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      
      const now = audioCtx.currentTime;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.type = 'triangle';
      osc.frequency.setValueAtTime(160, now);
      osc.frequency.exponentialRampToValueAtTime(50, now + 0.35);

      gain.gain.setValueAtTime(0.6, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.6);

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

      osc.start(now);
      osc.stop(now + 0.6);
    }

    function hitDrum() {
      const svg = document.getElementById('svgScene');
      const stick = document.getElementById('stick');
      const hand = document.getElementById('hand');
      const statusBar = document.getElementById('statusBar');
      const statusIcon = document.getElementById('statusIcon');
      const statusText = document.getElementById('statusText');

      // Release hand if touching
      hand.classList.remove('touching');

      // Drumstick strike animation
      stick.classList.add('strike');
      setTimeout(() => stick.classList.remove('strike'), 140);

      // Play Sound
      playDrumSound();

      // Start continuous vibration
      isVibrating = true;
      svg.classList.add('vibrating');
      statusBar.classList.add('active');
      statusIcon.textContent = '🔊';
      statusText.textContent = 'Vibrating: Sound ON';
    }

    function touchDrum() {
      const svg = document.getElementById('svgScene');
      const hand = document.getElementById('hand');
      const statusBar = document.getElementById('statusBar');
      const statusIcon = document.getElementById('statusIcon');
      const statusText = document.getElementById('statusText');

      // Place hand on drum
      hand.classList.add('touching');

      // Stop vibration immediately
      isVibrating = false;
      svg.classList.remove('vibrating');
      statusBar.classList.remove('active');
      statusIcon.textContent = '🔇';
      statusText.textContent = 'Still: No Sound';
    }
  </script>
</body>
</html>

If you gently touch a vibrating drumhead with your hand, the vibration stops. The instant the vibration stops, the sound dies out immediately.

What about your own voice when you talk, sing, or whisper to a friend?

Inside your neck, you have two stretchy folds of tissue called **vocal cords**. When you speak, air from your lungs pushes past them, forcing them to vibrate rapidly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Breathing vs Speaking</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
    }

    .cards-row {
      display: flex;
      flex-direction: row;
      gap: 12px;
      width: 100%;
      max-width: 580px;
      justify-content: center;
    }

    .diagram-panel {
      flex: 1;
      min-width: 0;
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .diagram-panel.speaking-panel {
      background: #fffbeb;
      border-color: #fde68a;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
      color: #0f172a;
    }

    .svg-wrap {
      width: 100%;
      max-width: 130px;
      height: 130px;
    }

    .badge {
      margin-top: 8px;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.25;
    }

    .badge-silent {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .badge-sound {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }

    /* Airflow animation */
    @keyframes airFlow {
      0% { stroke-dashoffset: 24; }
      100% { stroke-dashoffset: 0; }
    }
    .air-flow {
      stroke-dasharray: 6, 6;
      animation: airFlow 1.2s linear infinite;
    }

    /* Vocal cord fluttering animation - smooth 350ms duration */
    @keyframes flutterLeft {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(2.5px); }
    }
    @keyframes flutterRight {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(-2.5px); }
    }
    .flutter-l {
      animation: flutterLeft 0.35s ease-in-out infinite;
      transform-origin: 25px 75px;
    }
    .flutter-r {
      animation: flutterRight 0.35s ease-in-out infinite;
      transform-origin: 125px 75px;
    }

    /* Sound wave pulse */
    @keyframes wavePulse {
      0% { transform: scale(0.7); opacity: 0.85; }
      100% { transform: scale(1.3); opacity: 0; }
    }
    .sound-pulse {
      transform-origin: 75px 75px;
      animation: wavePulse 1.2s ease-out infinite;
    }
    .sound-pulse.d2 {
      animation-delay: 0.45s;
    }

    /* Action button */
    .btn-action {
      padding: 8px 18px;
      background: #ea580c;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .btn-action:hover {
      background: #d94e08;
      box-shadow: 0 3px 8px rgba(234, 88, 12, 0.4);
    }
    .btn-action:active {
      background: #c2410c;
    }

    /* Responsive mobile layout */
    @media (max-width: 480px) {
      body {
        padding: 8px;
        gap: 8px;
      }
      .cards-row {
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .diagram-panel {
        width: 100%;
        max-width: 330px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        padding: 8px 10px;
        gap: 12px;
      }
      .panel-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .svg-wrap {
        width: 90px;
        height: 90px;
        flex-shrink: 0;
      }
      .badge {
        margin-top: 4px;
      }
    }
  </style>
</head>
<body>

  <div class="cards-row">
    
    <div class="diagram-panel">
      <div class="svg-wrap">
        <svg viewBox="0 0 150 150" width="100%" height="100%">
          
          <circle cx="75" cy="75" r="62" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="3"/>
          <ellipse cx="75" cy="75" rx="42" ry="46" fill="#1e293b"/>
          
          
          <path d="M 33,35 Q 52,65 52,75 Q 52,85 33,115 Z" fill="#fda4af" stroke="#f43f5e" stroke-width="2"/>
          <path d="M 117,35 Q 98,65 98,75 Q 98,85 117,115 Z" fill="#fda4af" stroke="#f43f5e" stroke-width="2"/>

          
          <line x1="65" y1="125" x2="65" y2="25" stroke="#38bdf8" stroke-width="3.5" stroke-linecap="round" class="air-flow"/>
          <line x1="75" y1="130" x2="75" y2="20" stroke="#38bdf8" stroke-width="3.5" stroke-linecap="round" class="air-flow"/>
          <line x1="85" y1="125" x2="85" y2="25" stroke="#38bdf8" stroke-width="3.5" stroke-linecap="round" class="air-flow"/>
          <polygon points="65,20 61,28 69,28" fill="#38bdf8"/>
          <polygon points="75,15 71,23 79,23" fill="#38bdf8"/>
          <polygon points="85,20 81,28 89,28" fill="#38bdf8"/>
        </svg>
      </div>
      <div class="panel-content">
        <div class="panel-title">🫁 Breathing</div>
        <div class="badge badge-silent">Open Cords<br>No Vibration = No Sound</div>
      </div>
    </div>

    
    <div class="diagram-panel speaking-panel">
      <div class="svg-wrap">
        <svg viewBox="0 0 150 150" width="100%" height="100%">
          
          <circle cx="75" cy="75" r="45" fill="none" stroke="#f97316" stroke-width="2.5" class="sound-pulse"/>
          <circle cx="75" cy="75" r="55" fill="none" stroke="#f97316" stroke-width="2.5" class="sound-pulse d2"/>

          
          <circle cx="75" cy="75" r="62" fill="#fef3c7" stroke="#fde68a" stroke-width="3"/>
          <ellipse cx="75" cy="75" rx="42" ry="46" fill="#451a03"/>

          
          <path class="flutter-l" d="M 33,35 Q 73,65 73,75 Q 73,85 33,115 Z" fill="#fda4af" stroke="#e11d48" stroke-width="2.5"/>
          <path class="flutter-r" d="M 117,35 Q 77,65 77,75 Q 77,85 117,115 Z" fill="#fda4af" stroke="#e11d48" stroke-width="2.5"/>

          
          <line x1="75" y1="45" x2="75" y2="105" stroke="#f59e0b" stroke-width="2" stroke-dasharray="3,3"/>
          <circle cx="75" cy="75" r="4" fill="#f97316"/>
        </svg>
      </div>
      <div class="panel-content">
        <div class="panel-title">🗣️ Speaking / Humming</div>
        <div class="badge badge-sound">Vibrating Vocal Cords<br>= Sound!</div>
      </div>
    </div>
  </div>

  
  <button class="btn-action" id="humBtn" onclick="playHum()">
    <span>🔊</span> Tap to Hear Hum
  </button>

  <script>
    function playHum() {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(130, ctx.currentTime);
        
        // Gentle low-pass filter to sound like human humming
        const filter = ctx.createBiquadFilter();
        filter.type = 'lowpass';
        filter.frequency.setValueAtTime(400, ctx.currentTime);

        osc.connect(filter);
        filter.connect(gain);
        gain.connect(ctx.destination);

        gain.gain.setValueAtTime(0.01, ctx.currentTime);
        gain.gain.linearRampToValueAtTime(0.2, ctx.currentTime + 0.1);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.2);

        osc.start();
        osc.stop(ctx.currentTime + 1.2);
      } catch (e) {}
    }
  </script>
</body>
</html>

A common mistake is thinking that sound is an invisible magical force made out of nothing. In reality, every sound in the world requires physical matter to vibrate back and forth.

Hold a plastic ruler flat against the edge of your desk with half of it hanging over the side. Press the desk side down firmly with one hand, and flick the hanging end with the other.

Watch the blurry vibration with your eyes, listen to the twang with your ears, and then pinch the ruler with your fingers to see what happens to the sound.

science

How Sounds Are Made: Vibrating Objects. Demonstrate that all sounds are produced when an object vibrates back and forth rapidly.

What is sound and how is it made? - KS2 Science

How Sounds Are Made: Introduction to Sound (Year 4)

See the Sound: Hands-on Vibrations and Sound Waves Investigation

Pedagogical Strategy: Start with kinesthetic, multi-sensory experiences (feeling the larynx while humming, plucking a ruler over a desk edge, touching a sounding triangle). Transition from macro-vibrations (plucked elastic bands, rulers) to micro-vibrations (tuning forks, cymbals, voices) by using amplifiers of movement like water bowls, hanging ping-pong balls, and rice on clingfilm drums. Explicitly address the misconception that non-musical or quiet sounds do not vibrate by having pupils test everyday actions (whispering, tapping tables, clicking fingers) to establish the universal rule: No vibration = no sound.

How Sounds Are Made: Vibrating Objects

What is a Vibration?

Catching Vibrations in Action