<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      gap: 10px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      z-index: 10;
    }
    .step-btn {
      flex: 1;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      border: 2px solid #cbd5e1;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .step-btn .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #cbd5e1;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
    }
    .step-btn.active {
      border-color: #0284c7;
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }
    .step-btn.active .badge {
      background: #0284c7;
    }
    .step-btn:hover:not(.active) {
      border-color: #94a3b8;
      background: #f1f5f9;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Dashboard Info */
    .meters-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 14px;
      gap: 12px;
    }

    .meter-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .meter-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .energy-bars {
      display: flex;
      gap: 4px;
    }
    .bar {
      width: 18px;
      height: 12px;
      border-radius: 3px;
      background: #e2e8f0;
      transition: background 0.3s ease;
    }

    /* Sound Bubble Badge */
    .sound-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 16px;
      font-weight: 700;
      font-size: 13px;
      transition: all 0.3s ease;
    }

    /* Step specific themes */
    .state-1 .bar-1 { background: #22c55e; }
    .state-1 .sound-badge {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #cbd5e1;
      opacity: 0.85;
    }

    .state-2 .bar-1, .state-2 .bar-2, .state-2 .bar-3, .state-2 .bar-4 {
      background: #ea580c;
    }
    .state-2 .sound-badge {
      background: #ffedd5;
      color: #c2410c;
      border: 1.5px solid #ea580c;
      box-shadow: 0 2px 8px rgba(234, 88, 12, 0.2);
    }

    /* Vibration Animations - Smooth and safe (>=300ms) */
    @keyframes vibrateSmall {
      0%, 100% { d: path("M 70 100 Q 215 95 360 100"); }
      50% { d: path("M 70 100 Q 215 105 360 100"); }
    }
    @keyframes vibrateLarge {
      0%, 100% { d: path("M 70 100 Q 215 62 360 100"); }
      50% { d: path("M 70 100 Q 215 138 360 100"); }
    }

    .vibe-small {
      animation: vibrateSmall 0.35s infinite ease-in-out;
    }
    .vibe-large {
      animation: vibrateLarge 0.32s infinite ease-in-out;
    }
  </style>
</head>
<body class="state-1">

  
  <div class="controls">
    <button class="step-btn active" id="btnStep1" onclick="setStep(1)">
      <span class="badge">1</span> Small Pull (2 mm)
    </button>
    <button class="step-btn" id="btnStep2" onclick="setStep(2)">
      <span class="badge">2</span> Big Pull (15 mm)
    </button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 430 190" aria-label="Rubber band vibration demonstration">
      <defs>
        
        <linearGradient id="blurSmall" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0"/>
          <stop offset="50%" stop-color="#0284c7" stop-opacity="0.25"/>
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0"/>
        </linearGradient>
        <linearGradient id="blurLarge" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ea580c" stop-opacity="0"/>
          <stop offset="50%" stop-color="#ea580c" stop-opacity="0.32"/>
          <stop offset="100%" stop-color="#ea580c" stop-opacity="0"/>
        </linearGradient>

        
        <linearGradient id="skinGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#fed7aa"/>
          <stop offset="100%" stop-color="#fba465"/>
        </linearGradient>
        <linearGradient id="pegGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#64748b"/>
          <stop offset="100%" stop-color="#334155"/>
        </linearGradient>
      </defs>

      
      <line x1="70" y1="100" x2="360" y2="100" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 3"/>
      <text x="215" y="180" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="600" letter-spacing="0.5">REST POSITION</text>

      
      <g id="groupStep1" opacity="1" style="transition: opacity 0.25s ease;">
        
        <path d="M 70 100 Q 215 93 360 100 Q 215 107 70 100 Z" fill="url(#blurSmall)" />
        
        
        <path id="band1" class="vibe-small" d="M 70 100 Q 215 95 360 100" fill="none" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round"/>

        
        <line x1="215" y1="88" x2="215" y2="112" stroke="#0284c7" stroke-width="1.5"/>
        <line x1="210" y1="88" x2="220" y2="88" stroke="#0284c7" stroke-width="1.5"/>
        <line x1="210" y1="112" x2="220" y2="112" stroke="#0284c7" stroke-width="1.5"/>
        
        
        <rect x="145" y="52" width="140" height="22" rx="4" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1"/>
        <text x="215" y="67" text-anchor="middle" fill="#0369a1" font-size="11" font-weight="700">Small Amplitude (2 mm)</text>
      </g>

      
      <g id="groupStep2" opacity="0" style="transition: opacity 0.25s ease; pointer-events: none;">
        
        <path d="M 70 100 Q 215 55 360 100 Q 215 145 70 100 Z" fill="url(#blurLarge)" />
        
        
        <path d="M 70 100 Q 215 78 360 100" fill="none" stroke="#ea580c" stroke-width="1" opacity="0.35" stroke-dasharray="3 3"/>
        <path d="M 70 100 Q 215 122 360 100" fill="none" stroke="#ea580c" stroke-width="1" opacity="0.35" stroke-dasharray="3 3"/>

        
        <path id="band2" class="vibe-large" d="M 70 100 Q 215 62 360 100" fill="none" stroke="#ea580c" stroke-width="4.5" stroke-linecap="round"/>

        
        <line x1="215" y1="52" x2="215" y2="148" stroke="#ea580c" stroke-width="1.5"/>
        <line x1="209" y1="52" x2="221" y2="52" stroke="#ea580c" stroke-width="1.5"/>
        <line x1="209" y1="148" x2="221" y2="148" stroke="#ea580c" stroke-width="1.5"/>

        
        <rect x="140" y="16" width="150" height="24" rx="4" fill="#fff7ed" stroke="#fed7aa" stroke-width="1"/>
        <text x="215" y="32" text-anchor="middle" fill="#c2410c" font-size="11" font-weight="800">Large Amplitude (15 mm)</text>
      </g>

      
      <rect x="66" y="80" width="8" height="40" rx="3" fill="url(#pegGrad)"/>
      <rect x="356" y="80" width="8" height="40" rx="3" fill="url(#pegGrad)"/>

      
      <g id="leftHand">
        
        <path d="M 12 90 L 52 90 Q 58 90 60 94 L 62 106 Q 60 110 52 110 L 12 110 Z" fill="url(#skinGrad)" stroke="#ea580c" stroke-width="1" stroke-opacity="0.3"/>
        
        <rect x="8" y="88" width="22" height="24" rx="4" fill="#3b82f6"/>
        
        <rect x="58" y="85" width="14" height="9" rx="4" fill="#fed7aa" stroke="#c2410c" stroke-width="1" stroke-opacity="0.3"/>
        <rect x="60" y="93" width="14" height="9" rx="4" fill="#fed7aa" stroke="#c2410c" stroke-width="1" stroke-opacity="0.3"/>
        <rect x="60" y="101" width="14" height="9" rx="4" fill="#fed7aa" stroke="#c2410c" stroke-width="1" stroke-opacity="0.3"/>
        
        <path d="M 52 92 Q 58 84 66 87 Q 69 91 62 96 Z" fill="#fba465"/>
      </g>

      
      <g id="rightHand">
        
        <path d="M 418 90 L 378 90 Q 372 90 370 94 L 368 106 Q 370 110 378 110 L 418 110 Z" fill="url(#skinGrad)" stroke="#ea580c" stroke-width="1" stroke-opacity="0.3"/>
        
        <rect x="400" y="88" width="22" height="24" rx="4" fill="#3b82f6"/>
        
        <rect x="358" y="85" width="14" height="9" rx="4" fill="#fed7aa" stroke="#c2410c" stroke-width="1" stroke-opacity="0.3"/>
        <rect x="356" y="93" width="14" height="9" rx="4" fill="#fed7aa" stroke="#c2410c" stroke-width="1" stroke-opacity="0.3"/>
        <rect x="356" y="101" width="14" height="9" rx="4" fill="#fed7aa" stroke="#c2410c" stroke-width="1" stroke-opacity="0.3"/>
        
        <path d="M 378 92 Q 372 84 364 87 Q 361 91 368 96 Z" fill="#fba465"/>
      </g>

      
      <circle cx="70" cy="82" r="3.5" fill="#475569"/>
      <circle cx="360" cy="82" r="3.5" fill="#475569"/>
    </svg>
  </div>

  
  <div class="meters-row">
    <div class="meter-group">
      <span class="meter-label">Energy Transferred</span>
      <div class="energy-bars">
        <div class="bar bar-1"></div>
        <div class="bar bar-2"></div>
        <div class="bar bar-3"></div>
        <div class="bar bar-4"></div>
      </div>
    </div>

    <div class="sound-badge" id="soundBadge">
      <span id="soundIcon">🔉</span>
      <span id="soundText">Quiet</span>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playPluckTone(volume, freq) {
      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);
        osc.frequency.exponentialRampToValueAtTime(freq * 0.85, audioCtx.currentTime + 0.35);

        gain.gain.setValueAtTime(volume, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.35);

        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {
        // Fallback for audio restrictions
      }
    }

    function setStep(step) {
      const isStep1 = step === 1;
      document.body.className = isStep1 ? 'state-1' : 'state-2';
      
      document.getElementById('btnStep1').classList.toggle('active', isStep1);
      document.getElementById('btnStep2').classList.toggle('active', !isStep1);

      document.getElementById('groupStep1').style.opacity = isStep1 ? '1' : '0';
      document.getElementById('groupStep2').style.opacity = isStep1 ? '0' : '1';

      const soundText = document.getElementById('soundText');
      const soundIcon = document.getElementById('soundIcon');

      if (isStep1) {
        soundText.textContent = 'Quiet';
        soundIcon.textContent = '🔉';
        playPluckTone(0.06, 220);
      } else {
        soundText.textContent = 'LOUD!';
        soundIcon.textContent = '🔊';
        playPluckTone(0.3, 220);
      }
    }
  </script>
</body>
</html>

Linking Volume to the Strength and Size of Vibrations

<!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: transparent;
      color: #1e2945;
      padding: 8px;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }
    .scene-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .scene-card:active {
      transform: scale(0.98);
    }
    .scene-card.left {
      border-color: #06b6d4;
    }
    .scene-card.right {
      border-color: #f97316;
    }
    .header-tag {
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }
    .left .header-tag { color: #0891b2; }
    .right .header-tag { color: #ea580c; }
    
    .sub-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 10px;
      margin-bottom: 8px;
    }

    .svg-container {
      width: 100%;
      max-width: 240px;
      height: auto;
      aspect-ratio: 1 / 1;
    }

    /* Left Animations */
    .rice-gentle {
      animation: hopLow 2s ease-in-out infinite;
      transform-origin: center bottom;
    }
    .ripple-gentle {
      animation: rippleLow 2s ease-in-out infinite;
      transform-origin: 100px 105px;
    }
    .wave-gentle {
      animation: wavePulseLow 2s ease-in-out infinite;
    }

    /* Right Animations */
    .rice-hard {
      animation: hopHigh 2s ease-in-out infinite;
      transform-origin: center bottom;
    }
    .ripple-hard {
      animation: rippleHigh 2s ease-in-out infinite;
      transform-origin: 100px 105px;
    }
    .wave-hard {
      animation: wavePulseHigh 2s ease-in-out infinite;
    }

    @keyframes hopLow {
      0%, 100% { transform: translateY(0); }
      40% { transform: translateY(-7px); }
      50% { transform: translateY(0); }
    }
    @keyframes rippleLow {
      0%, 100% { transform: scale(0.95); opacity: 0.3; }
      40% { transform: scale(1.08); opacity: 0.9; }
    }
    @keyframes wavePulseLow {
      0%, 100% { opacity: 0.2; }
      40% { opacity: 1; }
    }

    @keyframes hopHigh {
      0%, 100% { transform: translateY(0); }
      35% { transform: translateY(-42px); }
      55% { transform: translateY(0); }
    }
    @keyframes rippleHigh {
      0%, 100% { transform: scale(0.85); opacity: 0.2; }
      35% { transform: scale(1.28); opacity: 1; }
    }
    @keyframes wavePulseHigh {
      0%, 100% { opacity: 0.2; transform: translateX(0); }
      35% { opacity: 1; transform: translateX(3px); }
    }

    .footer-label {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .left .footer-label { color: #0891b2; }
    .right .footer-label { color: #ea580c; }

    .tap-hint {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 4px;
    }

    @media (max-width: 380px) {
      .comparison-grid { gap: 8px; }
      .scene-card { padding: 8px 4px; }
      .header-tag { font-size: 12px; }
      .sub-tag { font-size: 10px; }
      .footer-label { font-size: 11px; }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="scene-card left" onclick="playDrumSound('gentle')">
      <div class="header-tag">Gentle Tap</div>
      <div class="sub-tag">Low Energy</div>
      
      <svg class="svg-container" viewBox="0 0 200 200">
        
        <path d="M 35 105 v 35 c 0 16 29 28 65 28 s 65 -12 65 -28 v -35" fill="#f1f5f9" stroke="#334155" stroke-width="3" />
        <line x1="60" y1="116" x2="60" y2="152" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3 3"/>
        <line x1="100" y1="120" x2="100" y2="156" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3 3"/>
        <line x1="140" y1="116" x2="140" y2="152" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3 3"/>
        
        
        <ellipse cx="100" cy="105" rx="65" ry="18" fill="#e2e8f0" stroke="#334155" stroke-width="3" />
        
        
        <ellipse class="ripple-gentle" cx="100" cy="105" rx="42" ry="11" fill="none" stroke="#06b6d4" stroke-width="2" stroke-dasharray="4 3"/>

        
        <g class="rice-gentle">
          
          <ellipse cx="80" cy="102" rx="4" ry="7" transform="rotate(20 80 102)" fill="#ffffff" stroke="#334155" stroke-width="1.5" />
          
          <ellipse cx="100" cy="100" rx="4" ry="7" transform="rotate(-15 100 100)" fill="#ffffff" stroke="#334155" stroke-width="1.5" />
          
          <ellipse cx="120" cy="103" rx="4" ry="7" transform="rotate(35 120 103)" fill="#ffffff" stroke="#334155" stroke-width="1.5" />
        </g>

        
        <g transform="translate(25, 20)">
          
          <path d="M 4 14 L 10 14 L 18 22 L 18 6 L 10 14 Z" fill="#64748b" />
          <rect x="2" y="11" width="3" height="6" fill="#64748b" />
          
          <path class="wave-gentle" d="M 23 10 A 7 7 0 0 1 23 18" fill="none" stroke="#06b6d4" stroke-width="2.5" stroke-linecap="round" />
        </g>
      </svg>

      <div class="footer-label">Quiet Sound</div>
      <div class="tap-hint">🔊 Tap to test</div>
    </div>

    
    <div class="scene-card right" onclick="playDrumSound('hard')">
      <div class="header-tag">Hard Hit</div>
      <div class="sub-tag">High Energy</div>
      
      <svg class="svg-container" viewBox="0 0 200 200">
        
        <path d="M 35 105 v 35 c 0 16 29 28 65 28 s 65 -12 65 -28 v -35" fill="#ffedd5" stroke="#334155" stroke-width="3" />
        <line x1="60" y1="116" x2="60" y2="152" stroke="#ea580c" stroke-width="2" stroke-dasharray="3 3"/>
        <line x1="100" y1="120" x2="100" y2="156" stroke="#ea580c" stroke-width="2" stroke-dasharray="3 3"/>
        <line x1="140" y1="116" x2="140" y2="152" stroke="#ea580c" stroke-width="2" stroke-dasharray="3 3"/>

        
        <ellipse cx="100" cy="105" rx="65" ry="18" fill="#fed7aa" stroke="#334155" stroke-width="3" />
        
        
        <ellipse class="ripple-hard" cx="100" cy="105" rx="55" ry="15" fill="none" stroke="#f97316" stroke-width="3" stroke-dasharray="6 4"/>
        <ellipse class="ripple-hard" cx="100" cy="105" rx="32" ry="9" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-dasharray="4 3"/>

        
        <g class="rice-hard">
          
          <line x1="78" y1="102" x2="78" y2="114" stroke="#f97316" stroke-width="2" stroke-linecap="round" />
          <line x1="100" y1="98" x2="100" y2="112" stroke="#f97316" stroke-width="2" stroke-linecap="round" />
          <line x1="122" y1="104" x2="122" y2="116" stroke="#f97316" stroke-width="2" stroke-linecap="round" />

          
          <ellipse cx="78" cy="98" rx="4.5" ry="8" transform="rotate(-30 78 98)" fill="#ffffff" stroke="#334155" stroke-width="1.5" />
          
          <ellipse cx="100" cy="92" rx="4.5" ry="8" transform="rotate(15 100 92)" fill="#ffffff" stroke="#334155" stroke-width="1.5" />
          
          <ellipse cx="122" cy="100" rx="4.5" ry="8" transform="rotate(45 122 100)" fill="#ffffff" stroke="#334155" stroke-width="1.5" />
        </g>

        
        <g transform="translate(25, 20)">
          
          <path d="M 4 14 L 10 14 L 18 22 L 18 6 L 10 14 Z" fill="#334155" />
          <rect x="2" y="11" width="3" height="6" fill="#334155" />
          
          <path class="wave-hard" d="M 23 10 A 7 7 0 0 1 23 18" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" />
          <path class="wave-hard" d="M 28 6 A 13 13 0 0 1 28 22" fill="none" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" />
          <path class="wave-hard" d="M 33 2 A 19 19 0 0 1 33 26" fill="none" stroke="#ea580c" stroke-width="3" stroke-linecap="round" />
        </g>
      </svg>

      <div class="footer-label">Loud Sound</div>
      <div class="tap-hint">🔊 Tap to test</div>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playDrumSound(type) {
      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.connect(gain);
      gain.connect(audioCtx.destination);

      if (type === 'gentle') {
        // Soft low tap
        osc.frequency.setValueAtTime(110, now);
        osc.frequency.exponentialRampToValueAtTime(50, now + 0.15);
        gain.gain.setValueAtTime(0.12, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.15);
        osc.start(now);
        osc.stop(now + 0.15);
      } else {
        // Loud punchy boom
        osc.frequency.setValueAtTime(180, now);
        osc.frequency.exponentialRampToValueAtTime(40, now + 0.4);
        gain.gain.setValueAtTime(0.6, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.4);
        osc.start(now);
        osc.stop(now + 0.4);
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sound Wave Amplitude</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      user-select: none;
    }

    .main-grid {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .wave-section {
      background: transparent;
      border: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .wave-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .badge-group {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .badge-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
    }

    .tag {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .tag-quiet {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }

    .tag-loud {
      background: #f3e8ff;
      color: #7c3aed;
      border: 1px solid #e9d5ff;
    }

    .sound-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .sound-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .sound-btn:active {
      background: #f1f5f9;
    }

    .sound-btn:focus-visible {
      outline: 2px solid #3b82f6;
      outline-offset: 1px;
    }

    .wave-visual-wrap {
      width: 100%;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .baseline {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 5 4;
    }

    .wave-quiet {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .wave-loud {
      fill: none;
      stroke: #7c3aed;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .svg-text-base {
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      fill: #64748b;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    .svg-text-quiet {
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 700;
      fill: #0284c7;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3.5px;
      stroke-linejoin: round;
    }

    .svg-text-loud {
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 700;
      fill: #7c3aed;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3.5px;
      stroke-linejoin: round;
    }

    .divider {
      height: 1px;
      background: #e2e8f0;
      width: 100%;
      margin: 2px 0;
    }

    @media (max-width: 440px) {
      .badge-title {
        font-size: 12.5px;
      }
      .tag {
        font-size: 10.5px;
        padding: 2px 6px;
      }
      .sound-btn {
        padding: 3px 8px;
        font-size: 11px;
      }
      .svg-text-base {
        font-size: 10px;
      }
      .svg-text-quiet, .svg-text-loud {
        font-size: 10.5px;
      }
    }
  </style>
</head>
<body>

<div class="main-grid">
  
  <div class="wave-section">
    <div class="wave-header">
      <div class="badge-group">
        <span class="badge-title">Small Amplitude = Quiet Volume</span>
        <span class="tag tag-quiet">Low Energy</span>
      </div>
      <button class="sound-btn" onclick="playSound(280, 0.04)" aria-label="Listen to quiet sound">
        <span>🔊</span> Listen (Quiet)
      </button>
    </div>

    <div class="wave-visual-wrap">
      <svg viewBox="0 0 540 110" preserveAspectRatio="xMidYMid meet">
        
        <line x1="20" y1="58" x2="520" y2="58" class="baseline" />

        
        <path id="quietWave" class="wave-quiet" />

        
        <g>
          
          <polygon points="60,34 56.5,41 63.5,41" fill="#0284c7" />
          
          <line x1="60" y1="38" x2="60" y2="54" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          
          <polygon points="60,58 56.5,51 63.5,51" fill="#0284c7" />
        </g>

        
        <text x="69" y="49" class="svg-text-quiet">Amplitude</text>

        
        <text x="430" y="52" class="svg-text-base">Resting Position</text>
      </svg>
    </div>
  </div>

  <div class="divider"></div>

  
  <div class="wave-section">
    <div class="wave-header">
      <div class="badge-group">
        <span class="badge-title">Large Amplitude = Loud Volume</span>
        <span class="tag tag-loud">High Energy</span>
      </div>
      <button class="sound-btn" onclick="playSound(280, 0.35)" aria-label="Listen to loud sound">
        <span>🔊</span> Listen (Loud)
      </button>
    </div>

    <div class="wave-visual-wrap">
      <svg viewBox="0 0 540 130" preserveAspectRatio="xMidYMid meet">
        
        <line x1="20" y1="65" x2="520" y2="65" class="baseline" />

        
        <path id="loudWave" class="wave-loud" />

        
        <g>
          
          <line x1="60" y1="20" x2="60" y2="62" stroke="#c084fc" stroke-width="6" opacity="0.45" stroke-linecap="round" />
          
          <polygon points="60,17 56,26 64,26" fill="#7c3aed" />
          
          <line x1="60" y1="23" x2="60" y2="59" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round" />
          
          <polygon points="60,65 56,56 64,56" fill="#7c3aed" />
        </g>

        
        <text x="70" y="44" class="svg-text-loud">Amplitude</text>

        
        <text x="430" y="59" class="svg-text-base">Resting Position</text>
      </svg>
    </div>
  </div>
</div>

<script>
  // Generate smooth sine wave paths ending cleanly before the labels
  function generateSinePath(startX, endX, baseline, amp, wavelength) {
    let d = `M ${startX} ${baseline}`;
    for (let x = startX; x <= endX; x += 1.5) {
      const y = baseline - amp * Math.sin(((x - startX) / wavelength) * Math.PI * 2);
      d += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
    }
    return d;
  }

  // Wavelength = 160px; Peak at startX + 40px = 60px
  // Quiet wave: baseline = 58, amp = 24
  document.getElementById('quietWave').setAttribute('d', generateSinePath(20, 400, 58, 24, 160));

  // Loud wave: baseline = 65, amp = 48
  document.getElementById('loudWave').setAttribute('d', generateSinePath(20, 400, 65, 48, 160));

  // Audio tone playback synthesizer
  let audioCtx = null;
  function playSound(freq, gainVal) {
    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 = 'sine';
      osc.frequency.setValueAtTime(freq, audioCtx.currentTime);

      gain.gain.setValueAtTime(gainVal, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.5);

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

      osc.start();
      osc.stop(audioCtx.currentTime + 0.5);
    } catch (e) {
      console.warn("Audio playback not supported", e);
    }
  }
</script>

</body>
</html>

science.ks2.y2.t4.s4

Aligned learning resources

Related diagrams