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 happens if you run down a steep hill as fast as you can without stopping? Your legs get wobbly, you run out of air, and you tumble over!

Reading words without stopping is just like that. Your voice runs out of breath, words crash into each other, and the story stops making sense.

So how does your voice know when to slow down and breathe? Let's look at two special road signs hiding right inside your sentences.

A **period** is a little dot at the end of a sentence that tells you to make a **full stop**. You stop your voice, take a full breath, and count to two in your head.

A **comma** looks like a tiny curved hook inside a sentence that tells you to make a **quick pause**. It is just a quick tap on the brakes—about as long as a finger snap!

<!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>Pausing at Punctuation</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: 100vh;
      padding: 16px;
    }

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

    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }

    .tab-btn {
      flex: 1;
      max-width: 200px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

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

    .stage {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      position: relative;
    }

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

    .phrase-chunk {
      display: flex;
      align-items: baseline;
      padding: 8px 12px;
      border-radius: 8px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .phrase-chunk.active {
      background: #e0f2fe;
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px #bae6fd;
    }

    .word {
      font-size: 19px;
      font-weight: 600;
      color: #1e2945;
      margin: 0 3px;
      transition: color 0.2s ease;
    }

    .word.highlight {
      color: #0284c7;
    }

    .comma {
      font-size: 26px;
      font-weight: 800;
      color: #0284c7;
      line-height: 0;
      position: relative;
      top: 2px;
    }

    .pause-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      background: #fef3c7;
      border: 1px solid #fde68a;
      border-radius: 6px;
      opacity: 0.25;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    }

    .pause-indicator.active {
      opacity: 1;
      transform: translateY(-2px);
      background: #fde047;
      border-color: #facc15;
    }

    .pause-icon {
      font-size: 15px;
      line-height: 1;
    }

    .pause-text {
      font-size: 11px;
      font-weight: 700;
      color: #854d0e;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chunk-labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 420px;
      gap: 12px;
    }

    .label-tag {
      flex: 1;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      padding: 4px 8px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
    }

    .label-tag.active {
      color: #0369a1;
      background: #f0f9ff;
      border-color: #7dd3fc;
    }

    .playback-bar {
      width: 100%;
      height: 6px;
      background: #f1f5f9;
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .playback-fill {
      height: 100%;
      width: 0%;
      background: #22b7ff;
      border-radius: 999px;
    }

    .play-btn {
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: background 0.2s ease;
    }

    .play-btn:active {
      background: #0f172a;
    }
  </style>
</head>
<body>
  <div class="main-container">
    <div class="controls">
      <button class="tab-btn active" id="btnPhrased" onclick="setMode('phrased')">
        <span>⏸️</span> With Pause
      </button>
      <button class="tab-btn" id="btnRushed" onclick="setMode('rushed')">
        <span>💨</span> No Pause
      </button>
    </div>

    <div class="stage">
      <div class="sentence-row" id="sentenceRow">
        <div class="phrase-chunk" id="chunk1">
          <span class="word" id="w1">After</span>
          <span class="word" id="w2">the</span>
          <span class="word" id="w3">rain</span>
          <span class="comma" id="comma">,</span>
        </div>

        <div class="pause-indicator" id="pauseBadge">
          <span class="pause-icon">⏱️</span>
          <span class="pause-text">Pause</span>
        </div>

        <div class="phrase-chunk" id="chunk2">
          <span class="word" id="w4">the</span>
          <span class="word" id="w5">sun</span>
          <span class="word" id="w6">came</span>
          <span class="word" id="w7">out.</span>
        </div>
      </div>

      <div class="chunk-labels" id="chunkLabels">
        <div class="label-tag" id="tag1">Phrase 1</div>
        <div class="label-tag" id="tag2">Phrase 2</div>
      </div>

      <div class="playback-bar">
        <div class="playback-fill" id="progress"></div>
      </div>

      <button class="play-btn" id="playBtn" onclick="playReading()">
        <span>▶</span> Play
      </button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script>
    let currentMode = 'phrased';
    let currentTL = null;

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

    const chunk1 = document.getElementById('chunk1');
    const chunk2 = document.getElementById('chunk2');
    const tag1 = document.getElementById('tag1');
    const tag2 = document.getElementById('tag2');
    const pauseBadge = document.getElementById('pauseBadge');
    const progress = document.getElementById('progress');
    const playBtn = document.getElementById('playBtn');

    function resetVisuals() {
      if (currentTL) currentTL.kill();
      words.forEach(w => w.classList.remove('highlight'));
      chunk1.classList.remove('active');
      chunk2.classList.remove('active');
      tag1.classList.remove('active');
      tag2.classList.remove('active');
      pauseBadge.classList.remove('active');
      progress.style.width = '0%';
      playBtn.innerHTML = '<span>▶</span> Play';
    }

    function setMode(mode) {
      currentMode = mode;
      document.getElementById('btnPhrased').classList.toggle('active', mode === 'phrased');
      document.getElementById('btnRushed').classList.toggle('active', mode === 'rushed');

      const comma = document.getElementById('comma');
      const chunkLabels = document.getElementById('chunkLabels');

      if (mode === 'phrased') {
        comma.style.display = 'inline';
        pauseBadge.style.display = 'flex';
        chunkLabels.style.opacity = '1';
        chunk1.style.background = '#f1f5f9';
        chunk2.style.background = '#f1f5f9';
      } else {
        comma.style.display = 'none';
        pauseBadge.style.display = 'none';
        chunkLabels.style.opacity = '0.3';
        chunk1.style.background = '#ffffff';
        chunk2.style.background = '#ffffff';
      }
      resetVisuals();
    }

    function playReading() {
      resetVisuals();
      playBtn.innerHTML = '<span>⏸</span> Playing';

      currentTL = gsap.timeline({
        onComplete: () => {
          playBtn.innerHTML = '<span>↺</span> Replay';
        }
      });

      if (currentMode === 'phrased') {
        currentTL.to(progress, { width: '100%', duration: 3.6, ease: 'linear' }, 0);

        // Phrase 1
        currentTL.call(() => {
          chunk1.classList.add('active');
          tag1.classList.add('active');
        }, null, 0);

        currentTL.call(() => words[0].classList.add('highlight'), null, 0.1);
        currentTL.call(() => words[1].classList.add('highlight'), null, 0.4);
        currentTL.call(() => words[2].classList.add('highlight'), null, 0.7);

        // Comma Pause (Snap!)
        currentTL.call(() => {
          words.forEach(w => w.classList.remove('highlight'));
          chunk1.classList.remove('active');
          tag1.classList.remove('active');
          pauseBadge.classList.add('active');
        }, null, 1.2);

        // Phrase 2
        currentTL.call(() => {
          pauseBadge.classList.remove('active');
          chunk2.classList.add('active');
          tag2.classList.add('active');
        }, null, 2.0);

        currentTL.call(() => words[3].classList.add('highlight'), null, 2.0);
        currentTL.call(() => words[4].classList.add('highlight'), null, 2.3);
        currentTL.call(() => words[5].classList.add('highlight'), null, 2.6);
        currentTL.call(() => words[6].classList.add('highlight'), null, 2.9);

        currentTL.call(() => {
          words.forEach(w => w.classList.remove('highlight'));
          chunk2.classList.remove('active');
          tag2.classList.remove('active');
        }, null, 3.6);

      } else {
        // No pause mode (rushed)
        currentTL.to(progress, { width: '100%', duration: 1.6, ease: 'linear' }, 0);

        words.forEach((w, i) => {
          currentTL.call(() => {
            words.forEach(el => el.classList.remove('highlight'));
            w.classList.add('highlight');
          }, null, i * 0.22);
        });

        currentTL.call(() => {
          words.forEach(w => w.classList.remove('highlight'));
        }, null, 1.6);
      }
    }

    // Initialize auto-play once on load
    window.addEventListener('load', () => {
      setMode('phrased');
      playReading();
    });
  </script>
</body>
</html>

Pausing groups words into tidy chunks called **phrases**. This gives your listener's brain time to build a picture of what is happening.

What happens if you accidentally skip a full stop? Look at this funny sentence mix-up.

If you rush through without stopping, you might say: *"Sam cooked his dog watched."* Oh no—did Sam cook his own dog?!

Now let's add the dot and take a **full stop**: *"Sam cooked. His dog watched."* Because your voice stopped at the period, everyone knows Sam made lunch while his happy puppy sat nearby.

<!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>Pausing at Punctuation</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;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      border: 2px solid transparent;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
    }

    .btn.active {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    }

    /* Main Display Area */
    .display-area {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Reader Status Card */
    .status-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      justify-content: center;
      height: 52px;
    }

    .status-icon {
      font-size: 24px;
    }

    .status-text {
      font-size: 15px;
      font-weight: 600;
    }

    /* Sentence Strip */
    .sentence-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 12px 0;
    }

    .chunk {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 18px;
      font-weight: 600;
      color: #64748b;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    }

    .chunk.active {
      background: #e6f9f0;
      color: #10b981;
      box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
    }

    .chunk.rushed {
      background: #fee2e2;
      color: #ef4444;
      box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
    }

    .punct {
      font-size: 22px;
      font-weight: 800;
      color: #0ea5e9;
      margin-left: 2px;
    }

    .chunk.active .punct {
      color: #10b981;
    }

    .chunk.rushed .punct {
      color: #ef4444;
    }

    /* Legend / Rules */
    .legend {
      display: flex;
      gap: 16px;
      margin-top: 8px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .tag-comma {
      color: #0ea5e9;
      font-weight: 800;
      font-size: 16px;
    }

    .tag-stop {
      color: #10b981;
      font-weight: 800;
      font-size: 16px;
    }

    /* Progress bar */
    .pace-bar {
      width: 100%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 4px;
    }

    .pace-fill {
      height: 100%;
      width: 0%;
      background: #10b981;
      border-radius: 3px;
      transition: width 0.3s ease, background 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="phrasedBtn" onclick="setMode('phrased')">
      <span>🌿</span> Phrased (Pauses)
    </button>
    <button class="btn" id="rushedBtn" onclick="setMode('rushed')">
      <span>⚡</span> No Pauses
    </button>
  </div>

  <div class="display-area">
    
    <div class="status-card" id="statusCard">
      <span class="status-icon" id="statusIcon">🫁</span>
      <span class="status-text" id="statusText">Ready</span>
    </div>

    
    <div class="sentence-strip">
      <div class="chunk" id="c1">
        <span>The dog barked</span><span class="punct">,</span>
      </div>
      <div class="chunk" id="c2">
        <span>ran outside</span><span class="punct">,</span>
      </div>
      <div class="chunk" id="c3">
        <span>and slept</span><span class="punct">.</span>
      </div>
    </div>

    
    <div class="pace-bar">
      <div class="pace-fill" id="paceFill"></div>
    </div>

    
    <div class="legend">
      <div class="legend-item">
        <span class="tag-comma">,</span> Short Pause
      </div>
      <div class="legend-item">
        <span class="tag-stop">.</span> Full Stop
      </div>
    </div>
  </div>

  <script>
    let currentMode = 'phrased';
    let animTimer = null;
    let step = 0;

    const phrasedBtn = document.getElementById('phrasedBtn');
    const rushedBtn = document.getElementById('rushedBtn');
    const statusIcon = document.getElementById('statusIcon');
    const statusText = document.getElementById('statusText');
    const paceFill = document.getElementById('paceFill');
    const chunks = [
      document.getElementById('c1'),
      document.getElementById('c2'),
      document.getElementById('c3')
    ];

    function setMode(mode) {
      currentMode = mode;
      phrasedBtn.classList.toggle('active', mode === 'phrased');
      rushedBtn.classList.toggle('active', mode === 'rushed');
      restartAnimation();
    }

    function clearHighlight() {
      chunks.forEach(c => {
        c.className = 'chunk';
      });
    }

    function runStep() {
      if (currentMode === 'phrased') {
        runPhrasedStep();
      } else {
        runRushedStep();
      }
    }

    function runPhrasedStep() {
      clearHighlight();
      paceFill.style.background = '#10b981';

      if (step === 0) {
        // Read Chunk 1
        chunks[0].classList.add('active');
        statusIcon.textContent = '🗣️';
        statusText.textContent = 'Reading...';
        statusText.style.color = '#1e2945';
        paceFill.style.width = '20%';
        animTimer = setTimeout(runStep, 1000);
      } else if (step === 1) {
        // Comma Pause 1
        chunks[0].classList.add('active');
        statusIcon.textContent = '⏸️';
        statusText.textContent = 'Short Pause (Breath)';
        statusText.style.color = '#0ea5e9';
        paceFill.style.width = '33%';
        animTimer = setTimeout(runStep, 900);
      } else if (step === 2) {
        // Read Chunk 2
        chunks[1].classList.add('active');
        statusIcon.textContent = '🗣️';
        statusText.textContent = 'Reading...';
        statusText.style.color = '#1e2945';
        paceFill.style.width = '55%';
        animTimer = setTimeout(runStep, 1000);
      } else if (step === 3) {
        // Comma Pause 2
        chunks[1].classList.add('active');
        statusIcon.textContent = '⏸️';
        statusText.textContent = 'Short Pause (Breath)';
        statusText.style.color = '#0ea5e9';
        paceFill.style.width = '66%';
        animTimer = setTimeout(runStep, 900);
      } else if (step === 4) {
        // Read Chunk 3
        chunks[2].classList.add('active');
        statusIcon.textContent = '🗣️';
        statusText.textContent = 'Reading...';
        statusText.style.color = '#1e2945';
        paceFill.style.width = '88%';
        animTimer = setTimeout(runStep, 1000);
      } else if (step === 5) {
        // Period Full Stop
        chunks[2].classList.add('active');
        statusIcon.textContent = '⏹️';
        statusText.textContent = 'Full Stop';
        statusText.style.color = '#10b981';
        paceFill.style.width = '100%';
        animTimer = setTimeout(runStep, 1500);
      } else {
        // Loop restart
        step = -1;
        paceFill.style.width = '0%';
        animTimer = setTimeout(runStep, 400);
      }
      step++;
    }

    function runRushedStep() {
      clearHighlight();
      paceFill.style.background = '#ef4444';

      if (step === 0) {
        chunks[0].classList.add('rushed');
        statusIcon.textContent = '💨';
        statusText.textContent = 'Too fast!';
        statusText.style.color = '#ef4444';
        paceFill.style.width = '33%';
        animTimer = setTimeout(runStep, 250);
      } else if (step === 1) {
        chunks[1].classList.add('rushed');
        statusIcon.textContent = '💨';
        statusText.textContent = 'No pauses!';
        statusText.style.color = '#ef4444';
        paceFill.style.width = '66%';
        animTimer = setTimeout(runStep, 250);
      } else if (step === 2) {
        chunks[2].classList.add('rushed');
        statusIcon.textContent = '😵';
        statusText.textContent = 'Out of breath!';
        statusText.style.color = '#ef4444';
        paceFill.style.width = '100%';
        animTimer = setTimeout(runStep, 1600);
      } else {
        step = -1;
        paceFill.style.width = '0%';
        animTimer = setTimeout(runStep, 400);
      }
      step++;
    }

    function restartAnimation() {
      clearTimeout(animTimer);
      step = 0;
      paceFill.style.width = '0%';
      clearHighlight();
      runStep();
    }

    // Start on load
    restartAnimation();
  </script>
</body>
</html>

Periods finish a whole thought, but what should you do when you see words separated by commas in a list?

When you see a comma, make a **quick pause** without dropping your voice all the way down. It keeps items in a list neat and separate.

Try reading this picnic list: *"We packed sweet apples, crunchy carrots, cold juice, and cookies."* A tiny pause after each comma lets every yummy treat stand out.

<!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>Pausing at Punctuation</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
  }

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

  /* Punctuation Legend / Key */
  .legend {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e6e6e6;
  }
  .mark-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
  }
  .mark-comma { background: #f59e0b; }
  .mark-period { background: #6366f1; }

  /* Sentence Phrasing Track */
  .sentence-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }

  .phrase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 2px solid transparent;
    transition: all 0.3s ease;
  }

  .phrase-row.active {
    background: #fffbeb;
    border-color: #f59e0b;
    transform: translateX(4px);
  }
  .phrase-row.period-active {
    background: #eef2ff;
    border-color: #6366f1;
    transform: translateX(4px);
  }

  .phrase-text {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .phrase-icon {
    font-size: 20px;
  }

  .pause-meter {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .beat-pill {
    width: 18px;
    height: 10px;
    border-radius: 4px;
    background: #e2e8f0;
    transition: background 0.3s ease;
  }
  .phrase-row.active .beat-pill.comma-beat {
    background: #f59e0b;
  }
  .phrase-row.period-active .beat-pill.period-beat {
    background: #6366f1;
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .step-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1e2945;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .step-btn:hover {
    background: #f3f4f6;
  }
  .step-btn.active {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
  }
  .play-btn {
    background: #f59e0b;
    border: none;
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(245,158,11,0.3);
    transition: opacity 0.2s;
  }
  .play-btn:hover {
    opacity: 0.9;
  }
</style>
</head>
<body>

<div class="main-stage">
  
  <div class="legend">
    <div class="legend-item">
      <span class="mark-dot mark-comma">,</span>
      <span>1 Beat Pause</span>
    </div>
    <div class="legend-item">
      <span class="mark-dot mark-period">.</span>
      <span>2 Beat Stop</span>
    </div>
  </div>

  
  <div class="sentence-track">
    <div class="phrase-row active" id="row-0">
      <div class="phrase-text">
        <span class="phrase-icon">🍎</span>
        <span>sweet apples,</span>
      </div>
      <div class="pause-meter">
        <div class="beat-pill comma-beat"></div>
      </div>
    </div>

    <div class="phrase-row" id="row-1">
      <div class="phrase-text">
        <span class="phrase-icon">🥕</span>
        <span>crunchy carrots,</span>
      </div>
      <div class="pause-meter">
        <div class="beat-pill comma-beat"></div>
      </div>
    </div>

    <div class="phrase-row" id="row-2">
      <div class="phrase-text">
        <span class="phrase-icon">🧃</span>
        <span>cold juice,</span>
      </div>
      <div class="pause-meter">
        <div class="beat-pill comma-beat"></div>
      </div>
    </div>

    <div class="phrase-row" id="row-3">
      <div class="phrase-text">
        <span class="phrase-icon">🍪</span>
        <span>and cookies.</span>
      </div>
      <div class="pause-meter">
        <div class="beat-pill period-beat"></div>
        <div class="beat-pill period-beat"></div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playToggle" title="Auto Play">⏸</button>
    <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="step-btn" data-step="3">4</button>
  </div>
</div>

<script>
  const rows = [
    document.getElementById('row-0'),
    document.getElementById('row-1'),
    document.getElementById('row-2'),
    document.getElementById('row-3')
  ];
  const stepBtns = document.querySelectorAll('.step-btn');
  const playBtn = document.getElementById('playToggle');

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

  function renderStep(idx) {
    currentStep = idx;
    rows.forEach((row, i) => {
      row.classList.remove('active', 'period-active');
      if (i === idx) {
        if (i === 3) {
          row.classList.add('period-active');
        } else {
          row.classList.add('active');
        }
      }
    });

    stepBtns.forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });
  }

  function advance() {
    const nextStep = (currentStep + 1) % 4;
    renderStep(nextStep);
    // Give step 4 (period / full stop) double pause time
    const duration = (nextStep === 3) ? 3600 : 2400;
    if (isPlaying) {
      clearTimeout(timer);
      timer = setTimeout(advance, duration);
    }
  }

  function startAuto() {
    isPlaying = true;
    playBtn.textContent = '⏸';
    clearTimeout(timer);
    const duration = (currentStep === 3) ? 3600 : 2400;
    timer = setTimeout(advance, duration);
  }

  function stopAuto() {
    isPlaying = false;
    playBtn.textContent = '▶';
    clearTimeout(timer);
  }

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

  stepBtns.forEach((btn) => {
    btn.addEventListener('click', () => {
      stopAuto();
      renderStep(parseInt(btn.getAttribute('data-step'), 10));
    });
  });

  // Start initial auto-cycling
  startAuto();
</script>

</body>
</html>

Now that you know how periods and commas work, what is the most common mistake readers make when a line of text runs out of room?

Many readers make a full stop at the end of a line just because the words drop down to the next row. But a new line is not a punctuation mark!

Only pause when you see an actual **comma** or **period**. If there is no mark at the end of a line, keep your voice smoothly gliding to the next word.

Read this out loud right now: *"On sunny days, Mia rides her bike, visits the park, and flies her kite. She loves the warm breeze."* Remember: quick tap at the commas, full rest at the periods!

Reading With Phrasing: Pausing at Punctuation. Read aloud with appropriate phrasing by pausing at full stops and commas.

Using Full Stops and Commas for Reading and Writing

Year 2 English: Reading Fluency, Phrasing, and Punctuation Cues (AC9E2LY04)

Explicit Teaching of Reading Fluency: Prosody and Punctuation Pauses

Instruction should follow the 'I do, We do, You do' explicit teaching model. Teachers model non-examples (monotone robot reading and breathless runaway reading) alongside fluent modeled reading. Students benefit from multi-sensory supports such as finger-tapping pauses, visual traffic light cards, and choral/echo reading of scooping texts.

Reading With Phrasing: Pausing at Punctuation

Road Signs for Reading

Stopping at the Period