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

Have you ever heard a robot talk? Robots say words one... by... one, like a ticking clock!

When we read out loud, we do not want to sound like robots. We group words into small, friendly chunks called **phrases** so our voice sounds smooth.

<!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>Phrasing in Sentences</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background-color: #fdfbf7;
    color: #1e2945;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    user-select: none;
    -webkit-user-select: none;
  }

  .mode-switch {
    display: flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 24px;
    gap: 4px;
  }

  .mode-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mode-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .display-area {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .sentence-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
    width: 100%;
    margin-bottom: 12px;
  }

  .phrase-group {
    display: flex;
    gap: 8px;
    position: relative;
    padding: 8px 12px 14px;
    border-radius: 12px;
    transition: background 0.3s ease;
  }

  .word-card {
    font-size: 20px;
    font-weight: 600;
    color: #1e2945;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
  }

  /* Robot / Choppy Mode Styling */
  .mode-choppy .word-card {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
  }

  .mode-choppy .word-card.lit {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
  }

  /* Scoop / Smooth Mode Styling */
  .mode-smooth .phrase-group {
    background: #f0fdf4;
    border: 2px solid transparent;
  }

  .mode-smooth .phrase-group.lit {
    background: #dcfce7;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
  }

  .mode-smooth .phrase-group.lit .word-card {
    color: #15803d;
  }

  /* Scoop underline SVG */
  .scoop-svg {
    position: absolute;
    bottom: -2px;
    left: 8px;
    right: 8px;
    width: calc(100% - 16px);
    height: 14px;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mode-smooth .scoop-svg {
    opacity: 1;
  }

  .scoop-path {
    fill: none;
    stroke: #22c55e;
    stroke-width: 3.5;
    stroke-linecap: round;
  }

  .status-badge {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    transition: all 0.3s ease;
  }

  .badge-choppy {
    background: #fef2f2;
    color: #dc2626;
  }

  .badge-smooth {
    background: #f0fdf4;
    color: #16a34a;
  }

  .controls {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .btn-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #3b82f6;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
    transition: background 0.2s ease;
  }

  .btn-play:active {
    background: #2563eb;
  }
</style>
</head>
<body>

<div class="mode-switch">
  <button id="btnChoppy" class="mode-btn active" onclick="setMode('choppy')">🤖 Choppy</button>
  <button id="btnSmooth" class="mode-btn" onclick="setMode('smooth')">🌊 Smooth</button>
</div>

<div id="displayArea" class="display-area mode-choppy">
  <div class="sentence-row">
    
    <div class="phrase-group" id="phrase0">
      <div class="word-card" id="w0">The</div>
      <div class="word-card" id="w1">big</div>
      <div class="word-card" id="w2">dog</div>
      <svg class="scoop-svg" viewBox="0 0 100 12" preserveAspectRatio="none">
        <path class="scoop-path" d="M 2,2 Q 50,14 98,2" />
      </svg>
    </div>

    
    <div class="phrase-group" id="phrase1">
      <div class="word-card" id="w3">ran</div>
      <div class="word-card" id="w4">fast</div>
      <svg class="scoop-svg" viewBox="0 0 100 12" preserveAspectRatio="none">
        <path class="scoop-path" d="M 2,2 Q 50,14 98,2" />
      </svg>
    </div>
  </div>

  <div id="statusBadge" class="status-badge badge-choppy">Robot: Word by Word</div>
</div>

<div class="controls">
  <button id="playBtn" class="btn-play" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
</div>

<script>
  let mode = 'choppy';
  let isPlaying = true;
  let timer = null;
  let step = 0;

  const words = [
    document.getElementById('w0'),
    document.getElementById('w1'),
    document.getElementById('w2'),
    document.getElementById('w3'),
    document.getElementById('w4')
  ];

  const phrases = [
    document.getElementById('phrase0'),
    document.getElementById('phrase1')
  ];

  const displayArea = document.getElementById('displayArea');
  const statusBadge = document.getElementById('statusBadge');
  const btnChoppy = document.getElementById('btnChoppy');
  const btnSmooth = document.getElementById('btnSmooth');
  const playBtn = document.getElementById('playBtn');

  function clearHighlights() {
    words.forEach(w => w.classList.remove('lit'));
    phrases.forEach(p => p.classList.remove('lit'));
  }

  function tick() {
    clearHighlights();
    if (mode === 'choppy') {
      words[step % words.length].classList.add('lit');
      step = (step + 1) % words.length;
    } else {
      phrases[step % phrases.length].classList.add('lit');
      step = (step + 1) % phrases.length;
    }
  }

  function startLoop() {
    if (timer) clearInterval(timer);
    tick();
    const interval = mode === 'choppy' ? 650 : 1300;
    if (isPlaying) {
      timer = setInterval(tick, interval);
    }
  }

  function setMode(newMode) {
    mode = newMode;
    step = 0;
    if (mode === 'choppy') {
      btnChoppy.classList.add('active');
      btnSmooth.classList.remove('active');
      displayArea.className = 'display-area mode-choppy';
      statusBadge.className = 'status-badge badge-choppy';
      statusBadge.textContent = 'Robot: Word by Word';
    } else {
      btnSmooth.classList.add('active');
      btnChoppy.classList.remove('active');
      displayArea.className = 'display-area mode-smooth';
      statusBadge.className = 'status-badge badge-smooth';
      statusBadge.textContent = 'Smooth: Scoop Phrases';
    }
    startLoop();
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    playBtn.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      startLoop();
    } else {
      clearInterval(timer);
    }
  }

  startLoop();
</script>

</body>
</html>

How do you know which words belong together in a scoop? Let's look at the secret clues inside a sentence.

Words that tell **who**, **what happened**, or **where** like to stick together in the same phrase.

<!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>Phrasing in Sentences</title>
<script src="https://cdn.jsdelivr.net/npm/classace-diagram@1.0.0/dist/index.min.js"></script>
<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: 100vh;
    padding: 16px;
    gap: 16px;
  }

  .controls-row {
    display: flex;
    gap: 8px;
    background: #ffffff;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

  .toggle-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .toggle-btn.active {
    background: #1e2945;
    color: #ffffff;
  }

  .stage {
    width: 100%;
    max-width: 580px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .phrase-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
  }

  .phrase-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.45;
  }

  .phrase-block.active {
    opacity: 1;
    transform: translateY(-4px);
  }

  .phrase-tag {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: capitalize;
    margin-bottom: 8px;
    transition: all 0.25s ease;
  }

  .tag-who { background: #ffedd5; color: #ea580c; }
  .tag-what { background: #dbeafe; color: #2563eb; }
  .tag-where { background: #dcfce7; color: #16a34a; }

  .phrase-text {
    font-size: 21px;
    font-weight: 600;
    color: #1e2945;
    letter-spacing: -0.2px;
    white-space: nowrap;
    padding: 0 4px;
  }

  .scoop-svg {
    width: 100%;
    height: 18px;
    margin-top: 4px;
    overflow: visible;
  }

  .scoop-path {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s ease, stroke 0.25s ease;
  }

  .scoop-who { stroke: #f97316; }
  .scoop-what { stroke: #3b82f6; }
  .scoop-where { stroke: #10b981; }

  .stepper-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .nav-btn {
    border: none;
    background: #f1f5f9;
    color: #1e2945;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
  }
  .nav-btn:hover {
    background: #e2e8f0;
  }

  .step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .step-dot.active {
    background: #1e2945;
    transform: scale(1.25);
  }
</style>
</head>
<body>

  <div class="controls-row">
    <button class="toggle-btn active" id="btnS1">Sentence 1</button>
    <button class="toggle-btn" id="btnS2">Sentence 2</button>
  </div>

  <div class="stage">
    <div class="phrase-container" id="phraseContainer">
      
    </div>

    <div class="stepper-nav">
      <button class="nav-btn" id="playBtn">▶ Auto</button>
      <div style="display: flex; gap: 6px; align-items: center; margin: 0 4px;">
        <div class="step-dot" id="dot0"></div>
        <div class="step-dot" id="dot1"></div>
        <div class="step-dot" id="dot2"></div>
        <div class="step-dot" id="dot3"></div>
      </div>
      <button class="nav-btn" id="nextBtn">Next →</button>
    </div>
  </div>

<script>
  const sentences = [
    [
      { type: 'who', label: 'Who', text: 'The brown puppy' },
      { type: 'what', label: 'What happened', text: 'ran quickly' },
      { type: 'where', label: 'Where', text: 'in the park.' }
    ],
    [
      { type: 'who', label: 'Who', text: 'A quiet frog' },
      { type: 'what', label: 'What happened', text: 'hopped away' },
      { type: 'where', label: 'Where', text: 'into the pond.' }
    ]
  ];

  let currentSentenceIdx = 0;
  let currentStep = 3; // 0: Who, 1: What, 2: Where, 3: All
  let autoTimer = null;

  const container = document.getElementById('phraseContainer');
  const btnS1 = document.getElementById('btnS1');
  const btnS2 = document.getElementById('btnS2');
  const playBtn = document.getElementById('playBtn');
  const nextBtn = document.getElementById('nextBtn');
  const dots = [
    document.getElementById('dot0'),
    document.getElementById('dot1'),
    document.getElementById('dot2'),
    document.getElementById('dot3')
  ];

  function renderSentence() {
    const data = sentences[currentSentenceIdx];
    container.innerHTML = '';

    data.forEach((p, idx) => {
      const block = document.createElement('div');
      block.className = `phrase-block`;
      block.id = `block-${idx}`;
      block.onclick = () => setStep(idx);

      block.innerHTML = `
        <span class="phrase-tag tag-${p.type}">${p.label}</span>
        <span class="phrase-text">${p.text}</span>
        <svg class="scoop-svg" viewBox="0 0 120 16" preserveAspectRatio="none">
          <path class="scoop-path scoop-${p.type}" d="M 4 2 Q 60 18 116 2" />
        </svg>
      `;
      container.appendChild(block);
    });

    updateVisuals();
  }

  function updateVisuals() {
    const blocks = document.querySelectorAll('.phrase-block');
    blocks.forEach((block, idx) => {
      if (currentStep === 3 || currentStep === idx) {
        block.classList.add('active');
      } else {
        block.classList.remove('active');
      }
    });

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

  function setStep(step) {
    currentStep = step;
    updateVisuals();
  }

  function nextStep() {
    setStep((currentStep + 1) % 4);
  }

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

  btnS1.onclick = () => {
    currentSentenceIdx = 0;
    btnS1.classList.add('active');
    btnS2.classList.remove('active');
    renderSentence();
  };

  btnS2.onclick = () => {
    currentSentenceIdx = 1;
    btnS2.classList.add('active');
    btnS1.classList.remove('active');
    renderSentence();
  };

  playBtn.onclick = toggleAuto;
  nextBtn.onclick = () => {
    if (autoTimer) {
      clearInterval(autoTimer);
      autoTimer = null;
      playBtn.textContent = '▶ Auto';
    }
    nextStep();
  };

  dots.forEach((dot, idx) => {
    dot.onclick = () => {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
        playBtn.textContent = '▶ Auto';
      }
      setStep(idx);
    };
  });

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

When you read each scoop in one easy breath without stopping, your reading sounds just like natural talking.

What happens if we take a breath in the wrong spot? Let's test it out.

If we stop inside a phrase, like saying 'The big... yellow bus,' the picture in our mind breaks into pieces.

<!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 Words Smoothly: Phrasing</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #f8f9fa;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-layout {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }
    /* Mode selector tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      max-width: 200px;
      padding: 10px 14px;
      font-size: 15px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .tab-btn:hover {
      opacity: 0.9;
    }
    .tab-btn.active-robot {
      background: #fef2f2;
      border-color: #f87171;
      color: #b91c1c;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
    }
    .tab-btn.active-smooth {
      background: #eff6ff;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    /* Sentence Display Board */
    .display-board {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      min-height: 180px;
      justify-content: center;
    }

    /* Words row */
    .sentence-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      align-items: center;
      width: 100%;
    }

    /* Phrases container in smooth mode */
    .phrase-group {
      display: flex;
      gap: 6px;
      position: relative;
      padding: 6px 10px;
      border-radius: 10px;
      transition: background 0.3s;
    }

    /* Individual word cards */
    .word {
      font-size: 20px;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #334155;
      border: 2px solid transparent;
      transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
      position: relative;
    }

    /* Robot state styling */
    .robot-view .word {
      border: 2px dashed #cbd5e1;
      background: #ffffff;
    }
    .robot-view .word.active {
      background: #fee2e2;
      border-color: #ef4444;
      color: #b91c1c;
    }

    /* Smooth state styling */
    .smooth-view .phrase-group {
      background: #f0f9ff;
      border-bottom: 4px solid #38bdf8;
      border-radius: 10px 10px 14px 14px;
    }
    .smooth-view .phrase-group.active {
      background: #e0f2fe;
      border-bottom-color: #0284c7;
    }
    .smooth-view .phrase-group.active .word {
      color: #0369a1;
    }

    /* Scoop SVG arc underline */
    .scoop-badge {
      display: none;
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 4px;
      text-align: center;
    }
    .smooth-view .scoop-badge {
      display: block;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .play-btn {
      background: #22b7ff;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s, background 0.2s;
    }
    .play-btn:hover {
      opacity: 0.9;
    }

    .tempo-indicator {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    @media (max-width: 400px) {
      .word {
        font-size: 17px;
        padding: 4px 6px;
      }
      .tab-btn {
        font-size: 13px;
        padding: 8px 10px;
      }
    }
  </style>
</head>
<body>

<div class="main-layout">
  
  <div class="tabs">
    <button class="tab-btn active-robot" id="btnRobot" onclick="setMode('robot')">
      <span>🤖</span> Choppy
    </button>
    <button class="tab-btn" id="btnSmooth" onclick="setMode('smooth')">
      <span>🌊</span> Smooth
    </button>
  </div>

  
  <div class="display-board robot-view" id="board">
    <div class="sentence-row">
      
      <div class="phrase-group" id="phrase1">
        <span class="word" id="w0">The</span>
        <span class="word" id="w1">big</span>
        <span class="word" id="w2">brown</span>
        <span class="word" id="w3">bear</span>
      </div>

      
      <div class="phrase-group" id="phrase2">
        <span class="word" id="w4">walked</span>
        <span class="word" id="w5">away</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">▶</span> <span id="playText">Read Aloud</span>
    </button>
    <span class="tempo-indicator" id="tempoText">Word by word</span>
  </div>
</div>

<script>
  let currentMode = 'robot';
  let isPlaying = false;
  let timer = null;
  let step = 0;

  const board = document.getElementById('board');
  const btnRobot = document.getElementById('btnRobot');
  const btnSmooth = document.getElementById('btnSmooth');
  const playIcon = document.getElementById('playIcon');
  const playText = document.getElementById('playText');
  const tempoText = document.getElementById('tempoText');

  const words = [
    document.getElementById('w0'),
    document.getElementById('w1'),
    document.getElementById('w2'),
    document.getElementById('w3'),
    document.getElementById('w4'),
    document.getElementById('w5')
  ];

  const phrase1 = document.getElementById('phrase1');
  const phrase2 = document.getElementById('phrase2');

  function clearActive() {
    words.forEach(w => w.classList.remove('active'));
    phrase1.classList.remove('active');
    phrase2.classList.remove('active');
  }

  function setMode(mode) {
    pause();
    currentMode = mode;
    clearActive();

    if (mode === 'robot') {
      btnRobot.className = 'tab-btn active-robot';
      btnSmooth.className = 'tab-btn';
      board.className = 'display-board robot-view';
      tempoText.textContent = 'Word by word';
    } else {
      btnRobot.className = 'tab-btn';
      btnSmooth.className = 'tab-btn active-smooth';
      board.className = 'display-board smooth-view';
      tempoText.textContent = 'Scooped phrases';
    }
  }

  function togglePlay() {
    if (isPlaying) {
      pause();
    } else {
      play();
    }
  }

  function pause() {
    isPlaying = false;
    clearTimeout(timer);
    playIcon.textContent = '▶';
    playText.textContent = 'Read Aloud';
    step = 0;
    clearActive();
  }

  function play() {
    isPlaying = true;
    playIcon.textContent = '⏸';
    playText.textContent = 'Pause';
    step = 0;
    runStep();
  }

  function runStep() {
    if (!isPlaying) return;
    clearActive();

    if (currentMode === 'robot') {
      if (step < words.length) {
        words[step].classList.add('active');
        step++;
        timer = setTimeout(runStep, 750); // Robotic, steady ticking pause
      } else {
        step = 0;
        timer = setTimeout(runStep, 1000);
      }
    } else {
      // Smooth phrasing: 2 scoops
      if (step === 0) {
        phrase1.classList.add('active');
        step = 1;
        timer = setTimeout(runStep, 1300); // Flow smoothly through phrase 1
      } else if (step === 1) {
        phrase2.classList.add('active');
        step = 2;
        timer = setTimeout(runStep, 1300); // Flow smoothly through phrase 2
      } else {
        step = 0;
        timer = setTimeout(runStep, 1000);
      }
    }
  }
</script>

</body>
</html>

Before you read a sentence out loud, slide your finger under two or three words at a time to **pre-scoop** them in your mind.

Reading Words Smoothly: Phrasing in Sentences. Read words in phrases rather than one word at a time to build fluency.

Phrase-Cued Reading Strategy Guide and Classroom Fluency Routines

Phrased Text Reading: Visual Scaffolds and Scooping for Oral Reading Fluency

Developing Reading Fluency and Prosody: Systematic Phrased Reading in Early Primary

In Years 1-2, explicit fluency instruction must move beyond word-level automaticity into sentence prosody. Employ an 'I Do, We Do, You Do' gradual release model: first demonstrate robotic vs. phrased reading to build metacognitive awareness, model scooping with physical hand sweeps or curved pencil arcs, conduct choral and echo rereading of phrase-cued decodable texts, and ensure students understand that phrasing serves the ultimate purpose of comprehension.

Reading Words Smoothly: Phrasing in Sentences

Scooping Words Together

The Smooth Scoop Test