<!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;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;
      overflow-x: hidden;
    }

    .header-hint {
      font-size: 15px;
      font-weight: 700;
      color: #059669;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      padding: 6px 16px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }

    .track-container {
      position: relative;
      width: 100%;
      max-width: 580px;
      height: 140px;
      margin: auto 0;
      display: flex;
      align-items: center;
    }

    .dotted-path {
      position: absolute;
      top: 50%;
      left: 36px;
      right: 48px;
      height: 6px;
      border-bottom: 4px dashed #cbd5e1;
      transform: translateY(-50%);
      z-index: 1;
    }

    .active-progress-path {
      position: absolute;
      top: 50%;
      left: 36px;
      width: 0%;
      height: 6px;
      border-bottom: 5px solid #10b981;
      transform: translateY(-50%);
      z-index: 2;
      transition: width 0.1s linear;
    }

    .sound-nodes {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 55px;
      padding-right: 75px;
      z-index: 3;
    }

    .sound-node {
      font-size: 26px;
      font-weight: 900;
      color: #94a3b8;
      background: #f8fafc;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
    }

    .sound-node.lit {
      color: #ffffff;
      background: #10b981;
      border-color: #059669;
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
      transform: scale(1.18);
    }

    .snake-actor {
      position: absolute;
      top: 50%;
      left: 4px;
      transform: translateY(-50%);
      font-size: 42px;
      line-height: 1;
      z-index: 5;
      cursor: pointer;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
      transition: left 0.1s linear;
    }

    .sun-goal {
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%);
      font-size: 52px;
      line-height: 1;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sun-goal.glow {
      transform: translateY(-50%) scale(1.22);
      filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.7));
    }

    .sparkles {
      position: absolute;
      top: -18px;
      right: -8px;
      font-size: 22px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .sun-goal.glow .sparkles {
      opacity: 1;
    }

    .finish-banner {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .finish-label {
      font-size: 26px;
      font-weight: 900;
      letter-spacing: 1px;
      color: #ea580c;
      background: #fff7ed;
      border: 2px solid #fdba74;
      border-radius: 12px;
      padding: 4px 18px;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.3s ease;
    }

    .finish-label.show {
      opacity: 1;
      transform: translateY(0);
    }

    .action-btn {
      appearance: none;
      border: none;
      background: #10b981;
      color: #ffffff;
      font-size: 17px;
      font-weight: 700;
      padding: 12px 28px;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s, box-shadow 0.2s;
    }

    .action-btn:active {
      background: #059669;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
    }

    .action-btn:disabled {
      background: #94a3b8;
      box-shadow: none;
      cursor: default;
    }
  </style>
</head>
<body>

  <div class="header-hint">
    <span>▶ Tap snake to stretch /s/</span>
  </div>

  <div class="track-container" id="trackBox">
    <div class="dotted-path"></div>
    <div class="active-progress-path" id="progressPath"></div>

    <div class="sound-nodes">
      <div class="sound-node" id="node0">s</div>
      <div class="sound-node" id="node1">s</div>
      <div class="sound-node" id="node2">s</div>
      <div class="sound-node" id="node3">s</div>
      <div class="sound-node" id="node4">s</div>
    </div>

    <div class="snake-actor" id="snake">🐍</div>

    <div class="sun-goal" id="sun">
      <span class="sparkles">✨</span>
      <span>☀️</span>
    </div>
  </div>

  <div class="finish-banner">
    <div class="finish-label" id="finishLabel">sssss-sun! ☀️</div>
  </div>

  <button class="action-btn" id="playBtn">
    <span>Stretch /s/ Sound</span>
    <span>▶</span>
  </button>

  <script>
    const snake = document.getElementById('snake');
    const sun = document.getElementById('sun');
    const progressPath = document.getElementById('progressPath');
    const finishLabel = document.getElementById('finishLabel');
    const playBtn = document.getElementById('playBtn');
    const nodes = [
      document.getElementById('node0'),
      document.getElementById('node1'),
      document.getElementById('node2'),
      document.getElementById('node3'),
      document.getElementById('node4')
    ];

    let audioCtx = null;
    let isStretching = false;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playContinuousHiss(durationSec) {
      try {
        const ctx = getAudioContext();
        const bufferSize = ctx.sampleRate * durationSec;
        const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const output = buffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) {
          output[i] = Math.random() * 2 - 1;
        }

        const whiteNoise = ctx.createBufferSource();
        whiteNoise.buffer = buffer;

        const filter = ctx.createBiquadFilter();
        filter.type = 'bandpass';
        filter.frequency.setValueAtTime(4500, ctx.currentTime);
        filter.Q.setValueAtTime(3.0, ctx.currentTime);

        const gainNode = ctx.createGain();
        gainNode.gain.setValueAtTime(0.01, ctx.currentTime);
        gainNode.gain.linearRampToValueAtTime(0.2, ctx.currentTime + 0.2);
        gainNode.gain.setValueAtTime(0.2, ctx.currentTime + durationSec - 0.2);
        gainNode.gain.linearRampToValueAtTime(0.01, ctx.currentTime + durationSec);

        whiteNoise.connect(filter);
        filter.connect(gainNode);
        gainNode.connect(ctx.destination);

        whiteNoise.start();
        whiteNoise.stop(ctx.currentTime + durationSec);
      } catch (e) {}
    }

    function playChime() {
      try {
        const ctx = getAudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(523.25, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(783.99, ctx.currentTime + 0.35);
        gain.gain.setValueAtTime(0.3, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.5);
      } catch (e) {}
    }

    function runStretchyAnimation() {
      if (isStretching) return;
      isStretching = true;
      playBtn.disabled = true;

      // Reset
      nodes.forEach(n => n.classList.remove('lit'));
      sun.classList.remove('glow');
      finishLabel.classList.remove('show');
      snake.style.left = '4px';
      progressPath.style.width = '0%';

      const totalDuration = 2200; // 2.2 seconds stretch
      playContinuousHiss(totalDuration / 1000);

      const startTime = performance.now();
      const maxLeftPercent = 75;

      function frame(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / totalDuration, 1);

        // Update snake and progress bar
        snake.style.left = `calc(4px + ${progress * maxLeftPercent}%)`;
        progressPath.style.width = `${progress * 82}%`;

        // Highlight nodes sequentially
        nodes.forEach((node, idx) => {
          const threshold = (idx + 0.6) / nodes.length;
          if (progress >= threshold * 0.9) {
            node.classList.add('lit');
          }
        });

        if (progress < 1) {
          requestAnimationFrame(frame);
        } else {
          // Arrived at Sun
          sun.classList.add('glow');
          finishLabel.classList.add('show');
          playChime();

          setTimeout(() => {
            isStretching = false;
            playBtn.disabled = false;
          }, 1500);
        }
      }

      requestAnimationFrame(frame);
    }

    snake.addEventListener('click', runStretchyAnimation);
    playBtn.addEventListener('click', runStretchyAnimation);
  </script>
</body>
</html>

Listening to Stretchy Beginning Sounds (/m/, /s/, /f/)

<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #f0f9ff;
      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: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    /* Top Sound Label Display */
    .sound-banner {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 800;
      color: #0284c7;
      letter-spacing: 1px;
      transition: color 0.3s ease;
    }

    .note-icon {
      font-size: 18px;
      opacity: 0.4;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .stretching .note-icon {
      opacity: 1;
      transform: translateY(-3px);
    }

    /* Stretchy Band Character Area */
    .band-stage {
      width: 100%;
      height: 110px;
      background: #ffffff;
      border: 2px solid #bae6fd;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
      touch-action: manipulation;
    }

    .band-character {
      width: 120px;
      height: 48px;
      background: #38bdf8;
      border: 3px solid #0284c7;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 16px;
      box-shadow: 0 4px 0 #0284c7;
      transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
      position: relative;
    }

    .band-face {
      display: flex;
      align-items: center;
      gap: 14px;
      transition: gap 0.35s ease;
    }
    .eye {
      width: 8px;
      height: 10px;
      background: #0f172a;
      border-radius: 4px;
    }
    .mouth {
      width: 12px;
      height: 6px;
      border-bottom: 3px solid #0f172a;
      border-radius: 0 0 8px 8px;
      transition: width 0.3s ease, height 0.3s ease;
    }

    .band-pull-label {
      position: absolute;
      bottom: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
    }

    /* Stretched State */
    .band-stage.active .band-character {
      width: 250px;
      background: #7dd3fc;
    }
    .band-stage.active .band-face {
      gap: 32px;
    }
    .band-stage.active .mouth {
      width: 18px;
      height: 8px;
      border-bottom-width: 3px;
    }

    /* Sound Badges Grid */
    .badges-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    .badge-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 4px 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      min-height: 84px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      touch-action: manipulation;
    }

    .badge-btn:hover {
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15);
    }

    .badge-btn.selected {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px #bae6fd;
      background: #f8fafc;
    }

    .badge-emoji {
      font-size: 28px;
      line-height: 1;
    }

    .badge-sound {
      font-size: 15px;
      font-weight: 800;
      color: #0284c7;
    }

    .badge-word {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>
  <div class="diagram-area">
    
    <div class="sound-banner" id="banner">
      <span class="note-icon">🎵</span>
      <span id="bannerText">mmmooooon</span>
      <span class="note-icon">🎶</span>
    </div>

    
    <div class="band-stage" id="bandStage" title="Tap to stretch!">
      <div class="band-character">
        <div class="band-face">
          <div class="eye"></div>
          <div class="mouth"></div>
          <div class="eye"></div>
        </div>
      </div>
      <div class="band-pull-label" id="stagePrompt">👆 Tap to Stretch!</div>
    </div>

    
    <div class="badges-grid">
      <button class="badge-btn selected" data-sound="m" data-text="mmmooooon" data-prompt="/m/ ... Moon">
        <span class="badge-emoji">🌙</span>
        <span class="badge-sound">/m/</span>
        <span class="badge-word">Moon</span>
      </button>
      <button class="badge-btn" data-sound="s" data-text="sssuuuuun" data-prompt="/s/ ... Sun">
        <span class="badge-emoji">☀️</span>
        <span class="badge-sound">/s/</span>
        <span class="badge-word">Sun</span>
      </button>
      <button class="badge-btn" data-sound="f" data-text="fffiiissshh" data-prompt="/f/ ... Fish">
        <span class="badge-emoji">🐟</span>
        <span class="badge-sound">/f/</span>
        <span class="badge-word">Fish</span>
      </button>
    </div>
  </div>

  <script>
    const banner = document.getElementById('banner');
    const bannerText = document.getElementById('bannerText');
    const bandStage = document.getElementById('bandStage');
    const stagePrompt = document.getElementById('stagePrompt');
    const badges = document.querySelectorAll('.badge-btn');

    let currentSound = 'm';
    let currentStretchText = 'mmmooooon';
    let isStretched = false;

    function playTone(freq, duration = 0.4) {
      try {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch(e) {}
    }

    function stretchBand() {
      isStretched = true;
      bandStage.classList.add('active');
      banner.classList.add('stretching');
      bannerText.textContent = currentStretchText;
      stagePrompt.textContent = 'Hold sound... release!';
      
      const freqs = { 'm': 261.63, 's': 329.63, 'f': 392.00 };
      playTone(freqs[currentSound] || 300, 0.6);
    }

    function releaseBand() {
      if (!isStretched) return;
      isStretched = false;
      bandStage.classList.remove('active');
      banner.classList.remove('stretching');
      stagePrompt.textContent = '👆 Tap to Stretch!';
      playTone(523.25, 0.2);
    }

    // Touch & Click toggle
    bandStage.addEventListener('pointerdown', (e) => {
      e.preventDefault();
      stretchBand();
    });

    window.addEventListener('pointerup', () => {
      if (isStretched) releaseBand();
    });

    window.addEventListener('pointercancel', () => {
      if (isStretched) releaseBand();
    });

    // Badge Selection
    badges.forEach(btn => {
      btn.addEventListener('click', () => {
        badges.forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
        currentSound = btn.getAttribute('data-sound');
        currentStretchText = btn.getAttribute('data-text');
        bannerText.textContent = currentStretchText;
        
        stretchBand();
        setTimeout(releaseBand, 600);
      });
    });
  </script>
</body>
</html>

<!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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #faf8ff;
      color: #2e1065;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      min-height: 100%;
      overflow-x: hidden;
    }

    /* Top: Character humming */
    .character-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-top: 4px;
    }

    .face-avatar {
      position: relative;
      width: 64px;
      height: 64px;
      background: #fef08a;
      border: 3px solid #f59e0b;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    }

    .eyes {
      display: flex;
      gap: 14px;
      margin-top: -4px;
    }

    .eye {
      width: 7px;
      height: 9px;
      background: #1e1b4b;
      border-radius: 50%;
    }

    .lips-closed {
      width: 16px;
      height: 4px;
      background: #dc2626;
      border-radius: 4px;
      margin-top: 6px;
      transition: transform 0.2s ease;
    }

    .speech-bubble {
      background: #7c3aed;
      color: #ffffff;
      padding: 8px 16px;
      border-radius: 18px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 1px;
      position: relative;
      box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
      transition: all 0.3s ease;
      min-width: 160px;
      text-align: center;
    }

    .speech-bubble::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 6px 8px 6px 0;
      border-style: solid;
      border-color: transparent #7c3aed transparent transparent;
    }

    /* Middle: Sound Stretch Trail */
    .trail-container {
      width: 100%;
      max-width: 380px;
      background: #ffffff;
      border: 2px solid #e9d5ff;
      border-radius: 20px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 6px 20px rgba(124, 58, 237, 0.08);
    }

    .trail-letters {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      padding: 0 6px;
      position: relative;
    }

    /* Elastic connecting band behind letters */
    .band-line {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 50%;
      height: 8px;
      background: #f3e8ff;
      border-radius: 4px;
      z-index: 1;
      transform: translateY(-50%);
    }

    .band-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #a855f7, #f59e0b);
      border-radius: 4px;
      transition: width 0.25s ease;
    }

    .letter-node {
      position: relative;
      z-index: 2;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #f3e8ff;
      color: #a855f7;
      font-size: 24px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .letter-node.active {
      background: #7c3aed;
      color: #ffffff;
      transform: scale(1.15);
      box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35);
    }

    .moon-target {
      font-size: 32px;
      line-height: 1;
      filter: grayscale(80%) opacity(0.5);
      transition: all 0.3s ease;
      transform: scale(1);
    }

    .moon-target.active {
      filter: grayscale(0%) opacity(1);
      transform: scale(1.25);
    }

    /* Bottom: Interactive Stretcher Controls */
    .controls-wrapper {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .slider-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .slider-label {
      font-size: 13px;
      font-weight: 700;
      color: #6b21a8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      justify-content: space-between;
      padding: 0 4px;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 16px;
      border-radius: 10px;
      background: #e9d5ff;
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #f59e0b;
      border: 3px solid #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      cursor: grab;
      transition: transform 0.15s ease;
    }

    input[type="range"]::-moz-range-thumb {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #f59e0b;
      border: 3px solid #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      cursor: grab;
    }

    .action-row {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    .btn-stretch {
      flex: 2;
      background: #7c3aed;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .btn-stretch:active {
      opacity: 0.9;
    }

    .btn-reset {
      flex: 1;
      background: #f3e8ff;
      color: #6b21a8;
      border: 1px solid #d8b4fe;
      border-radius: 12px;
      padding: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }

    .btn-reset:active {
      background: #e9d5ff;
    }
  </style>
</head>
<body>

  
  <div class="character-stage">
    <div class="face-avatar" id="avatarFace">
      <div class="eyes">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
      <div class="lips-closed" id="lips"></div>
    </div>
    <div class="speech-bubble" id="speechBubble">m</div>
  </div>

  
  <div class="trail-container">
    <div class="trail-letters">
      <div class="band-line">
        <div class="band-fill" id="bandFill"></div>
      </div>
      <div class="letter-node active" id="node-0">m</div>
      <div class="letter-node" id="node-1">m</div>
      <div class="letter-node" id="node-2">m</div>
      <div class="letter-node" id="node-3">m</div>
      <div class="moon-target" id="moonTarget">🌙</div>
    </div>
  </div>

  
  <div class="controls-wrapper">
    <div class="slider-container">
      <div class="slider-label">
        <span>Start</span>
        <span>Stretch Sound ➔</span>
      </div>
      <input type="range" id="soundSlider" min="0" max="4" value="0" step="1" aria-label="Stretch sound slider">
    </div>

    <div class="action-row">
      <button class="btn-stretch" id="stretchBtn" onclick="stepStretch()">
        <span>Stretch Sound</span>
        <span>👉</span>
      </button>
      <button class="btn-reset" onclick="resetSound()">Reset</button>
    </div>
  </div>

  <script>
    const slider = document.getElementById('soundSlider');
    const speech = document.getElementById('speechBubble');
    const band = document.getElementById('bandFill');
    const moon = document.getElementById('moonTarget');
    const lips = document.getElementById('lips');
    const nodes = [
      document.getElementById('node-0'),
      document.getElementById('node-1'),
      document.getElementById('node-2'),
      document.getElementById('node-3')
    ];

    const phrases = [
      'm',
      'm - m',
      'm - m - m',
      'm - m - m - m',
      'mmmmm-moon! 🌙'
    ];

    // Play synthesized hum / tone
    function playHumTone(step) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        
        if (step === 4) {
          // Final cheerful chord on reaching moon
          [220, 277.18, 329.63, 440].forEach((freq, i) => {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(freq, ctx.currentTime + i * 0.05);
            gain.gain.setValueAtTime(0.12, ctx.currentTime + i * 0.05);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.6 + i * 0.05);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(ctx.currentTime + i * 0.05);
            osc.stop(ctx.currentTime + 0.7 + i * 0.05);
          });
        } else {
          // Continuous humming tone increasing slightly in pitch
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          const baseFreq = 180 + step * 25;
          osc.frequency.setValueAtTime(baseFreq, ctx.currentTime);
          gain.gain.setValueAtTime(0.15, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.35);
        }
      } catch (e) {
        // Audio error silent fallback
      }
    }

    function updateState(val, triggerAudio = false) {
      val = parseInt(val, 10);
      slider.value = val;

      // Update letters active state
      nodes.forEach((node, idx) => {
        if (idx <= val) {
          node.classList.add('active');
        } else {
          node.classList.remove('active');
        }
      });

      // Update band percentage
      band.style.width = (val * 25) + '%';

      // Update moon and text
      if (val === 4) {
        moon.classList.add('active');
        speech.style.background = '#f59e0b';
        speech.style.color = '#1e1b4b';
        speech.textContent = phrases[4];
        lips.style.transform = 'scaleX(1.4)';
      } else {
        moon.classList.remove('active');
        speech.style.background = '#7c3aed';
        speech.style.color = '#ffffff';
        speech.textContent = phrases[val];
        lips.style.transform = 'scaleX(1)';
      }

      if (triggerAudio) {
        playHumTone(val);
      }
    }

    slider.addEventListener('input', (e) => {
      updateState(e.target.value, true);
    });

    function stepStretch() {
      let cur = parseInt(slider.value, 10);
      let next = (cur + 1) > 4 ? 0 : cur + 1;
      updateState(next, true);
    }

    function resetSound() {
      updateState(0, false);
    }

    // Initialize resting state
    updateState(0, false);
  </script>
</body>
</html>

OGE.0.RF.3

Aligned learning resources

Related diagrams