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

What if you could pull words apart like colorful building blocks? When you listen closely to a spoken word, you can chop it into every single sound.

A **beginning blend** is two consonant sounds at the start of a word that slide close together, but each letter still keeps its own separate sound.

Consonant blends differ fundamentally from **consonant digraphs**. A digraph uses two letters to represent $1\text{ phoneme}$ (e.g., "sh" $\rightarrow$ /ʃ/), whereas blends represent $2\text{ phonemes}$ (e.g., "bl" $\rightarrow$ /b/ /l/, "br" $\rightarrow$ /b/ /r/, "cl" $\rightarrow$ /k/ /l/, "cr" $\rightarrow$ /k/ /r/).

**Pure articulation** without the schwa sound (**/ə/**) is essential for accurate segmentation. Make crisp **/b/** and **/k/** sounds rather than "**buh**" or "**kuh**" so words stay precise.

How do we chop words that start with **bl** and **cl**?

Say the word **clap** out loud. It starts with the blend **cl**, which splits into two quick sounds: **/k/** and **/l/**.

<!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">
  <title>Segmenting Beginning Blends</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      background: transparent;
      color: #1e2945;
    }

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tab-btn {
      padding: 8px 16px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      font-weight: 700;
      font-size: 15px;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.25);
    }

    .stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* Word Box */
    .word-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .word-badge {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 2px;
      color: #1e2945;
      padding: 6px 20px;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .word-badge .blend-hl {
      color: #0284c7;
      border-bottom: 3px solid #22b7ff;
    }

    /* Splitter Arrow Diagram */
    .split-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .blend-card {
      background: #0284c7;
      color: #ffffff;
      font-size: 24px;
      font-weight: 800;
      padding: 10px 18px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
    }

    .arrow-icon {
      font-size: 22px;
      color: #94a3b8;
      font-weight: 800;
    }

    .blend-parts {
      display: flex;
      gap: 8px;
    }

    .part-chip {
      background: #ffffff;
      border: 2px solid #38bdf8;
      color: #0284c7;
      font-size: 20px;
      font-weight: 800;
      padding: 8px 14px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    /* 4 Sound Boxes (Elkonin style) */
    .boxes-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .sound-boxes {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
    }

    .sound-box {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .sound-box.blend-sound {
      border-color: #bae6fd;
      background: #f8fafc;
    }

    .sound-box.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.3);
      transform: translateY(-2px);
    }

    .sound-letter {
      font-size: 22px;
      font-weight: 800;
      color: #1e2945;
    }

    .sound-box.blend-sound .sound-letter {
      color: #0284c7;
    }

    .sound-phoneme {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      transition: background 0.25s ease;
    }

    .sound-box.active .dot {
      background: #22b7ff;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 12px;
      margin-top: 4px;
    }

    .btn-action {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      padding: 10px 22px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.35);
      transition: opacity 0.2s ease;
    }

    .btn-action:active {
      opacity: 0.85;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" data-blend="cl">cl • clap</button>
    <button class="tab-btn" data-blend="bl">bl • blob</button>
    <button class="tab-btn" data-blend="cr">cr • crab</button>
    <button class="tab-btn" data-blend="br">br • brick</button>
  </div>

  <div class="stage">
    
    <div class="word-preview">
      <div class="word-badge" id="wordBadge">
        <span class="blend-hl">cl</span>ap
      </div>
    </div>

    
    <div class="split-flow">
      <div class="blend-card" id="blendCard">cl</div>
      <div class="arrow-icon">→</div>
      <div class="blend-parts">
        <div class="part-chip" id="part1">/k/</div>
        <div class="part-chip" id="part2">/l/</div>
      </div>
    </div>

    <div class="boxes-label">4 Sounds (1 + 1 + 1 + 1)</div>

    
    <div class="sound-boxes" id="soundBoxes">
      
    </div>

    
    <div class="controls">
      <button class="btn-action" id="segmentBtn">
        <span>▶</span> Segment 4 Sounds
      </button>
    </div>
  </div>

  <script>
    const data = {
      cl: {
        word: 'clap',
        blend: 'cl',
        parts: ['/k/', '/l/'],
        rest: 'ap',
        sounds: [
          { letter: 'c', phoneme: '/k/', blend: true, freq: 260 },
          { letter: 'l', phoneme: '/l/', blend: true, freq: 330 },
          { letter: 'a', phoneme: '/æ/', blend: false, freq: 392 },
          { letter: 'p', phoneme: '/p/', blend: false, freq: 494 }
        ]
      },
      bl: {
        word: 'blob',
        blend: 'bl',
        parts: ['/b/', '/l/'],
        rest: 'ob',
        sounds: [
          { letter: 'b', phoneme: '/b/', blend: true, freq: 246 },
          { letter: 'l', phoneme: '/l/', blend: true, freq: 330 },
          { letter: 'o', phoneme: '/ɒ/', blend: false, freq: 370 },
          { letter: 'b', phoneme: '/b/', blend: false, freq: 440 }
        ]
      },
      cr: {
        word: 'crab',
        blend: 'cr',
        parts: ['/k/', '/r/'],
        rest: 'ab',
        sounds: [
          { letter: 'c', phoneme: '/k/', blend: true, freq: 260 },
          { letter: 'r', phoneme: '/r/', blend: true, freq: 294 },
          { letter: 'a', phoneme: '/æ/', blend: false, freq: 392 },
          { letter: 'b', phoneme: '/b/', blend: false, freq: 440 }
        ]
      },
      br: {
        word: 'brick',
        blend: 'br',
        parts: ['/b/', '/r/'],
        rest: 'ick',
        sounds: [
          { letter: 'b', phoneme: '/b/', blend: true, freq: 246 },
          { letter: 'r', phoneme: '/r/', blend: true, freq: 294 },
          { letter: 'i', phoneme: '/ɪ/', blend: false, freq: 440 },
          { letter: 'ck', phoneme: '/k/', blend: false, freq: 523 }
        ]
      }
    };

    let currentBlend = 'cl';
    let isPlaying = false;
    let audioCtx = null;

    function playTone(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 = 'sine';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    function render() {
      const item = data[currentBlend];
      
      // Word Badge
      const wordBadge = document.getElementById('wordBadge');
      wordBadge.innerHTML = `<span class="blend-hl">${item.blend}</span>${item.rest}`;

      // Split Flow
      document.getElementById('blendCard').textContent = item.blend;
      document.getElementById('part1').textContent = item.parts[0];
      document.getElementById('part2').textContent = item.parts[1];

      // 4 Sound Boxes
      const boxesContainer = document.getElementById('soundBoxes');
      boxesContainer.innerHTML = '';
      
      item.sounds.forEach((s, idx) => {
        const box = document.createElement('div');
        box.className = `sound-box ${s.blend ? 'blend-sound' : ''}`;
        box.id = `box-${idx}`;
        box.innerHTML = `
          <div class="sound-letter">${s.letter}</div>
          <div class="sound-phoneme">${s.phoneme}</div>
          <div class="dot"></div>
        `;
        box.addEventListener('click', () => {
          highlightBox(idx);
          playTone(s.freq);
        });
        boxesContainer.appendChild(box);
      });
    }

    function highlightBox(index) {
      document.querySelectorAll('.sound-box').forEach((box, i) => {
        box.classList.toggle('active', i === index);
      });
    }

    function segmentSequence() {
      if (isPlaying) return;
      isPlaying = true;
      const item = data[currentBlend];
      let step = 0;

      const interval = setInterval(() => {
        if (step < item.sounds.length) {
          highlightBox(step);
          playTone(item.sounds[step].freq);
          step++;
        } else {
          clearInterval(interval);
          setTimeout(() => {
            highlightBox(-1);
            isPlaying = false;
          }, 800);
        }
      }, 650);
    }

    // Tabs
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentBlend = btn.dataset.blend;
        render();
      });
    });

    document.getElementById('segmentBtn').addEventListener('click', segmentSequence);

    // Initial render
    render();
  </script>
</body>
</html>

Keep your sounds crisp using **pure articulation** without an extra schwa (/ə/) sound. Say sharp stops like **/b/** and **/k/** instead of **buh** or **kuh** so segmenting stays exact.

Now try the word **blob**. When we segment **blob**, we hear four sounds in a row: **/b/ /l/ /o/ /b/**.

A common mistake is thinking **bl** makes only one sound, like the letters **sh** do. But in a blend, you must give **/b/** and **/l/** their very own sound taps!

What happens if we trade the letter **l** for the letter **r**?

Words with **br** and **cr** also start with two distinct sounds that slide together. When you say **crab**, your tongue taps **/k/** and then rolls into **/r/**.

<!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">
  <title>Segmenting Words With Beginning Blends</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

    /* Word / Blend selector tabs */
    .tab-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      flex: 1;
      min-width: 70px;
      padding: 8px 12px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .tab-btn:hover {
      background-color: #f1f5f9;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      background-color: #eaf7ff;
      color: #008cd6;
    }

    /* Main Display Area */
    .stage {
      width: 100%;
      max-width: 440px;
      height: 220px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 16px;
    }

    .blocks-container {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: gap 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      gap: 2px;
      height: 90px;
    }

    .blocks-container.segmented {
      gap: 14px;
    }

    .sound-block {
      width: 64px;
      height: 72px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
      color: #ffffff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, border-radius 0.3s ease;
      position: relative;
    }

    /* Color-coded phoneme blocks */
    .sound-block.b1 { background-color: #3b82f6; } /* Blend letter 1 */
    .sound-block.b2 { background-color: #06b6d4; } /* Blend letter 2 */
    .sound-block.vow { background-color: #f59e0b; } /* Vowel */
    .sound-block.end { background-color: #10b981; } /* Final consonant */

    .sound-label {
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
      color: #64748b;
      margin-top: 6px;
    }

    .sound-label.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .phoneme-column {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Sound Count Badge */
    .count-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #f1f5f9;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .count-badge.active {
      background: #e0f2fe;
      color: #0284c7;
    }

    /* Control Button */
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .action-btn {
      flex: 1;
      padding: 12px 20px;
      font-size: 16px;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background-color 0.2s ease, opacity 0.2s ease;
      background-color: #22b7ff;
      color: #ffffff;
    }

    .action-btn:hover {
      opacity: 0.9;
    }

    .action-btn:active {
      transform: scale(0.98);
    }
  </style>
</head>
<body>

  
  <div class="tab-bar">
    <button class="tab-btn active" onclick="selectWord(0)">bl · blob</button>
    <button class="tab-btn" onclick="selectWord(1)">br · brick</button>
    <button class="tab-btn" onclick="selectWord(2)">cl · clap</button>
    <button class="tab-btn" onclick="selectWord(3)">cr · crab</button>
  </div>

  
  <div class="stage">
    <div class="blocks-container" id="blocksGroup">
      
      <div class="phoneme-column">
        <div class="sound-block b1" id="b0">b</div>
        <div class="sound-label" id="l0">/b/</div>
      </div>
      
      <div class="phoneme-column">
        <div class="sound-block b2" id="b1">l</div>
        <div class="sound-label" id="l1">/l/</div>
      </div>
      
      <div class="phoneme-column">
        <div class="sound-block vow" id="b2">o</div>
        <div class="sound-label" id="l2">/ɒ/</div>
      </div>
      
      <div class="phoneme-column">
        <div class="sound-block end" id="b3">b</div>
        <div class="sound-label" id="l3">/b/</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="action-btn" id="toggleBtn" onclick="toggleSegment()">
      <span id="btnIcon">✂️</span> <span id="btnText">Segment Sounds</span>
    </button>
  </div>

  <div class="count-badge" id="badge">
    <span id="badgeIcon">●</span>
    <span id="badgeText">Whole Word (1)</span>
  </div>

  <script>
    const words = [
      { letters: ['b', 'l', 'o', 'b'], sounds: ['/b/', '/l/', '/ɒ/', '/b/'] },
      { letters: ['b', 'r', 'i', 'ck'], sounds: ['/b/', '/r/', '/ɪ/', '/k/'] },
      { letters: ['c', 'l', 'a', 'p'], sounds: ['/k/', '/l/', '/æ/', '/p/'] },
      { letters: ['c', 'r', 'a', 'b'], sounds: ['/k/', '/r/', '/æ/', '/b/'] }
    ];

    let currentWordIdx = 0;
    let isSegmented = false;

    function renderWord() {
      const data = words[currentWordIdx];
      for (let i = 0; i < 4; i++) {
        document.getElementById('b' + i).textContent = data.letters[i];
        document.getElementById('l' + i).textContent = data.sounds[i];
      }
    }

    function selectWord(idx) {
      currentWordIdx = idx;
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === idx);
      });
      renderWord();
    }

    function toggleSegment() {
      isSegmented = !isSegmented;
      const group = document.getElementById('blocksGroup');
      const labels = document.querySelectorAll('.sound-label');
      const badge = document.getElementById('badge');
      const btnText = document.getElementById('btnText');
      const btnIcon = document.getElementById('btnIcon');
      const badgeText = document.getElementById('badgeText');

      if (isSegmented) {
        group.classList.add('segmented');
        labels.forEach(l => l.classList.add('visible'));
        badge.classList.add('active');
        btnText.textContent = "Blend Together";
        btnIcon.textContent = "🔗";
        badgeText.textContent = "4 Separate Sounds";
      } else {
        group.classList.remove('segmented');
        labels.forEach(l => l.classList.remove('visible'));
        badge.classList.remove('active');
        btnText.textContent = "Segment Sounds";
        btnIcon.textContent = "✂️";
        badgeText.textContent = "Whole Word";
      }
    }

    // Initialize initial state
    renderWord();
  </script>
</body>
</html>

Ready to test your ears on a tricky mystery word?

Listen to the word **brush**. How many total sounds do you hear from start to finish?

<!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">
<title>Segmenting Words With Beginning Blends</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
  }

  .app-container {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* Word Selector Tabs */
  .word-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tab-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .tab-btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
  }

  /* Main Word Card Area */
  .stage-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 16px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    border: 1px solid #edf2f7;
  }

  /* Word Header */
  .whole-word {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #1e2945;
  }

  /* Blend Bracket Indicator */
  .bracket-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 380px;
    height: 24px;
    position: relative;
  }

  .blend-pill {
    grid-column: 1 / 3;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #38bdf8;
  }

  /* Phoneme Boxes */
  .sound-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 380px;
  }

  .sound-box {
    aspect-ratio: 1;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
  }

  .sound-box.blend-sound {
    background: #f0f9ff;
    border-color: #bae6fd;
  }

  .sound-box.active {
    background: #22b7ff;
    border-color: #0284c7;
    box-shadow: 0 6px 14px rgba(34, 183, 255, 0.35);
  }

  .sound-box .phoneme {
    font-size: 26px;
    font-weight: 800;
    color: #334155;
    transition: color 0.2s ease;
  }

  .sound-box.active .phoneme {
    color: #ffffff;
  }

  .sound-box .num-badge {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
  }

  .sound-box.active .num-badge {
    color: rgba(255, 255, 255, 0.85);
  }

  /* Sound Buttons / Dots */
  .tap-dots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 380px;
  }

  .tap-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
  }

  .tap-dot-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.25s ease;
  }

  .tap-dot.active .tap-dot-circle {
    background: #22b7ff;
    transform: scale(1.25);
  }

  /* Controls Row */
  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    padding-top: 4px;
  }

  .btn-play {
    background: #1e2945;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .btn-play:active {
    opacity: 0.85;
  }

  .total-badge {
    font-size: 13px;
    font-weight: 800;
    background: #f1f5f9;
    color: #475569;
    padding: 6px 12px;
    border-radius: 8px;
  }

  .total-badge span {
    color: #0284c7;
    font-size: 15px;
  }
</style>
</head>
<body>

<div class="app-container">
  
  <div class="word-tabs" id="wordTabs"></div>

  
  <div class="stage-card">
    <div class="whole-word" id="wordDisplay">brush</div>

    
    <div class="bracket-row">
      <div class="blend-pill" id="blendLabel">Blend: 2 sounds</div>
    </div>

    
    <div class="sound-boxes" id="soundBoxes"></div>

    
    <div class="tap-dots" id="tapDots"></div>

    
    <div class="controls">
      <button class="btn-play" id="playBtn">▶ Tap Sounds</button>
      <div class="total-badge">Total: <span id="countText">4 sounds</span></div>
    </div>
  </div>
</div>

<script>
  const WORDS = [
    { word: 'brush', sounds: ['b', 'r', 'u', 'sh'], blend: 'br' },
    { word: 'crab',  sounds: ['c', 'r', 'a', 'b'],  blend: 'cr' },
    { word: 'clip',  sounds: ['c', 'l', 'i', 'p'],  blend: 'cl' },
    { word: 'blob',  sounds: ['b', 'l', 'o', 'b'],  blend: 'bl' }
  ];

  let currentWordIdx = 0;
  let activeSoundIdx = -1;
  let timer = null;

  const wordTabsEl = document.getElementById('wordTabs');
  const wordDisplayEl = document.getElementById('wordDisplay');
  const blendLabelEl = document.getElementById('blendLabel');
  const soundBoxesEl = document.getElementById('soundBoxes');
  const tapDotsEl = document.getElementById('tapDots');
  const playBtn = document.getElementById('playBtn');

  function initTabs() {
    wordTabsEl.innerHTML = '';
    WORDS.forEach((item, idx) => {
      const btn = document.createElement('button');
      btn.className = 'tab-btn' + (idx === currentWordIdx ? ' active' : '');
      btn.textContent = item.word;
      btn.onclick = () => selectWord(idx);
      wordTabsEl.appendChild(btn);
    });
  }

  function selectWord(idx) {
    stopAutoPlay();
    currentWordIdx = idx;
    activeSoundIdx = -1;
    initTabs();
    renderBoard();
  }

  function renderBoard() {
    const data = WORDS[currentWordIdx];
    wordDisplayEl.textContent = data.word;
    blendLabelEl.textContent = data.blend + ' = 2 sounds';

    soundBoxesEl.innerHTML = '';
    tapDotsEl.innerHTML = '';

    data.sounds.forEach((snd, i) => {
      // Sound Box
      const box = document.createElement('div');
      box.className = 'sound-box' + (i < 2 ? ' blend-sound' : '') + (i === activeSoundIdx ? ' active' : '');
      box.innerHTML = `<span class="num-badge">${i + 1}</span><span class="phoneme">/${snd}/</span>`;
      box.onclick = () => {
        stopAutoPlay();
        setSound(i);
      };
      soundBoxesEl.appendChild(box);

      // Tap Dot
      const dot = document.createElement('div');
      dot.className = 'tap-dot' + (i === activeSoundIdx ? ' active' : '');
      dot.innerHTML = `<div class="tap-dot-circle"></div><span>Tap ${i + 1}</span>`;
      dot.onclick = () => {
        stopAutoPlay();
        setSound(i);
      };
      tapDotsEl.appendChild(dot);
    });
  }

  function setSound(idx) {
    activeSoundIdx = idx;
    const boxes = soundBoxesEl.children;
    const dots = tapDotsEl.children;
    for (let i = 0; i < boxes.length; i++) {
      boxes[i].classList.toggle('active', i === idx);
      dots[i].classList.toggle('active', i === idx);
    }
  }

  function stopAutoPlay() {
    if (timer) {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Tap Sounds';
    }
  }

  function toggleAutoPlay() {
    if (timer) {
      stopAutoPlay();
    } else {
      playBtn.textContent = '⏸ Pause';
      activeSoundIdx = -1;
      advanceSound();
      timer = setInterval(advanceSound, 850);
    }
  }

  function advanceSound() {
    activeSoundIdx++;
    if (activeSoundIdx >= 4) {
      activeSoundIdx = 0;
    }
    setSound(activeSoundIdx);
  }

  playBtn.onclick = toggleAutoPlay;

  // Initialize
  initTabs();
  renderBoard();
</script>

</body>
</html>

The word **brush** has four sounds: **/b/ /r/ /u/ /sh/**. Whenever you hear **bl**, **br**, **cl**, or **cr**, remember to tap two fingers for those first two sounds!

Segmenting Words With Beginning Blends: bl, br, cl, cr. Segment spoken words that start with the blends bl, br, cl and cr into separate phonemes.

Blending and Segmenting Phonemes Interactive Activity (AC9E1LY09)

Phonemic Awareness Progression & Segmenting Lesson Guides

Initial Consonant Blends: Segmenting and Blending Practice

Instruction for AC9E1LY09 in Years 1-2 should follow an explicit Systematic Synthetic Phonics (SSP) routine: Gradual Release of Responsibility ('I Do, We Do, You Do'). Lessons must prioritise oral-auditory phonemic awareness first before anchoring sounds to letters (graphemes). Teachers should use continuous stretching ('s-l-o-w motion speaking') paired with discrete Elkonin box token placement to prevent cluster reduction and ensure students detect both consonants in the blend.

Segmenting Words With Beginning Blends: bl, br, cl, cr

Splitting L-Blends: bl and cl

Rolling into R-Blends: br and cr