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

Can you make the sound at the start of apple? Open your mouth wide and say **/a/**!

When we hear three sounds in a row, we can write one letter for each sound to build a real word.

<!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>Writing CVC Words with Short a</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;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Word selection tabs */
  .tabs {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 999px;
    width: fit-content;
  }
  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* Sound Boxes (Elkonin style) */
  .boxes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
  }

  .sound-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .sound-box.active {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  }
  .sound-box.c1.active { border-color: #3b82f6; }
  .sound-box.vowel.active { border-color: #f97316; }
  .sound-box.c2.active { border-color: #10b981; }

  .sound-chip {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }
  .c1 .sound-chip { background: #eff6ff; color: #3b82f6; }
  .vowel .sound-chip { background: #fff7ed; color: #f97316; }
  .c2 .sound-chip { background: #ecfdf5; color: #10b981; }

  /* Letter tile */
  .letter-tile {
    width: 64px;
    height: 64px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    color: #94a3b8;
    transition: all 0.25s ease;
  }
  .active .letter-tile {
    color: #ffffff;
  }
  .c1.active .letter-tile { background: #3b82f6; }
  .vowel.active .letter-tile { background: #f97316; }
  .c2.active .letter-tile { background: #10b981; }

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

  /* Word Blend Result Bar */
  .blend-bar {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #e2e8f0;
    min-height: 68px;
  }
  .blend-text-group {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .blend-char {
    font-size: 32px;
    font-weight: 800;
    opacity: 0.2;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .blend-char.active {
    opacity: 1;
    transform: scale(1.05);
  }
  .blend-char.c1 { color: #3b82f6; }
  .blend-char.vowel { color: #f97316; }
  .blend-char.c2 { color: #10b981; }

  .blend-arrow {
    font-size: 20px;
    color: #94a3b8;
    margin: 0 6px;
  }
  .word-result {
    font-size: 28px;
    font-weight: 800;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.25;
    transition: opacity 0.25s ease;
  }
  .word-result.complete {
    opacity: 1;
  }

  /* Control buttons */
  .controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .step-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .step-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
  }
  .step-btn.primary {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
  }
  .step-btn.primary:hover {
    background: #2563eb;
  }
</style>
</head>
<body>

<div class="wrapper">
  
  <div class="tabs" role="tablist">
    <button class="tab-btn active" data-word="0">🐱 cat</button>
    <button class="tab-btn" data-word="1">🦇 bat</button>
    <button class="tab-btn" data-word="2">🗺️ map</button>
    <button class="tab-btn" data-word="3">🌀 fan</button>
  </div>

  
  <div class="boxes-grid">
    <div class="sound-box c1 active" id="box-0" onclick="setStep(0)">
      <span class="sound-chip">Sound 1</span>
      <div class="letter-tile" id="tile-0">c</div>
      <span class="sound-phoneme" id="phone-0">/k/</span>
    </div>
    <div class="sound-box vowel" id="box-1" onclick="setStep(1)">
      <span class="sound-chip">Short a</span>
      <div class="letter-tile" id="tile-1">a</div>
      <span class="sound-phoneme" id="phone-1">/æ/</span>
    </div>
    <div class="sound-box c2" id="box-2" onclick="setStep(2)">
      <span class="sound-chip">Sound 3</span>
      <div class="letter-tile" id="tile-2">t</div>
      <span class="sound-phoneme" id="phone-2">/t/</span>
    </div>
  </div>

  
  <div class="blend-bar">
    <div class="blend-text-group">
      <span class="blend-char c1 active" id="blend-0">c</span>
      <span class="blend-char vowel" id="blend-1">a</span>
      <span class="blend-char c2" id="blend-2">t</span>
      <span class="blend-arrow">→</span>
    </div>
    <div class="word-result" id="word-complete">
      <span id="full-word">cat</span>
      <span id="word-emoji">🐱</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn" id="prevBtn" onclick="prevStep()">◀ Back</button>
    <button class="step-btn primary" id="nextBtn" onclick="nextStep()">Next Sound ▶</button>
    <button class="step-btn" id="playBtn" onclick="toggleAuto()">▶ Auto</button>
  </div>
</div>

<script>
  const WORDS = [
    { letters: ['c', 'a', 't'], phones: ['/k/', '/æ/', '/t/'], word: 'cat', emoji: '🐱' },
    { letters: ['b', 'a', 't'], phones: ['/b/', '/æ/', '/t/'], word: 'bat', emoji: '🦇' },
    { letters: ['m', 'a', 'p'], phones: ['/m/', '/æ/', '/p/'], word: 'map', emoji: '🗺️' },
    { letters: ['f', 'a', 'n'], phones: ['/f/', '/æ/', '/n/'], word: 'fan', emoji: '🌀' }
  ];

  let currentWordIdx = 0;
  let currentStep = 0; // 0 = Sound 1, 1 = Sound 2, 2 = Sound 3, 3 = Whole Word
  let autoTimer = null;

  // Web Audio synth for crisp feedback tones
  let audioCtx = null;
  function playTone(freq, duration = 0.12) {
    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 + duration);
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start();
      osc.stop(audioCtx.currentTime + duration);
    } catch (e) {}
  }

  function renderWord() {
    const data = WORDS[currentWordIdx];
    for (let i = 0; i < 3; i++) {
      document.getElementById(`tile-${i}`).textContent = data.letters[i];
      document.getElementById(`phone-${i}`).textContent = data.phones[i];
      document.getElementById(`blend-${i}`).textContent = data.letters[i];
    }
    document.getElementById('full-word').textContent = data.word;
    document.getElementById('word-emoji').textContent = data.emoji;
    renderStep();
  }

  function renderStep() {
    for (let i = 0; i < 3; i++) {
      const box = document.getElementById(`box-${i}`);
      const blendChar = document.getElementById(`blend-${i}`);
      if (i <= currentStep) {
        box.classList.add('active');
        blendChar.classList.add('active');
      } else {
        box.classList.remove('active');
        blendChar.classList.remove('active');
      }
    }

    const wordComplete = document.getElementById('word-complete');
    if (currentStep >= 3) {
      wordComplete.classList.add('complete');
    } else {
      wordComplete.classList.remove('complete');
    }

    // Audio tones corresponding to sounds
    const freqs = [330, 440, 550, 660];
    playTone(freqs[currentStep]);
  }

  function setStep(step) {
    currentStep = Math.max(0, Math.min(3, step));
    renderStep();
  }

  function nextStep() {
    if (currentStep < 3) {
      setStep(currentStep + 1);
    } else {
      // Loop word or advance to next word
      currentWordIdx = (currentWordIdx + 1) % WORDS.length;
      updateTabs();
      currentStep = 0;
      renderWord();
    }
  }

  function prevStep() {
    if (currentStep > 0) {
      setStep(currentStep - 1);
    } else {
      currentWordIdx = (currentWordIdx - 1 + WORDS.length) % WORDS.length;
      updateTabs();
      currentStep = 3;
      renderWord();
    }
  }

  function updateTabs() {
    document.querySelectorAll('.tab-btn').forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentWordIdx);
    });
  }

  function toggleAuto() {
    const playBtn = document.getElementById('playBtn');
    if (autoTimer) {
      clearInterval(autoTimer);
      autoTimer = null;
      playBtn.textContent = '▶ Auto';
    } else {
      playBtn.textContent = '⏸ Pause';
      nextStep();
      autoTimer = setInterval(() => {
        nextStep();
      }, 2000);
    }
  }

  // Tab click events
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      currentWordIdx = parseInt(e.target.dataset.word, 10);
      updateTabs();
      currentStep = 0;
      renderWord();
    });
  });

  // Init
  renderWord();
</script>
</body>
</html>

How do we listen for each sound before we pick up our pencil?

A **CVC word** is a three-letter word made of a starting sound, a middle vowel sound like **/a/**, and an ending sound.

To write the word **cat**, stretch it out slowly like a rubber band: **/k/ ... /a/ ... /t/**.

<!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>Writing CVC Words</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 {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    /* Word selector tabs */
    .word-tabs {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 999px;
    }

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

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Interactive visual stage */
    .stage {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    /* Sound pill */
    .sound-pill {
      width: 100%;
      height: 44px;
      background: #f0f9ff;
      border: 2px solid #bae6fd;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #0284c7;
      transition: all 0.25s ease;
      opacity: 0.35;
      transform: translateY(0);
    }

    .sound-pill.active {
      opacity: 1;
      background: #e0f2fe;
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.18);
    }

    .arrow {
      color: #94a3b8;
      font-size: 18px;
      line-height: 1;
      transition: all 0.25s ease;
      opacity: 0.3;
    }

    .arrow.active {
      color: #0284c7;
      opacity: 1;
    }

    /* Letter tile */
    .letter-tile {
      width: 100%;
      aspect-ratio: 1;
      max-height: 100px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      font-weight: 800;
      color: #1e2945;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.25s ease;
      opacity: 0.35;
    }

    .letter-tile.active {
      opacity: 1;
      border-color: #0284c7;
      color: #0284c7;
      box-shadow: 0 6px 16px rgba(2, 132, 199, 0.16);
    }

    /* Whole blended word banner */
    .blend-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .word-preview {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .word-icon {
      font-size: 26px;
      line-height: 1;
    }

    .word-text {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: 2px;
      color: #1e2945;
    }

    /* Control buttons */
    .controls {
      display: flex;
      gap: 6px;
    }

    .step-btn {
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 6px 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="word-tabs">
      <button class="tab-btn active" onclick="setWord(0)">🐱 cat</button>
      <button class="tab-btn" onclick="setWord(1)">🦇 bat</button>
      <button class="tab-btn" onclick="setWord(2)">🧢 cap</button>
    </div>

    
    <div class="stage">
      <div class="column" onclick="focusCol(0)">
        <div class="sound-pill active" id="snd-0">/k/</div>
        <div class="arrow active" id="arr-0">↓</div>
        <div class="letter-tile active" id="let-0">c</div>
      </div>
      <div class="column" onclick="focusCol(1)">
        <div class="sound-pill active" id="snd-1">/æ/</div>
        <div class="arrow active" id="arr-1">↓</div>
        <div class="letter-tile active" id="let-1">a</div>
      </div>
      <div class="column" onclick="focusCol(2)">
        <div class="sound-pill active" id="snd-2">/t/</div>
        <div class="arrow active" id="arr-2">↓</div>
        <div class="letter-tile active" id="let-2">t</div>
      </div>
    </div>

    
    <div class="blend-card">
      <div class="word-preview">
        <span class="word-icon" id="word-icon">🐱</span>
        <span class="word-text" id="blend-text">cat</span>
      </div>
      <div class="controls">
        <button class="step-btn active" id="mode-all" onclick="setMode('all')">All</button>
        <button class="step-btn" id="mode-play" onclick="playSequence()">▶ Stretch</button>
      </div>
    </div>
  </div>

  <script>
    const WORDS = [
      { emoji: '🐱', word: 'cat', sounds: ['/k/', '/æ/', '/t/'], letters: ['c', 'a', 't'] },
      { emoji: '🦇', word: 'bat', sounds: ['/b/', '/æ/', '/t/'], letters: ['b', 'a', 't'] },
      { emoji: '🧢', word: 'cap', sounds: ['/k/', '/æ/', '/p/'], letters: ['c', 'a', 'p'] }
    ];

    let currentWordIdx = 0;
    let animTimer = null;

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

      const w = WORDS[idx];
      for (let i = 0; i < 3; i++) {
        document.getElementById(`snd-${i}`).textContent = w.sounds[i];
        document.getElementById(`let-${i}`).textContent = w.letters[i];
      }
      document.getElementById('blend-text').textContent = w.word;
      document.getElementById('word-icon').textContent = w.emoji;

      setMode('all');
    }

    function setMode(mode) {
      clearInterval(animTimer);
      document.getElementById('mode-all').classList.toggle('active', mode === 'all');
      document.getElementById('mode-play').classList.toggle('active', mode === 'play');

      for (let i = 0; i < 3; i++) {
        document.getElementById(`snd-${i}`).classList.add('active');
        document.getElementById(`arr-${i}`).classList.add('active');
        document.getElementById(`let-${i}`).classList.add('active');
      }
    }

    function focusCol(colIdx) {
      clearInterval(animTimer);
      document.getElementById('mode-all').classList.remove('active');
      document.getElementById('mode-play').classList.remove('active');

      for (let i = 0; i < 3; i++) {
        const isTarget = (i === colIdx);
        document.getElementById(`snd-${i}`).classList.toggle('active', isTarget);
        document.getElementById(`arr-${i}`).classList.toggle('active', isTarget);
        document.getElementById(`let-${i}`).classList.toggle('active', isTarget);
      }
    }

    function playSequence() {
      clearInterval(animTimer);
      document.getElementById('mode-all').classList.remove('active');
      document.getElementById('mode-play').classList.add('active');

      let step = 0;
      const runStep = () => {
        if (step < 3) {
          for (let i = 0; i < 3; i++) {
            const isCurr = (i === step);
            document.getElementById(`snd-${i}`).classList.toggle('active', isCurr);
            document.getElementById(`arr-${i}`).classList.toggle('active', isCurr);
            document.getElementById(`let-${i}`).classList.toggle('active', isCurr);
          }
          step++;
        } else {
          // All active at the end
          for (let i = 0; i < 3; i++) {
            document.getElementById(`snd-${i}`).classList.add('active');
            document.getElementById(`arr-${i}`).classList.add('active');
            document.getElementById(`let-${i}`).classList.add('active');
          }
          step = 0;
        }
      };

      runStep();
      animTimer = setInterval(runStep, 900);
    }
  </script>
</body>
</html>

Matching each spoken sound to its written letter is called **Grapheme-Phoneme Correspondence** (**GPC**).

Once each discrete sound is identified, write its matching letter into its specific position from left to right.

Once each discrete sound is identified, you write the corresponding letter into its specific position from left to right.

What happens when we want to write a word for something that blows cool air?

Say the word slowly out loud: **/f/ ... /a/ ... /n/**.

First, write the letter **f** for the gentle puff of air at the start.

Next, write **a** for the middle sound, and finish with **n** when your tongue taps the top of your mouth.

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

    .word-picker {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      margin-bottom: 8px;
    }

    .word-btn {
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .word-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }

    .boxes-container {
      display: flex;
      gap: 12px;
      justify-content: center;
      width: 100%;
      max-width: 360px;
      margin: 12px 0;
    }

    .sound-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .sound-box {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      font-weight: 700;
      box-shadow: 0 0 0 2px transparent;
      transition: all 0.3s ease;
    }

    .sound-card:nth-child(1) .sound-box {
      background: #dbeafe;
      color: #1e40af;
    }

    .sound-card:nth-child(2) .sound-box {
      background: #ffedd5;
      color: #9a3412;
    }

    .sound-card:nth-child(3) .sound-box {
      background: #dcfce7;
      color: #166534;
    }

    .sound-card.active .sound-box {
      box-shadow: 0 0 0 3px #1e2945;
      transform: translateY(-4px);
    }

    .sound-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
    }

    .blend-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 24px;
      width: 100%;
      max-width: 360px;
      min-height: 68px;
    }

    .blend-word {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 2px;
      color: #1e2945;
    }

    .blend-icon {
      font-size: 36px;
      line-height: 1;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-top: 8px;
    }

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

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

    .step-dots {
      display: flex;
      gap: 6px;
    }

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

    .step-dot.active {
      background: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="word-picker">
    <button class="word-btn active" data-word="pan" data-icon="🍳">pan</button>
    <button class="word-btn" data-word="fan" data-icon="🪭">fan</button>
    <button class="word-btn" data-word="can" data-icon="🥫">can</button>
    <button class="word-btn" data-word="van" data-icon="🚐">van</button>
  </div>

  <div class="boxes-container">
    <div class="sound-card active" data-step="0">
      <div class="sound-box" id="letter-1">p</div>
      <div class="sound-label">Start</div>
    </div>
    <div class="sound-card" data-step="1">
      <div class="sound-box" id="letter-2">a</div>
      <div class="sound-label">Middle</div>
    </div>
    <div class="sound-card" data-step="2">
      <div class="sound-box" id="letter-3">n</div>
      <div class="sound-label">End</div>
    </div>
  </div>

  <div class="blend-display">
    <span class="blend-icon" id="word-icon">🍳</span>
    <span class="blend-word" id="word-text">p - -</span>
  </div>

  <div class="controls">
    <button class="nav-btn" id="prev-btn" aria-label="Previous">◀</button>
    <div class="step-dots">
      <div class="step-dot active" data-step="0"></div>
      <div class="step-dot" data-step="1"></div>
      <div class="step-dot" data-step="2"></div>
      <div class="step-dot" data-step="3"></div>
    </div>
    <button class="nav-btn" id="next-btn" aria-label="Next">▶</button>
  </div>

  <script>
    const words = {
      pan: { letters: ['p', 'a', 'n'], icon: '🍳' },
      fan: { letters: ['f', 'a', 'n'], icon: '🪭' },
      can: { letters: ['c', 'a', 'n'], icon: '🥫' },
      van: { letters: ['v', 'a', 'n'], icon: '🚐' }
    };

    let currentWordKey = 'pan';
    let currentStep = 0;

    const cards = document.querySelectorAll('.sound-card');
    const dots = document.querySelectorAll('.step-dot');
    const l1 = document.getElementById('letter-1');
    const l2 = document.getElementById('letter-2');
    const l3 = document.getElementById('letter-3');
    const wordText = document.getElementById('word-text');
    const wordIcon = document.getElementById('word-icon');

    function updateView() {
      const data = words[currentWordKey];
      l1.textContent = data.letters[0];
      l2.textContent = data.letters[1];
      l3.textContent = data.letters[2];
      wordIcon.textContent = data.icon;

      cards.forEach((card, idx) => {
        card.classList.toggle('active', currentStep === idx);
      });

      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', currentStep === idx);
      });

      if (currentStep === 0) {
        wordText.textContent = `${data.letters[0]} - -`;
      } else if (currentStep === 1) {
        wordText.textContent = `${data.letters[0]} ${data.letters[1]} -`;
      } else if (currentStep === 2) {
        wordText.textContent = `${data.letters[0]} ${data.letters[1]} ${data.letters[2]}`;
      } else {
        wordText.textContent = `${data.letters[0]}${data.letters[1]}${data.letters[2]}`;
      }
    }

    document.querySelectorAll('.word-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.word-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentWordKey = btn.dataset.word;
        updateView();
      });
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        currentStep = idx;
        updateView();
      });
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        currentStep = idx;
        updateView();
      });
    });

    document.getElementById('prev-btn').addEventListener('click', () => {
      currentStep = (currentStep - 1 + 4) % 4;
      updateView();
    });

    document.getElementById('next-btn').addEventListener('click', () => {
      currentStep = (currentStep + 1) % 4;
      updateView();
    });

    updateView();
  </script>
</body>
</html>

Be sure to listen all the way to the end so you do not miss the last letter!

Whenever you want to write words like **hat**, **jam**, or **map**, just say each sound slowly and write down its matching letter.

Writing CVC Words with Short a. Write CVC words with the short a sound by representing each sound with a letter.

Literacy Hub: Explicit Phonics Instruction and CVC Word Building

BBC Bitesize Reception / KS1 Phonics: Blending and Segmenting CVC Words

IXL English: Complete the Short 'a' Word (CVC Encoding)

Instruction for Foundation AC9EFLY12 should follow a Systematic Synthetic Phonics (SSP) approach using the 'I Do, We Do, You Do' gradual release model. Emphasise multisensory orthographic mapping by combining auditory stretching, physical tapping (or Elkonin sound boxes with counters), and simultaneous letter formation. Continuous review of the medial /æ/ sound is essential to prevent vowel dropping and prepare students for reading and spelling simple decodable texts.

Writing CVC Words with Short a

Stretching the Sounds

Writing the Word Fan