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

Did you know that four tiny words hide on almost every single page of your storybooks?

We call them **sight words** because once you know them, your brain reads them in a snap!

The word **I** is just one single capital letter, and you use it whenever you talk about yourself.

<!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>Common Words</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

    .nav-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }

    .word-btn {
      flex: 1;
      font-size: 20px;
      font-weight: 700;
      padding: 10px 0;
      border-radius: 12px;
      border: 2px solid transparent;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      text-align: center;
    }

    .word-btn.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 380px;
      height: 220px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }

    .card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 16px;
    }

    .card.active {
      opacity: 1;
      pointer-events: auto;
    }

    .word-display {
      font-size: 56px;
      font-weight: 800;
      color: #22b7ff;
      line-height: 1;
      margin-bottom: 12px;
    }

    .visual-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 40px;
      margin-bottom: 10px;
    }

    .arrow {
      font-size: 24px;
      color: #94a3b8;
    }

    .meaning-label {
      font-size: 18px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 0.5px;
    }

    .dots-container {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

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

    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="word-btn active" data-index="0">I</button>
    <button class="word-btn" data-index="1">a</button>
    <button class="word-btn" data-index="2">the</button>
    <button class="word-btn" data-index="3">is</button>
  </div>

  <div class="stage">
    
    <div class="card active" id="card-0">
      <div class="word-display">I</div>
      <div class="visual-row">
        <span class="arrow">➔</span>
        <span>🙋</span>
      </div>
      <div class="meaning-label">Me</div>
    </div>

    
    <div class="card" id="card-1">
      <div class="word-display">a</div>
      <div class="visual-row">
        <span class="arrow">➔</span>
        <span>🍎</span>
      </div>
      <div class="meaning-label">1 Item</div>
    </div>

    
    <div class="card" id="card-2">
      <div class="word-display">the</div>
      <div class="visual-row">
        <span class="arrow">➔</span>
        <span>👉 ⭐️</span>
      </div>
      <div class="meaning-label">This One</div>
    </div>

    
    <div class="card" id="card-3">
      <div class="word-display">is</div>
      <div class="visual-row">
        <span>🐱</span>
        <span class="arrow">=</span>
        <span>😴</span>
      </div>
      <div class="meaning-label">State</div>
    </div>
  </div>

  <div class="dots-container">
    <div class="dot active" data-index="0"></div>
    <div class="dot" data-index="1"></div>
    <div class="dot" data-index="2"></div>
    <div class="dot" data-index="3"></div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let currentIndex = 0;
    const cards = $$('.card');
    const buttons = $$('.word-btn');
    const dots = $$('.dot');
    let timer = null;

    function showCard(index) {
      currentIndex = index;
      cards.forEach((card, i) => card.classList.toggle('active', i === index));
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === index));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
    }

    function startAutoCycle() {
      stopAutoCycle();
      timer = setInterval(() => {
        const next = (currentIndex + 1) % cards.length;
        showCard(next);
      }, 3200);
    }

    function stopAutoCycle() {
      if (timer) clearInterval(timer);
    }

    buttons.forEach((btn) => {
      onTap(btn, () => {
        stopAutoCycle();
        showCard(parseInt(btn.dataset.index, 10));
      });
    });

    dots.forEach((dot) => {
      onTap(dot, () => {
        stopAutoCycle();
        showCard(parseInt(dot.dataset.index, 10));
      });
    });

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

What if you want to talk about one toy or one animal?

The word **a** is another one-letter word, and it means just one single item.

<!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>The Word 'a'</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: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
  }
  .app {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .nav-tabs {
    display: flex;
    gap: 8px;
    background: #ffffff;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .tab-btn {
    border: none;
    background: transparent;
    font-size: 22px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .tab-btn.active {
    background: #f97316;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.35);
  }
  .display-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .word-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: #fff7ed;
    border: 2px solid #fdba74;
    border-radius: 16px;
  }
  .word-text {
    font-size: 54px;
    font-weight: 800;
    color: #ea580c;
    line-height: 1;
  }
  .equal-sign {
    font-size: 32px;
    font-weight: 700;
    color: #9ca3af;
  }
  .item-box {
    position: relative;
    width: 110px;
    height: 110px;
    background: #f8f9fa;
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item-icon {
    font-size: 56px;
    transition: transform 0.25s ease;
  }
  .count-badge {
    position: absolute;
    bottom: -10px;
    background: #f97316;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
  }
  .phrase-box {
    font-size: 26px;
    font-weight: 700;
    color: #1e2945;
    background: #ffffff;
    padding: 10px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .highlight {
    color: #ea580c;
  }
</style>
</head>
<body>

<div class="app">
  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" onclick="setItem(0)">🐶</button>
    <button class="tab-btn" onclick="setItem(1)">🍎</button>
    <button class="tab-btn" onclick="setItem(2)">⭐</button>
    <button class="tab-btn" onclick="setItem(3)">🚗</button>
  </div>

  <div class="display-card">
    <div class="word-box">
      <span class="word-text">a</span>
    </div>
    
    <span class="equal-sign">=</span>

    <div class="item-box">
      <span id="itemIcon" class="item-icon">🐶</span>
      <span class="count-badge">1</span>
    </div>
  </div>

  <div class="phrase-box">
    <span class="highlight">a</span>
    <span id="phraseLabel">dog</span>
  </div>
</div>

<script>
  const items = [
    { emoji: '🐶', name: 'dog' },
    { emoji: '🍎', name: 'apple' },
    { emoji: '⭐', name: 'star' },
    { emoji: '🚗', name: 'car' }
  ];

  const buttons = document.querySelectorAll('.tab-btn');
  const itemIcon = document.getElementById('itemIcon');
  const phraseLabel = document.getElementById('phraseLabel');

  function setItem(index) {
    buttons.forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });
    itemIcon.textContent = items[index].emoji;
    phraseLabel.textContent = items[index].name;
  }
</script>

</body>
</html>

What word helps us point to something specific that we can see right now?

The word **the** has three letters (t-h-e) working as a team to point out a special thing.

<!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>Decoding the Word 'the'</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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Word Box Container */
    .word-display {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 4px;
    }

    .tile-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      min-width: 90px;
    }

    .tile-btn.active {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 6px 16px rgba(0,0,0,0.08);
      background: #f0fdf4;
    }

    .letter {
      font-size: 40px;
      font-weight: 800;
      line-height: 1.1;
      color: #1e2945;
    }

    .tile-btn.active .letter {
      color: #065f46;
    }

    .sound-badge {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      margin-top: 4px;
      padding: 2px 8px;
      border-radius: 8px;
      background: #f1f5f9;
    }

    .tile-btn.active .sound-badge {
      color: #10b981;
      background: #dcfce7;
    }

    /* Interactive Phonics Card Display */
    .info-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 160px;
      justify-content: center;
      position: relative;
    }

    .visual-icon {
      font-size: 44px;
      margin-bottom: 8px;
      line-height: 1;
    }

    .label-tag {
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 6px;
    }

    .tag-digraph {
      background: #e0f2fe;
      color: #0369a1;
    }

    .tag-schwa {
      background: #fef3c7;
      color: #b45309;
    }

    .tag-whole {
      background: #dcfce7;
      color: #15803d;
    }

    .sound-desc {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Sound Bar Indicator */
    .sound-waves {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-top: 10px;
      height: 20px;
    }

    .wave-bar {
      width: 4px;
      background: #10b981;
      border-radius: 2px;
      height: 8px;
      transition: height 0.2s ease;
    }

    .playing .wave-bar:nth-child(1) { height: 16px; }
    .playing .wave-bar:nth-child(2) { height: 22px; }
    .playing .wave-bar:nth-child(3) { height: 12px; }
    .playing .wave-bar:nth-child(4) { height: 18px; }

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

    .nav-tab {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .nav-tab.active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="word-display">
      <button class="tile-btn active" id="tile-th" onclick="showPart(0)">
        <span class="letter">th</span>
        <span class="sound-badge">/ð/</span>
      </button>

      <button class="tile-btn" id="tile-e" onclick="showPart(1)">
        <span class="letter">e</span>
        <span class="sound-badge">/ə/</span>
      </button>

      <button class="tile-btn" id="tile-all" onclick="showPart(2)">
        <span class="letter">the</span>
        <span class="sound-badge">blend</span>
      </button>
    </div>

    
    <div class="info-card" id="info-card">
      <div class="visual-icon" id="card-icon">⚡</div>
      <div class="label-tag tag-digraph" id="card-tag">Digraph</div>
      <div class="sound-desc" id="card-desc">Voiced Buzz /ð/</div>
      
      <div class="sound-waves" id="waves">
        <div class="wave-bar"></div>
        <div class="wave-bar"></div>
        <div class="wave-bar"></div>
        <div class="wave-bar"></div>
      </div>
    </div>

    
    <div class="nav-bar">
      <button class="nav-tab active" id="tab-0" onclick="showPart(0)">1. Digraph "th"</button>
      <button class="nav-tab" id="tab-1" onclick="showPart(1)">2. Schwa "e"</button>
      <button class="nav-tab" id="tab-2" onclick="showPart(2)">3. Whole Word</button>
    </div>
  </div>

  <script>
    const data = [
      {
        icon: "🐝",
        tag: "Digraph",
        tagClass: "tag-digraph",
        desc: 'Voiced Buzz "/th/"',
        audioText: "th"
      },
      {
        icon: "🗣️",
        tag: "Schwa Vowel",
        tagClass: "tag-schwa",
        desc: 'Soft Sound "uh"',
        audioText: "uh"
      },
      {
        icon: "👉 🐶",
        tag: "Whole Word",
        tagClass: "tag-whole",
        desc: '"the" points out 1 item',
        audioText: "the"
      }
    ];

    let current = 0;
    let waveTimer = null;

    function playAudio(text) {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utter = new SpeechSynthesisUtterance(text);
        utter.rate = 0.85;
        window.speechSynthesis.speak(utter);
      }
      
      const waves = document.getElementById('waves');
      waves.classList.add('playing');
      clearTimeout(waveTimer);
      waveTimer = setTimeout(() => {
        waves.classList.remove('playing');
      }, 700);
    }

    function showPart(idx) {
      current = idx;
      
      // Update tiles
      document.getElementById('tile-th').className = 'tile-btn' + (idx === 0 ? ' active' : '');
      document.getElementById('tile-e').className = 'tile-btn' + (idx === 1 ? ' active' : '');
      document.getElementById('tile-all').className = 'tile-btn' + (idx === 2 ? ' active' : '');

      // Update tabs
      for (let i = 0; i < 3; i++) {
        document.getElementById(`tab-${i}`).className = 'nav-tab' + (idx === i ? ' active' : '');
      }

      // Update Card
      const item = data[idx];
      document.getElementById('card-icon').textContent = item.icon;
      const tagEl = document.getElementById('card-tag');
      tagEl.textContent = item.tag;
      tagEl.className = 'label-tag ' + item.tagClass;
      document.getElementById('card-desc').textContent = item.desc;

      playAudio(item.audioText);
    }
  </script>
</body>
</html>

The letters **th** form a regular digraph making a voiced buzzing sound, while the vowel **e** makes a tricky schwa sound ("uh").

This makes **the** a **Heart Word**—you sound out the regular part and learn the tricky vowel part by heart!

The digraph **th** makes its regular voiced /ð/ sound, while the letter **e** makes a tricky schwa /ə/ sound (or /iː/ before vowels).

Because part of the spelling is unexpected, we call **the** a **Heart Word**—a word where you learn the tricky part by heart!

How do we link things together to say what they are like?

The word **is** acts like a little bridge connecting a thing to how it looks or feels.

<!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>The Word 'is' as a Bridge</title>
  <script src="https://cdn.classace.io/vendor/classace-diagram.js"></script>
  <style>
    :root {
      --primary: #8b5cf6;
      --primary-light: #ede9fe;
      --primary-dark: #6d28d9;
      --text: #1e2945;
      --muted: #6b7280;
      --bg: #f8f9fa;
      --bridge: #f59e0b;
      --bridge-light: #fef3c7;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Tabs */
    .tab-bar {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

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

    /* Stage Area */
    .stage {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 12px 4px;
    }

    .node-card {
      width: 31%;
      background: #ffffff;
      border-radius: 16px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.08);
      border: 2px solid #e9d5ff;
      transition: transform 0.3s ease, border-color 0.3s ease;
      min-height: 108px;
      text-align: center;
    }

    .node-emoji {
      font-size: 32px;
      line-height: 1;
    }

    .node-label {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    /* Bridge in center */
    .bridge-wrap {
      width: 32%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .bridge-arch {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .arch-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .bridge-pill {
      background: var(--bridge-light);
      border: 2px solid var(--bridge);
      color: #92400e;
      font-size: 20px;
      font-weight: 800;
      padding: 4px 16px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
      letter-spacing: 0.5px;
      z-index: 2;
      animation: pulseBridge 2.5s infinite ease-in-out;
    }

    @keyframes pulseBridge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    .bridge-caption {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #b45309;
      margin-top: 4px;
    }

    /* Combined Sentence Display */
    .sentence-card {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
      border: 1px solid #f1f5f9;
    }

    .word-part {
      display: inline-flex;
      align-items: center;
    }

    .word-is {
      background: var(--bridge-light);
      color: #b45309;
      padding: 2px 10px;
      border-radius: 8px;
      border: 1.5px solid var(--bridge);
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      color: var(--text);
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: background 0.2s ease;
    }

    .ctrl-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="tab-bar">
      <button class="tab-btn active" data-idx="0">🐱 Cat</button>
      <button class="tab-btn" data-idx="1">☀️ Sun</button>
      <button class="tab-btn" data-idx="2">🐶 Dog</button>
    </div>

    
    <div class="stage">
      
      <div class="node-card" id="leftCard">
        <div class="node-emoji" id="leftEmoji">🐱</div>
        <div class="node-label" id="leftText">The cat</div>
      </div>

      
      <div class="bridge-wrap">
        <div class="bridge-arch">
          <svg class="arch-svg" viewBox="0 0 100 24" preserveAspectRatio="none">
            <path d="M 0,20 Q 50,0 100,20" fill="none" stroke="#f59e0b" stroke-width="4" stroke-dasharray="4,4" />
          </svg>
        </div>
        <div class="bridge-pill">is</div>
        <div class="bridge-caption">bridge</div>
      </div>

      
      <div class="node-card" id="rightCard">
        <div class="node-emoji" id="rightEmoji">☁️</div>
        <div class="node-label" id="rightText">soft</div>
      </div>
    </div>

    
    <div class="sentence-card">
      <span class="word-part" id="sentLeft">The cat</span>
      <span class="word-is">is</span>
      <span class="word-part" id="sentRight">soft.</span>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn" aria-label="Previous">◀</button>
      <button class="ctrl-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
      <button class="ctrl-btn" id="nextBtn" aria-label="Next">▶</button>
    </div>
  </div>

  <script>
    const data = [
      { leftText: 'The cat', leftEmoji: '🐱', rightText: 'soft', rightEmoji: '☁️' },
      { leftText: 'The sun', leftEmoji: '☀️', rightText: 'hot', rightEmoji: '🔥' },
      { leftText: 'The dog', leftEmoji: '🐶', rightText: 'big', rightEmoji: '🦴' }
    ];

    let current = 0;
    let timer = null;
    let playing = true;

    function render(idx) {
      current = idx;
      const d = data[idx];
      
      document.getElementById('leftEmoji').textContent = d.leftEmoji;
      document.getElementById('leftText').textContent = d.leftText;
      document.getElementById('rightEmoji').textContent = d.rightEmoji;
      document.getElementById('rightText').textContent = d.rightText;
      
      document.getElementById('sentLeft').textContent = d.leftText;
      document.getElementById('sentRight').textContent = d.rightText + '.';

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

    function next() {
      render((current + 1) % data.length);
    }

    function prev() {
      render((current - 1 + data.length) % data.length);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(next, 3200);
      playing = true;
      document.getElementById('playBtn').textContent = '⏸';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      playing = false;
      document.getElementById('playBtn').textContent = '▶';
    }

    document.querySelectorAll('.tab-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.getAttribute('data-idx'), 10);
        render(idx);
        if (playing) startAuto();
      });
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      prev();
      if (playing) startAuto();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      next();
      if (playing) startAuto();
    });

    document.getElementById('playBtn').addEventListener('click', () => {
      if (playing) {
        stopAuto();
      } else {
        startAuto();
      }
    });

    // Start auto loop
    startAuto();
  </script>
</body>
</html>

Can we put all four words into one reading adventure?

Let's read two sentences together using all four of our new sight words.

<!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>Reading Common Words: I, a, the, is</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    .sight-board {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      padding: 12px;
    }

    /* Word Badges Bar */
    .word-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .pill {
      font-size: 18px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      color: #1e2945;
      cursor: pointer;
      user-select: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .pill.w-i.active { background: #dbeafe; border-color: #2563eb; color: #1e40af; }
    .pill.w-a.active { background: #dcfce7; border-color: #059669; color: #065f46; }
    .pill.w-the.active { background: #f3e8ff; border-color: #7c3aed; color: #5b21b6; }
    .pill.w-is.active { background: #fef3c7; border-color: #d97706; color: #92400e; }

    /* Sentence Stage Container */
    .stage-container {
      position: relative;
      width: 100%;
      height: 180px;
      overflow: hidden;
    }

    .sentence-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .sentence-card.active {
      opacity: 1;
      pointer-events: auto;
    }

    .scene-emoji {
      font-size: 48px;
      line-height: 1;
    }

    .sentence-text {
      font-size: 28px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .target-word {
      padding: 2px 10px;
      border-radius: 8px;
      border-bottom: 3px solid transparent;
      transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    .target-word.w-i { background: #eff6ff; border-bottom-color: #2563eb; color: #1e40af; }
    .target-word.w-a { background: #f0fdf4; border-bottom-color: #059669; color: #065f46; }
    .target-word.w-the { background: #faf5ff; border-bottom-color: #7c3aed; color: #5b21b6; }
    .target-word.w-is { background: #fffbeb; border-bottom-color: #d97706; color: #92400e; }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #e5e7eb;
      background: #ffffff;
      font-size: 16px;
      font-weight: bold;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s ease;
    }

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

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

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

    .dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="sight-board">
    
    <div class="word-pills">
      <div class="pill w-i active" data-word="i">I</div>
      <div class="pill w-a active" data-word="a">a</div>
      <div class="pill w-the" data-word="the">the</div>
      <div class="pill w-is" data-word="is">is</div>
    </div>

    
    <div class="stage-container">
      
      <div class="sentence-card active step" id="card-0">
        <div class="scene-emoji">🐱</div>
        <div class="sentence-text">
          <span class="target-word w-i">I</span>
          <span>see</span>
          <span class="target-word w-a">a</span>
          <span>cat.</span>
        </div>
      </div>

      
      <div class="sentence-card step" id="card-1">
        <div class="scene-emoji">☀️</div>
        <div class="sentence-text">
          <span class="target-word w-the">The</span>
          <span>sun</span>
          <span class="target-word w-is">is</span>
          <span>hot.</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="nav-btn" id="prevBtn" aria-label="Previous">◀</button>
      <div class="step-dots">
        <div class="dot active"></div>
        <div class="dot"></div>
      </div>
      <button class="nav-btn" id="nextBtn" aria-label="Next">▶</button>
    </div>
  </div>

  <script>
    const pills = $$('.pill');
    const dots = $$('.dot');

    function updatePills(index) {
      dots.forEach((d, i) => d.classList.toggle('active', i === index));
      if (index === 0) {
        pills.forEach(p => {
          const w = p.dataset.word;
          p.classList.toggle('active', w === 'i' || w === 'a');
        });
      } else {
        pills.forEach(p => {
          const w = p.dataset.word;
          p.classList.toggle('active', w === 'the' || w === 'is');
        });
      }
    }

    const player = new StepPlayer('.step', {
      interval: 4000,
      onChange: (idx) => updatePills(idx)
    });

    player.start();

    onTap($('#prevBtn'), () => player.prev());
    onTap($('#nextBtn'), () => player.next());

    dots.forEach((dot, i) => {
      onTap(dot, () => player.goTo(i));
    });

    pills.forEach((pill) => {
      onTap(pill, () => {
        const w = pill.dataset.word;
        if (w === 'i' || w === 'a') {
          player.goTo(0);
        } else {
          player.goTo(1);
        }
      });
    });
  </script>
</body>
</html>

Next time you open your favorite book, see how fast you can point to **I**, **a**, **the**, and **is** on the page!

Reading Common Words: I, a, the, is. Read the high-frequency words I, a, the and is on sight.

Foundation English: Read Sight Words & Spell the Sight Word

Early Years Phonics: Tricky and High Frequency Words

Heart Word Instructional Activities & High-Frequency Word Routines

Effective instruction for Foundation students under the Australian Curriculum (AC9EFLY14) moves away from rote whole-word flashcard memorisation. Instead, it uses evidence-based orthographic mapping and the 'Heart Word' technique: explicitly teaching students to map the regular grapheme-phoneme correspondences first (e.g., 'th' in 'the', 'i' in 'is') and draw attention to the temporary or irregular phoneme to remember 'by heart'. Pairing multisensory tracing with immediate reading in decodable sentences solidifies automatic word recognition.

Reading Common Words: I, a, the, is

The Word I

The Word a

The Word the