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 do you do when you see a brand new word that you have never seen before?

You can unlock it like a secret puzzle by using sound clues!

**Blending** means sliding individual letter sounds together smoothly to say a whole word.

Each letter makes its own sound, and we glue those sounds together from left to right.

<!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>Blending Sounds</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    .word-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    .word-tab {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      color: #6b7280;
      transition: all 0.2s ease;
    }
    .word-tab.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }
    .stage-area {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin: auto 0;
    }
    .tiles-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      position: relative;
      width: 100%;
      transition: gap 0.35s ease;
    }
    .tiles-row.blended {
      gap: 0px;
    }
    .tile {
      width: 80px;
      height: 90px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
      position: relative;
    }
    .tiles-row.blended .tile {
      border-radius: 0;
      border-color: #22b7ff;
      background: #f0f9ff;
    }
    .tiles-row.blended .tile:first-child {
      border-radius: 12px 0 0 12px;
    }
    .tiles-row.blended .tile:last-child {
      border-radius: 0 12px 12px 0;
    }
    .tile.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25), 0 6px 14px rgba(34, 183, 255, 0.15);
      transform: translateY(-4px);
    }
    .letter {
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      color: #1e2945;
    }
    .sound-tag {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      margin-top: 4px;
      transition: color 0.3s ease;
    }
    .tile.active .sound-tag,
    .tiles-row.blended .sound-tag {
      color: #0284c7;
    }
    .dots-row {
      display: flex;
      justify-content: center;
      gap: 52px;
      width: 100%;
      height: 24px;
      align-items: center;
    }
    .sound-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #cbd5e1;
      transition: all 0.3s ease;
    }
    .sound-dot.active {
      background: #22b7ff;
      box-shadow: 0 0 0 4px rgba(34, 183, 255, 0.25);
      transform: scale(1.2);
    }
    .blend-track {
      width: 270px;
      height: 38px;
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      padding: 0 8px;
      position: relative;
      overflow: hidden;
    }
    .blend-slider {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(34, 183, 255, 0.1), rgba(34, 183, 255, 0.35));
      border-right: 3px solid #22b7ff;
      transition: width 0.4s ease;
    }
    .blend-label {
      width: 100%;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .result-badge {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.3s ease;
    }
    .result-badge.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .emoji-icon {
      font-size: 28px;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }
    .step-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .step-btn:hover {
      background: #f1f5f9;
    }
    .stepper-dots {
      display: flex;
      gap: 6px;
      margin: 0 4px;
    }
    .step-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-indicator.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="word-tabs">
    <button class="word-tab active" data-word="0">c - a - t</button>
    <button class="word-tab" data-word="1">s - u - n</button>
    <button class="word-tab" data-word="2">m - a - p</button>
  </div>

  <div class="stage-area">
    <div class="tiles-row" id="tilesRow">
      <div class="tile" id="tile0">
        <span class="letter" id="let0">c</span>
        <span class="sound-tag" id="snd0">/k/</span>
      </div>
      <div class="tile" id="tile1">
        <span class="letter" id="let1">a</span>
        <span class="sound-tag" id="snd1">/æ/</span>
      </div>
      <div class="tile" id="tile2">
        <span class="letter" id="let2">t</span>
        <span class="sound-tag" id="snd2">/t/</span>
      </div>
    </div>

    <div class="dots-row">
      <div class="sound-dot" id="dot0"></div>
      <div class="sound-dot" id="dot1"></div>
      <div class="sound-dot" id="dot2"></div>
    </div>

    <div class="blend-track">
      <div class="blend-slider" id="blendSlider"></div>
      <div class="blend-label" id="blendLabel">Left to Right →</div>
    </div>

    <div class="result-badge" id="resultBadge">
      <span id="wholeWord">cat</span>
      <span class="emoji-icon" id="wordEmoji">🐱</span>
    </div>
  </div>

  <div class="controls">
    <button class="step-btn" id="prevBtn">◀</button>
    <div class="stepper-dots">
      <div class="step-indicator active" data-step="0"></div>
      <div class="step-indicator" data-step="1"></div>
      <div class="step-indicator" data-step="2"></div>
      <div class="step-indicator" data-step="3"></div>
    </div>
    <button class="step-btn" id="playBtn">⏸</button>
    <button class="step-btn" id="nextBtn">▶</button>
  </div>

  <script>
    const WORDS = [
      { letters: ['c', 'a', 't'], sounds: ['/k/', '/æ/', '/t/'], word: 'cat', emoji: '🐱' },
      { letters: ['s', 'u', 'n'], sounds: ['/s/', '/ʌ/', '/n/'], word: 'sun', emoji: '☀️' },
      { letters: ['m', 'a', 'p'], sounds: ['/m/', '/æ/', '/p/'], word: 'map', emoji: '🗺️' }
    ];

    let currentWordIndex = 0;
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const tiles = [document.getElementById('tile0'), document.getElementById('tile1'), document.getElementById('tile2')];
    const letters = [document.getElementById('let0'), document.getElementById('let1'), document.getElementById('let2')];
    const sounds = [document.getElementById('snd0'), document.getElementById('snd1'), document.getElementById('snd2')];
    const dots = [document.getElementById('dot0'), document.getElementById('dot1'), document.getElementById('dot2')];
    const tilesRow = document.getElementById('tilesRow');
    const blendSlider = document.getElementById('blendSlider');
    const resultBadge = document.getElementById('resultBadge');
    const wholeWord = document.getElementById('wholeWord');
    const wordEmoji = document.getElementById('wordEmoji');
    const stepIndicators = document.querySelectorAll('.step-indicator');
    const wordTabs = document.querySelectorAll('.word-tab');
    const playBtn = document.getElementById('playBtn');

    function loadWord(index) {
      currentWordIndex = index;
      const data = WORDS[index];
      data.letters.forEach((l, i) => letters[i].textContent = l);
      data.sounds.forEach((s, i) => sounds[i].textContent = s);
      wholeWord.textContent = data.word;
      wordEmoji.textContent = data.emoji;

      wordTabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === index);
      });
      renderStep(currentStep);
    }

    function renderStep(step) {
      currentStep = step;

      // Update step indicators
      stepIndicators.forEach((dot, i) => {
        dot.classList.toggle('active', i === step);
      });

      // Reset tile active states
      tiles.forEach((t, i) => t.classList.toggle('active', step < 3 && i === step));
      dots.forEach((d, i) => d.classList.toggle('active', step < 3 && i === step));

      if (step < 3) {
        tilesRow.classList.remove('blended');
        resultBadge.classList.remove('visible');
        const progress = (step + 1) * 33.3;
        blendSlider.style.width = progress + '%';
      } else {
        // Blended stage
        tilesRow.classList.add('blended');
        dots.forEach(d => d.classList.add('active'));
        blendSlider.style.width = '100%';
        resultBadge.classList.add('visible');
      }
    }

    function nextStep() {
      let next = (currentStep + 1) % 4;
      renderStep(next);
    }

    function prevStep() {
      let prev = (currentStep - 1 + 4) % 4;
      renderStep(prev);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        nextStep();
      }, 2400);
    }

    function stopAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶';
      if (timer) clearInterval(timer);
    }

    // Event listeners
    wordTabs.forEach((tab, idx) => {
      tab.addEventListener('click', () => {
        loadWord(idx);
        renderStep(0);
      });
    });

    stepIndicators.forEach((indicator, idx) => {
      indicator.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(idx);
      });
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Initialize
    loadWord(0);
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

This systematic decoding relies on **left-to-right orthographic scanning**, where you identify each letter in order while holding previous sounds in your working memory.

Accurate reading uses **left-to-right orthographic scanning** to identify each letter systematically in order while holding previous sounds in your working memory.

Why does saying the sounds like a robot sometimes make it hard to read the word?

If you pause between sounds—like */c/... /a/... /t/*—your brain can forget the first sound before you reach the end.

To do **continuous blending**, stretch each sound right into the next one without stopping: *caaat*... **cat**!

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

    .blend-stage {
      width: 100%;
      max-width: 420px;
      height: 240px;
      position: relative;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .track {
      position: relative;
      width: 280px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Sound ribbon connector in step 2 */
    .ribbon {
      position: absolute;
      top: 50%;
      left: 20px;
      right: 20px;
      height: 8px;
      background: #22b7ff;
      border-radius: 4px;
      transform: translateY(-50%) scaleX(0);
      transform-origin: center;
      transition: transform 0.4s ease, opacity 0.4s ease;
      opacity: 0;
      z-index: 1;
    }

    .tile-group {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .tile {
      width: 64px;
      height: 64px;
      background: #ffffff;
      border: 3px solid #22b7ff;
      border-radius: 14px;
      font-size: 32px;
      font-weight: 800;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
      transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* State positions */
    /* Step 1: Separated */
    .step-1 .tile-c { transform: translateX(-95px); }
    .step-1 .tile-a { transform: translateX(0); }
    .step-1 .tile-t { transform: translateX(95px); }

    /* Step 2: Continuous stretch */
    .step-2 .tile-c { transform: translateX(-65px); border-color: #22b7ff; background: #e8f7ff; }
    .step-2 .tile-a { transform: translateX(0); border-color: #22b7ff; background: #e8f7ff; }
    .step-2 .tile-t { transform: translateX(65px); border-color: #22b7ff; background: #e8f7ff; }
    .step-2 .ribbon { transform: translateY(-50%) scaleX(1); opacity: 0.85; }

    /* Step 3: Blended word */
    .step-3 .tile-c { transform: translateX(-48px); border-color: #10b981; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 1.5px; background: #ecfdf5; color: #065f46; }
    .step-3 .tile-a { transform: translateX(0); border-color: #10b981; border-radius: 0; border-left-width: 1.5px; border-right-width: 1.5px; background: #ecfdf5; color: #065f46; }
    .step-3 .tile-t { transform: translateX(48px); border-color: #10b981; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 1.5px; background: #ecfdf5; color: #065f46; }

    .meaning-badge {
      margin-top: 14px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 20px;
      font-weight: 700;
      color: #065f46;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.35s ease;
    }

    .step-3 .meaning-badge {
      opacity: 1;
      transform: translateY(0);
    }

    .dots-indicator {
      display: flex;
      gap: 12px;
      margin-top: 10px;
    }

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

    .step-1 .dot-1 { background: #22b7ff; }
    .step-2 .dot-2 { background: #22b7ff; }
    .step-3 .dot-3 { background: #10b981; }

    /* Control Tabs */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      width: 100%;
      max-width: 420px;
    }

    .btn-step {
      flex: 1;
      padding: 10px 4px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

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

    .play-toggle {
      width: 44px;
      padding: 0;
      flex: none;
    }
  </style>
</head>
<body>

  <div class="blend-stage step-1" id="stage">
    <div class="track">
      <div class="ribbon"></div>
      <div class="tile-group">
        <div class="tile tile-c">c</div>
        <div class="tile tile-a">a</div>
        <div class="tile tile-t">t</div>
      </div>
    </div>

    <div class="meaning-badge">🐱 cat</div>

    <div class="dots-indicator">
      <span class="dot-label dot-1"></span>
      <span class="dot-label dot-2"></span>
      <span class="dot-label dot-3"></span>
    </div>
  </div>

  <div class="controls">
    <button class="btn-step play-toggle" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn-step active" data-step="1">/c/ /a/ /t/</button>
    <button class="btn-step" data-step="2">caaat ➔</button>
    <button class="btn-step" data-step="3">cat 🐱</button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const stepBtns = document.querySelectorAll('[data-step]');
    const playBtn = document.getElementById('playBtn');

    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    function setStep(step) {
      currentStep = step;
      stage.className = `blend-stage step-${step}`;
      stepBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.step, 10) === step);
      });
    }

    function nextStep() {
      const next = currentStep >= 3 ? 1 : currentStep + 1;
      setStep(next);
    }

    function startAutoPlay() {
      isPlaying = true;
      playBtn.textContent = '⏸';
      clearInterval(timer);
      timer = setInterval(nextStep, 3000);
    }

    function pauseAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶';
      clearInterval(timer);
    }

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(parseInt(btn.dataset.step, 10));
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Initialize auto-cycle
    startAutoPlay();
  </script>
</body>
</html>

Watch out for extra sounds! If you say */buh/* instead of a crisp */b/*, the word *b-a-t* turns into *buhat*.

What happens when a word gets longer and has four sounds packed together?

Longer words work the exact same way—just keep your voice going across all four sounds.

Let's blend */f/ /l/ /i/ /p/*: stretch */f/* into */l/*, slide into */i/*, and end on */p/* to read **flip**!

**Distinguishing blends** from digraphs is essential when decoding consonant clusters.

In a **consonant blend** like *cr* in *crisp*, each letter keeps its own sound (/k/ and /r/). In contrast, a **digraph** like *sh*, *th*, or *ch* pairs two letters to make just one single sound.

For longer or complex words (like CCVC or CCVCC patterns), remembering four or five individual sounds at once can overload your working memory.

**Successive or cumulative blending** reduces cognitive load by building the word step by step: /s/ + /p/ = *sp* → *sp* + /o/ = *spo* → *spo* + /t/ = **spot**!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: auto;
    }

    /* Step Navigation Bar */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .step-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

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

    .play-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #1e2945;
      cursor: pointer;
      transition: border-color 0.2s;
    }

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

    /* Main Equation Panel */
    .stage-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .tile {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      min-width: 48px;
      height: 56px;
      padding: 0 10px;
      font-size: 26px;
      font-weight: 700;
      color: #1e2945;
      transition: all 0.3s ease;
    }

    .tile.accent {
      background: #e0f4ff;
      border-color: #22b7ff;
      color: #0077b6;
    }

    .tile.target {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      min-width: 72px;
    }

    .tile.success {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      min-width: 90px;
    }

    .op {
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Cumulative Word Track */
    .track-wrapper {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .slots {
      display: flex;
      gap: 6px;
    }

    .slot {
      width: 44px;
      height: 48px;
      border-radius: 8px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: #94a3b8;
      transition: all 0.3s ease;
    }

    .slot.active {
      border-color: #22b7ff;
      background: #e0f4ff;
      color: #0284c7;
    }

    .slot.joined {
      border-color: #22b7ff;
      background: #22b7ff;
      color: #ffffff;
    }

    .slot.complete {
      border-color: #10b981;
      background: #10b981;
      color: #ffffff;
    }

    /* Badge Label */
    .status-badge {
      font-size: 15px;
      font-weight: 600;
      color: #475569;
      min-height: 22px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>
  <div class="container">
    
    <div class="nav-bar">
      <button class="step-btn active" data-step="0">1</button>
      <button class="step-btn" data-step="1">2</button>
      <button class="step-btn" data-step="2">3</button>
      <button class="play-btn" id="playToggle" title="Play/Pause">⏸</button>
    </div>

    
    <div class="stage-card">
      <div class="status-badge" id="stepLabel">Blend first 2</div>

      
      <div class="equation-row" id="equationRow">
        <div class="tile accent" id="tileA">/s/</div>
        <div class="op">+</div>
        <div class="tile" id="tileB">/p/</div>
        <div class="op">→</div>
        <div class="tile target" id="tileRes">sp</div>
      </div>

      
      <div class="track-wrapper">
        <div class="slots">
          <div class="slot joined" id="slot0">s</div>
          <div class="slot joined" id="slot1">p</div>
          <div class="slot" id="slot2">o</div>
          <div class="slot" id="slot3">t</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const stepsData = [
      {
        label: "Blend first 2",
        tileA: "/s/",
        tileB: "/p/",
        res: "sp",
        isFinal: false,
        slots: ["joined", "joined", "", ""]
      },
      {
        label: "Add vowel",
        tileA: "sp",
        tileB: "/o/",
        res: "spo",
        isFinal: false,
        slots: ["joined", "joined", "joined", ""]
      },
      {
        label: "Whole word!",
        tileA: "spo",
        tileB: "/t/",
        res: "spot",
        isFinal: true,
        slots: ["complete", "complete", "complete", "complete"]
      }
    ];

    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    const stepBtns = document.querySelectorAll(".step-btn");
    const playToggle = document.getElementById("playToggle");
    const stepLabel = document.getElementById("stepLabel");
    const tileA = document.getElementById("tileA");
    const tileB = document.getElementById("tileB");
    const tileRes = document.getElementById("tileRes");
    const slots = [
      document.getElementById("slot0"),
      document.getElementById("slot1"),
      document.getElementById("slot2"),
      document.getElementById("slot3")
    ];

    function render(idx) {
      currentStep = idx;
      const data = stepsData[idx];

      // Update Nav Buttons
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle("active", i === idx);
      });

      // Update Equation Text & Styles
      stepLabel.textContent = data.label;
      tileA.textContent = data.tileA;
      tileB.textContent = data.tileB;
      tileRes.textContent = data.res;

      tileRes.className = "tile " + (data.isFinal ? "success" : "target");

      // Update Track Slots
      slots.forEach((slot, i) => {
        slot.className = "slot " + (data.slots[i] || "");
      });
    }

    function nextStep() {
      render((currentStep + 1) % stepsData.length);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playToggle.textContent = "⏸";
    }

    function pauseAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playToggle.textContent = "▶";
    }

    // Step button clicks
    stepBtns.forEach((btn) => {
      btn.addEventListener("click", () => {
        const step = parseInt(btn.dataset.step, 10);
        render(step);
        pauseAuto();
      });
    });

    // Play/Pause toggle
    playToggle.addEventListener("click", () => {
      if (isPlaying) {
        pauseAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Initialize
    render(0);
    startAuto();
  </script>
</body>
</html>

**Distinguishing blends** from digraphs is essential when reading letter clusters.

In a consonant **blend** (like *cr* in *crisp* or *fl* in *flip*), each letter keeps its separate sound (/k/ and /r/), whereas a **digraph** (like *sh*, *th*, or *ch*) joins two letters to make one single sound.

For longer, complex words (such as CCVC or CVCC words), **cumulative blending** helps reduce memory overload.

Blend the first two sounds before adding the third and fourth: */s/ + /p/* = *sp*, then *sp + /o/* = *spo*, and finally *spo + /t/* = **spot**!

Next time you spot a tricky new word, slide the sounds together like a singing slide to read it with ease!

Blending Sounds to Read New Words. Blend individual sounds together smoothly to read unfamiliar words.

Systematic Synthetic Phonics: Explicit Blending & Segmenting Strategies for Year 2 (AC9E2LY09)

Phonics and Blending: Reading Complex Words with Consonant Clusters and Digraphs

Year 2 Reading Foundations: Blend Sounds in Words & Decode Consonant Blends

To achieve mastery in AC9E2LY09 for Year 2 students, instruction must explicitly progress from simple CVC decoding to complex CCVC, CVCC, and CCVCC structures with consonant clusters and digraphs. The most effective evidence-based pedagogical approach (supported by cognitive load theory and Science of Reading research) replaces traditional 'choppy blending' (/b/ ... /l/ ... /a/ ... /k/) with 'continuous blending / connected phonation' ('blllaaack'), which significantly reduces working memory burden for emerging and struggling readers. Teachers should provide daily explicit 'I do, We do, You do' routines using multisensory visual prompts (sound buttons, continuous arrows, and Elkonin boxes) while vigorously enforcing pure sound articulation without schwa voicing.

Blending Sounds to Read New Words

What is Blending?

Smooth Blending