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 had a silly song or poem stuck in your head all day?

Poets and songwriters are sound wizards who use playful word tricks to make their words bounce, sing, and stick in your brain.

What is the secret trick they use to match word endings together?

Two words **rhyme** when they end with the exact same sound, like **cat** and **hat**.

The start of the word changes, but the tail sound stays the same.

<!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>Rhyme Machine: Onset and Rime</title>
  <script src="{{VENDOR_CDN}}/gsap.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    :root {
      --primary: #22b7ff;
      --onset-color: #ff9800;
      --rime-color: #4caf50;
      --text: #1e2945;
      --bg: #f8f9fa;
      --border: #e6e6e6;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
    }

    body {
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

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

    /* Word Builder Display */
    .display-card {
      width: 100%;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      position: relative;
    }

    .icon-badge {
      font-size: 56px;
      line-height: 1;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .word-tiles {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .tile-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .tile-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tile-label.start {
      color: #ea580c;
    }

    .tile-label.tail {
      color: #16a34a;
    }

    .tile {
      min-width: 76px;
      height: 80px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      font-weight: 800;
      box-shadow: 0 3px 0 rgba(0,0,0,0.08);
      position: relative;
      overflow: hidden;
    }

    .tile.onset {
      background: #fff7ed;
      color: #ea580c;
      border: 3px solid #ffedd5;
    }

    .tile.rime {
      background: #f0fdf4;
      color: #16a34a;
      border: 3px solid #dcfce7;
    }

    .lock-icon {
      position: absolute;
      top: 4px;
      right: 6px;
      font-size: 10px;
      opacity: 0.6;
    }

    .plus-symbol {
      font-size: 24px;
      font-weight: 800;
      color: #cbd5e1;
      margin-top: 14px;
    }

    /* Letter Selectors */
    .selector-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .select-btn {
      background: #ffffff;
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      box-shadow: 0 2px 0 var(--border);
      transition: all 0.2s ease;
    }

    .select-btn:active {
      transform: translateY(2px);
      box-shadow: 0 0 0 transparent;
    }

    .select-btn.active {
      border-color: var(--primary);
      background: #f0f9ff;
      box-shadow: 0 2px 0 var(--primary);
    }

    .select-btn .btn-letter {
      font-size: 20px;
      font-weight: 800;
      color: #ea580c;
    }

    .select-btn .btn-emoji {
      font-size: 20px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

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

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

    .dot.active {
      background: var(--primary);
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="app-wrap">
    
    <div class="display-card">
      <div class="icon-badge" id="picDisplay">🐱</div>
      
      <div class="word-tiles">
        <div class="tile-group">
          <span class="tile-label start">Start</span>
          <div class="tile onset" id="onsetTile">c</div>
        </div>
        
        <span class="plus-symbol">+</span>
        
        <div class="tile-group">
          <span class="tile-label tail">Tail</span>
          <div class="tile rime">
            at
            <span class="lock-icon">🔒</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="selector-grid">
      <button class="select-btn active" data-index="0">
        <span class="btn-letter">c</span>
        <span class="btn-emoji">🐱</span>
      </button>
      <button class="select-btn" data-index="1">
        <span class="btn-letter">b</span>
        <span class="btn-emoji">🦇</span>
      </button>
      <button class="select-btn" data-index="2">
        <span class="btn-letter">h</span>
        <span class="btn-emoji">🎩</span>
      </button>
      <button class="select-btn" data-index="3">
        <span class="btn-letter">r</span>
        <span class="btn-emoji">🐀</span>
      </button>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="playBtn">
        <span id="playIcon">⏸</span> Auto
      </button>

      <div class="dots">
        <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>
    </div>
  </div>

  <script>
    const rhymingWords = [
      { letter: 'c', emoji: '🐱' },
      { letter: 'b', emoji: '🦇' },
      { letter: 'h', emoji: '🎩' },
      { letter: 'r', emoji: '🐀' }
    ];

    const onsetTile = document.getElementById('onsetTile');
    const picDisplay = document.getElementById('picDisplay');
    const buttons = document.querySelectorAll('.select-btn');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

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

    function renderStep(index) {
      currentIndex = index;
      const data = rhymingWords[index];

      // Update UI active states
      buttons.forEach((b, i) => b.classList.toggle('active', i === index));
      dots.forEach((d, i) => d.classList.toggle('active', i === index));

      // GSAP smooth transition
      gsap.to(onsetTile, {
        y: -10,
        opacity: 0,
        duration: 0.15,
        ease: 'power1.in',
        onComplete: () => {
          onsetTile.textContent = data.letter;
          gsap.fromTo(onsetTile, 
            { y: 10, opacity: 0 }, 
            { y: 0, opacity: 1, duration: 0.2, ease: 'back.out(2)' }
          );
        }
      });

      gsap.to(picDisplay, {
        scale: 0.7,
        opacity: 0,
        duration: 0.15,
        ease: 'power1.in',
        onComplete: () => {
          picDisplay.textContent = data.emoji;
          gsap.fromTo(picDisplay, 
            { scale: 0.5, opacity: 0 }, 
            { scale: 1, opacity: 1, duration: 0.25, ease: 'back.out(2)' }
          );
        }
      });
    }

    function nextStep() {
      const next = (currentIndex + 1) % rhymingWords.length;
      renderStep(next);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playIcon.textContent = '⏸';
      timer = setInterval(nextStep, 3200);
    }

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

    // Direct Interaction
    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(i);
      });
    });

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

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

Rhymes give poetry a fun chime, but what makes a poem feel like music you can dance to?

Poetry has a steady heartbeat called **rhythm**.

You can tap your foot or clap your hands to the strong and light beats of each line.

<!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>Poetry Rhythm</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .container {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* Legend */
    .legend {
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: center;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
    }

    .dot-sample {
      border-radius: 50%;
      display: inline-block;
    }
    .dot-strong {
      width: 18px;
      height: 18px;
      background: #8b5cf6;
    }
    .dot-light {
      width: 12px;
      height: 12px;
      background: #38bdf8;
    }

    /* Beat track area */
    .track-wrapper {
      position: relative;
      width: 100%;
      padding: 30px 0 10px 0;
    }

    .beats-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      align-items: end;
      width: 100%;
    }

    .beat-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      padding: 6px 2px;
      border-radius: 12px;
      background: transparent;
      border: 2px solid transparent;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .beat-col:hover {
      background: #f1f5f9;
    }

    .beat-col.active {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    /* Visual beat indicator */
    .beat-bubble {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-weight: bold;
      color: #ffffff;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    }

    .strong .beat-bubble {
      width: 44px;
      height: 44px;
      background: #8b5cf6;
      font-size: 20px;
    }

    .light .beat-bubble {
      width: 32px;
      height: 32px;
      background: #38bdf8;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .beat-col.active .beat-bubble {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(139, 92, 246, 0.35);
    }

    .light.active .beat-bubble {
      box-shadow: 0 8px 16px rgba(56, 189, 248, 0.4);
    }

    /* Syllable text */
    .syllable {
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: -0.2px;
      text-align: center;
    }

    .strong .syllable {
      color: #8b5cf6;
      font-size: 16px;
      text-transform: uppercase;
    }

    .beat-col.active .syllable {
      color: #0f172a;
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 22px;
      font-size: 16px;
      font-weight: 700;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: #8b5cf6;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
      transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }

    .btn:active {
      opacity: 0.9;
    }

    @media (max-width: 420px) {
      .strong .beat-bubble {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }
      .light .beat-bubble {
        width: 26px;
        height: 26px;
        font-size: 12px;
        margin-bottom: 5px;
      }
      .syllable {
        font-size: 12px;
      }
      .strong .syllable {
        font-size: 13px;
      }
      .beats-grid {
        gap: 3px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="legend">
      <div class="legend-item">
        <span class="dot-sample dot-strong"></span>
        <span>Strong</span>
      </div>
      <div class="legend-item">
        <span class="dot-sample dot-light"></span>
        <span>Light</span>
      </div>
    </div>

    <div class="track-wrapper">
      <div class="beats-grid" id="grid">
        <div class="beat-col strong" data-index="0">
          <div class="beat-bubble">👏</div>
          <div class="syllable">TWIN</div>
        </div>
        <div class="beat-col light" data-index="1">
          <div class="beat-bubble">👏</div>
          <div class="syllable">kle</div>
        </div>
        <div class="beat-col strong" data-index="2">
          <div class="beat-bubble">👏</div>
          <div class="syllable">TWIN</div>
        </div>
        <div class="beat-col light" data-index="3">
          <div class="beat-bubble">👏</div>
          <div class="syllable">kle</div>
        </div>
        <div class="beat-col strong" data-index="4">
          <div class="beat-bubble">👏</div>
          <div class="syllable">LIT</div>
        </div>
        <div class="beat-col light" data-index="5">
          <div class="beat-bubble">👏</div>
          <div class="syllable">tle</div>
        </div>
        <div class="beat-col strong" data-index="6">
          <div class="beat-bubble">👏</div>
          <div class="syllable">STAR</div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button class="btn" id="playBtn" type="button">▶ Rhythm</button>
    </div>
  </div>

  <script>
    const beats = document.querySelectorAll('.beat-col');
    const playBtn = document.getElementById('playBtn');
    let currentIndex = 0;
    let timer = null;
    let isPlaying = false;
    let audioCtx = null;

    function playTone(isStrong) {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(isStrong ? 440 : 330, audioCtx.currentTime);
        gain.gain.setValueAtTime(isStrong ? 0.35 : 0.15, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + (isStrong ? 0.18 : 0.12));
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.2);
      } catch (e) {}
    }

    function setActiveBeat(index, triggerSound = false) {
      beats.forEach((b, idx) => {
        b.classList.toggle('active', idx === index);
      });
      currentIndex = index;
      if (triggerSound) {
        const isStrong = beats[index].classList.contains('strong');
        playTone(isStrong);
      }
    }

    function step() {
      currentIndex = (currentIndex + 1) % beats.length;
      setActiveBeat(currentIndex, true);
    }

    function start() {
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      setActiveBeat(currentIndex, true);
      timer = setInterval(step, 650);
    }

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

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

    beats.forEach((col, idx) => {
      col.addEventListener('click', () => {
        pause();
        setActiveBeat(idx, true);
      });
    });

    // Initialize resting state
    setActiveBeat(0, false);
  </script>
</body>
</html>

What happens when a poet loves a line so much they want you to hear it again?

When poets say a word or line more than once, it is called **repetition**.

Repeating lines works like a chorus in your favorite song, helping you remember the most important idea.

<!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>Poetry Sound Tools</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    gap: 12px;
  }

  /* Device Navigation Tabs */
  .nav-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 500px;
  }
  .tab-btn {
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
  }
  .tab-btn:hover { opacity: 0.85; }
  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(34,183,255,0.35);
  }

  /* Stage / Display Viewport */
  .display-area {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 220px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .device-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .device-panel.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Visual Elements */
  /* 1. Rhyme Visual */
  .rhyme-row {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .word-pill {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 22px;
    font-weight: 800;
    color: #1e2945;
  }
  .highlight-ending {
    color: #ff9800;
    background: #fff3e0;
    border-radius: 6px;
    padding: 0 4px;
  }
  .rhyme-connector {
    font-size: 20px;
    color: #ff9800;
    animation: wavePulse 1.8s infinite ease-in-out;
  }

  /* 2. Rhythm Visual */
  .rhythm-beats {
    display: flex;
    gap: 10px;
    align-items: flex-end;
  }
  .beat-bar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #64748b;
    transition: all 0.3s ease;
  }
  .beat-bar.stressed {
    width: 58px;
    height: 58px;
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34,183,255,0.4);
  }
  .pulse-anim {
    animation: drumBeat 1.4s infinite ease-in-out;
  }

  /* 3. Alliteration Visual */
  .allit-chain {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 12px;
  }
  .allit-word {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 20px;
    font-weight: 800;
  }
  .allit-letter {
    color: #10b981;
    background: #ecfdf5;
    border-radius: 4px;
    padding: 0 4px;
  }

  /* 4. Onomatopoeia Visual */
  .sound-bubbles {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  .sound-chip {
    background: #fef3c7;
    color: #d97706;
    border: 2px solid #fde68a;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: popBounce 2s infinite ease-in-out;
  }
  .sound-chip:nth-child(2) {
    animation-delay: 0.6s;
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
  }

  /* Controls & Stepper */
  .controls-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 500px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
  }
  .ctrl-btn:hover { background: #f1f5f9; }
  .stepper-dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .dot.active {
    background: #22b7ff;
    width: 18px;
    border-radius: 4px;
  }

  @keyframes wavePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
  }
  @keyframes drumBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
  }
  @keyframes popBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
</style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setPanel(0)">Rhyme</button>
    <button class="tab-btn" onclick="setPanel(1)">Rhythm</button>
    <button class="tab-btn" onclick="setPanel(2)">Sound-Match</button>
    <button class="tab-btn" onclick="setPanel(3)">Sound-Word</button>
  </div>

  
  <div class="display-area">
    
    <div class="device-panel active" id="panel-0">
      <div class="rhyme-row">
        <div class="word-pill">c<span class="highlight-ending">at</span> 🐱</div>
        <div class="rhyme-connector">♫</div>
        <div class="word-pill">h<span class="highlight-ending">at</span> 🎩</div>
      </div>
      <div class="rhyme-row">
        <div class="word-pill">b<span class="highlight-ending">at</span> 🦇</div>
      </div>
    </div>

    
    <div class="device-panel" id="panel-1">
      <div class="rhythm-beats pulse-anim">
        <div class="beat-bar">da</div>
        <div class="beat-bar stressed">DUM</div>
        <div class="beat-bar">da</div>
        <div class="beat-bar stressed">DUM</div>
      </div>
      <div style="font-size: 13px; font-weight: 700; color: #64748b;">🥁 4-Beat Meter</div>
    </div>

    
    <div class="device-panel" id="panel-2">
      <div class="allit-chain">
        <div class="allit-word"><span class="allit-letter">S</span>ix</div>
        <div class="allit-word"><span class="allit-letter">s</span>illy</div>
        <div class="allit-word"><span class="allit-letter">s</span>nakes 🐍</div>
      </div>
    </div>

    
    <div class="device-panel" id="panel-3">
      <div class="sound-bubbles">
        <div class="sound-chip">
          <span>⚡ POP!</span>
        </div>
        <div class="sound-chip">
          <span>💧 SPLASH!</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls-bar">
    <button class="ctrl-btn" onclick="prevPanel()">◀</button>
    <div class="stepper-dots">
      <div class="dot active" onclick="setPanel(0)"></div>
      <div class="dot" onclick="setPanel(1)"></div>
      <div class="dot" onclick="setPanel(2)"></div>
      <div class="dot" onclick="setPanel(3)"></div>
    </div>
    <button class="ctrl-btn" onclick="nextPanel()">▶</button>
  </div>

<script>
  let currentIdx = 0;
  const totalPanels = 4;
  let autoTimer = null;

  function updateView() {
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.device-panel');
    const dots = document.querySelectorAll('.dot');

    tabs.forEach((tab, i) => tab.classList.toggle('active', i === currentIdx));
    panels.forEach((p, i) => p.classList.toggle('active', i === currentIdx));
    dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIdx));
  }

  function setPanel(index) {
    currentIdx = (index + totalPanels) % totalPanels;
    updateView();
    resetAuto();
  }

  function nextPanel() {
    setPanel(currentIdx + 1);
  }

  function prevPanel() {
    setPanel(currentIdx - 1);
  }

  function resetAuto() {
    clearInterval(autoTimer);
    autoTimer = setInterval(() => {
      currentIdx = (currentIdx + 1) % totalPanels;
      updateView();
    }, 4500);
  }

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

Next time you read a poem or sing a playground chant, listen closely for matching rhyme endings, tapping beats, and echo words!

Poems: Playing With Words and Sounds. Explore how poems and songs use words and sounds in special ways.

Understanding Rhythm and Rhyme in Poetry (KS1 English)

Poetry: Exploring Sound Patterns, Rhymes and Repetition in Simple Chants

Grade 1 English: Identify Rhyming Words and Sound Devices in Poems

When teaching poetry to Foundation–Year 2 students under the Australian Curriculum (v9), instruction should be highly auditory and kinaesthetic. Begin with oral recitation, singing, and body percussion (clapping or stomping to stress beats) before analyzing print. Use high-contrast color coding (e.g., yellow for rhyming rimes, green for alliterative onsets) to help learners decouple auditory phoneme awareness from orthographic letter patterns.

Poems: Playing With Words and Sounds

Words That Rhyme

Catch the Beat