<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .cards-container {
      display: flex;
      flex-direction: row;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
      align-items: stretch;
    }

    .word-card {
      flex: 1;
      min-width: 140px;
      border-radius: 20px;
      padding: 24px 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    /* Left Card: CAN */
    .card-can {
      background: #f0fdf4;
      border: 3px solid #86efac;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12);
    }

    .card-can:active {
      transform: translateY(2px);
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.15);
    }

    /* Right Card: SEE */
    .card-see {
      background: #faf5ff;
      border: 3px solid #d8b4fe;
      box-shadow: 0 4px 12px rgba(168, 85, 247, 0.12);
    }

    .card-see:active {
      transform: translateY(2px);
      box-shadow: 0 2px 6px rgba(168, 85, 247, 0.15);
    }

    .illustration-box {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    /* Bunny Hop Animation */
    .bunny {
      font-size: 52px;
      display: inline-block;
      animation: gentleHop 3s infinite ease-in-out;
      transform-origin: bottom center;
    }

    @keyframes gentleHop {
      0%, 100% {
        transform: translateY(0) scale(1, 1);
      }
      10% {
        transform: translateY(2px) scale(1.05, 0.95);
      }
      25% {
        transform: translateY(-18px) scale(0.95, 1.05);
      }
      40% {
        transform: translateY(0) scale(1.05, 0.95);
      }
      50% {
        transform: translateY(0) scale(1, 1);
      }
    }

    .word-text {
      font-size: 52px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .text-can {
      color: #16a34a;
    }

    .text-see {
      color: #9333ea;
    }

    /* Eye character in double 'e' */
    .eye-e {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .eye-socket {
      width: 22px;
      height: 22px;
      background: #ffffff;
      border: 3px solid #9333ea;
      border-radius: 50%;
      position: absolute;
      top: 14px;
      left: 11px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pupil {
      width: 8px;
      height: 8px;
      background: #3b0764;
      border-radius: 50%;
      position: absolute;
      animation: lookAround 4s infinite ease-in-out;
    }

    @keyframes lookAround {
      0%, 100% {
        transform: translate(0, 0);
      }
      20% {
        transform: translate(4px, 0);
      }
      40% {
        transform: translate(-4px, 0);
      }
      60% {
        transform: translate(0, -3px);
      }
      80% {
        transform: translate(0, 3px);
      }
    }

    .cue {
      font-size: 13px;
      font-weight: 700;
      margin-top: 14px;
      border-radius: 12px;
      padding: 4px 10px;
    }

    .cue-can {
      color: #15803d;
      background: #dcfce7;
    }

    .cue-see {
      color: #7e22ce;
      background: #f3e8ff;
    }

    @media (max-width: 360px) {
      .word-text {
        font-size: 42px;
      }
      .bunny {
        font-size: 44px;
      }
      .eye-socket {
        width: 18px;
        height: 18px;
        top: 11px;
        left: 9px;
        border-width: 2px;
      }
      .pupil {
        width: 6px;
        height: 6px;
      }
    }
  </style>
</head>
<body>

  <div class="cards-container">
    
    <div class="word-card card-can" id="canCard" role="button" aria-label="Word: can">
      <div class="illustration-box">
        <span class="bunny">🐰</span>
      </div>
      <div class="word-text text-can">can</div>
      <span class="cue cue-can">Tap to hear 🔊</span>
    </div>

    
    <div class="word-card card-see" id="seeCard" role="button" aria-label="Word: see">
      <div class="illustration-box">
        <div class="word-text text-see" style="font-size: 32px; letter-spacing: 0;">👀</div>
      </div>
      <div class="word-text text-see">
        <span>s</span>
        <span class="eye-e">
          e
          <span class="eye-socket"><span class="pupil"></span></span>
        </span>
        <span class="eye-e">
          e
          <span class="eye-socket"><span class="pupil"></span></span>
        </span>
      </div>
      <span class="cue cue-see">Tap to hear 🔊</span>
    </div>
  </div>

  <script>
    function playTone(freq, type = 'sine', duration = 0.35) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    function speakWord(word, pitch = 1.2) {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utterance = new SpeechSynthesisUtterance(word);
        utterance.rate = 0.85;
        utterance.pitch = pitch;
        window.speechSynthesis.speak(utterance);
      } else {
        playTone(pitch > 1 ? 520 : 440);
      }
    }

    document.getElementById('canCard').addEventListener('click', () => {
      speakWord('can', 1.15);
    });

    document.getElementById('seeCard').addEventListener('click', () => {
      speakWord('see', 1.3);
    });
  </script>
</body>
</html>

Reading Common Words: the, a, see, I, can

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      height: 100%;
      background: #0d1527;
      color: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
    }

    /* Spotlight source */
    .lamp {
      width: 44px;
      height: 14px;
      background: #475569;
      border-radius: 8px 8px 2px 2px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      z-index: 4;
    }

    /* Spotlight beam */
    .spotlight-svg {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 380px;
      height: 270px;
      pointer-events: none;
      z-index: 1;
    }

    /* Sight word inside beam */
    .word-the {
      position: absolute;
      top: 52px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 42px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #ffffff;
      text-shadow: 0 0 16px rgba(255, 235, 59, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
      z-index: 3;
      cursor: pointer;
      transition: transform 0.2s ease, text-shadow 0.2s ease;
    }

    .word-the:active {
      transform: translateX(-50%) scale(1.08);
      text-shadow: 0 0 24px rgba(255, 235, 59, 1);
    }

    /* Sun visual */
    .sun-container {
      position: absolute;
      top: 125px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 3;
    }

    .sun-glyph {
      font-size: 82px;
      line-height: 1;
      filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.9));
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sun-container:active .sun-glyph {
      transform: scale(1.1) rotate(6deg);
    }

    /* Bottom phrase */
    .phrase-bar {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.15);
      padding: 8px 18px;
      border-radius: 999px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      z-index: 4;
      cursor: pointer;
    }

    .phrase-bar:active {
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(255, 235, 59, 0.4);
    }

    .phrase-text {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.5px;
    }

    .phrase-the {
      color: #fef08a;
      text-shadow: 0 0 8px rgba(254, 240, 138, 0.6);
    }

    .audio-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #facc15;
      color: #1e293b;
      font-size: 16px;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
  </style>
</head>
<body>

  <div class="stage">
    
    <div class="lamp"></div>

    
    <svg class="spotlight-svg" viewBox="0 0 380 270" preserveAspectRatio="none">
      <defs>
        <radialGradient id="beamGrad" cx="50%" cy="0%" r="90%">
          <stop offset="0%" stop-color="#fff59d" stop-opacity="0.95" />
          <stop offset="35%" stop-color="#fdd835" stop-opacity="0.65" />
          <stop offset="70%" stop-color="#fbc02d" stop-opacity="0.3" />
          <stop offset="100%" stop-color="#fbc02d" stop-opacity="0" />
        </radialGradient>
        <radialGradient id="sunPool" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#fff59d" stop-opacity="0.8" />
          <stop offset="60%" stop-color="#fbc02d" stop-opacity="0.3" />
          <stop offset="100%" stop-color="#fbc02d" stop-opacity="0" />
        </radialGradient>
      </defs>

      
      <polygon points="172,0 208,0 350,250 30,250" fill="url(#beamGrad)" />
      
      
      <ellipse cx="190" cy="245" rx="160" ry="22" fill="url(#sunPool)" />
    </svg>

    
    <div class="word-the" id="wordThe" onclick="speak('the')">the</div>

    
    <div class="sun-container" id="sunBtn" onclick="speak('the sun')">
      <span class="sun-glyph">☀️</span>
    </div>

    
    <div class="phrase-bar" onclick="speak('the sun')">
      <span class="phrase-text"><span class="phrase-the">the</span> sun</span>
      <button class="audio-btn" aria-label="Play sound">🔊</button>
    </div>
  </div>

  <script>
    function playTone(freq, dur) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function speak(text) {
      playTone(text === 'the' ? 440 : 523.25, 0.25);
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const u = new SpeechSynthesisUtterance(text);
        u.rate = 0.85;
        u.pitch = 1.1;
        window.speechSynthesis.speak(u);
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .word-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 420px;
      position: relative;
    }

    .breakdown-row {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 20px;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .letter-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Floating Heart Bubble above 'e' */
    .heart-callout {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 8px;
      animation: floatHeart 2.4s ease-in-out infinite alternate;
    }

    @keyframes floatHeart {
      0% { transform: translateY(0); }
      100% { transform: translateY(-6px); }
    }

    .heart-badge {
      background: #ffe4e6;
      border: 2px solid #f43f5e;
      color: #e11d48;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 2px 6px rgba(244, 63, 94, 0.15);
    }

    .heart-icon {
      font-size: 18px;
      line-height: 1;
    }

    .heart-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #f43f5e;
      margin-top: -1px;
    }

    /* Phonics Letter styling */
    .letters {
      font-size: 76px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      border-radius: 12px;
      transition: background-color 0.2s ease;
    }

    .part-th .letters {
      color: #2563eb;
    }

    .part-e .letters {
      color: #9333ea;
    }

    /* Sound Buttons */
    .sound-button-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 14px;
    }

    .sound-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: 0 4px 0 rgba(0,0,0,0.15);
      transition: transform 0.1s ease, box-shadow 0.1s ease;
      outline: none;
    }

    .sound-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 rgba(0,0,0,0.15);
    }

    .sound-btn-th {
      background: #22c55e;
      color: #ffffff;
    }

    .sound-btn-th:focus-visible {
      box-shadow: 0 0 0 3px #86efac;
    }

    .sound-btn-e {
      background: #f43f5e;
      color: #ffffff;
    }

    .sound-btn-e:focus-visible {
      box-shadow: 0 0 0 3px #fda4af;
    }

    .sound-label {
      font-size: 13px;
      font-weight: 700;
      margin-top: 6px;
      color: #64748b;
    }

    .instruction {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      margin-top: 12px;
      background: #f8fafc;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="word-card">
    <div class="breakdown-row">
      
      <div class="letter-group part-th">
        <div style="height: 48px;"></div> 
        <div class="letters">th</div>
        <div class="sound-button-wrap">
          <button class="sound-btn sound-btn-th" id="btnTh" title="Play 'th' sound" aria-label="Play 'th' sound">
            ●
          </button>
          <div class="sound-label">/th/</div>
        </div>
      </div>

      
      <div class="letter-group part-e">
        <div class="heart-callout">
          <div class="heart-badge">
            <span class="heart-icon">❤️</span>
            <span>Heart Part: sounds like "uh"</span>
          </div>
          <div class="heart-arrow"></div>
        </div>
        <div class="letters">e</div>
        <div class="sound-button-wrap">
          <button class="sound-btn sound-btn-e" id="btnE" title="Play 'uh' sound" aria-label="Play 'uh' sound">
            ❤️
          </button>
          <div class="sound-label">"uh"</div>
        </div>
      </div>
    </div>

    <div class="instruction">Tap sound buttons to listen 🔊</div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    // Play synthesized phonics chime / tone
    function playSound(type) {
      try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;

        if (type === 'th') {
          // Play a soft dual-tone for regular blend sound
          const osc1 = ctx.createOscillator();
          const osc2 = ctx.createOscillator();
          const gain = ctx.createGain();

          osc1.type = 'sine';
          osc2.type = 'triangle';
          osc1.frequency.setValueAtTime(320, now);
          osc2.frequency.setValueAtTime(480, now);

          gain.gain.setValueAtTime(0.2, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);

          osc1.connect(gain);
          osc2.connect(gain);
          gain.connect(ctx.destination);

          osc1.start(now);
          osc2.start(now);
          osc1.stop(now + 0.35);
          osc2.stop(now + 0.35);
        } else {
          // Play a bright warm heart tone for the "uh" heart sound
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();

          osc.type = 'sine';
          osc.frequency.setValueAtTime(523.25, now); // C5
          osc.frequency.exponentialRampToValueAtTime(659.25, now + 0.2); // E5

          gain.gain.setValueAtTime(0.25, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);

          osc.connect(gain);
          gain.connect(ctx.destination);

          osc.start(now);
          osc.stop(now + 0.45);
        }
      } catch (e) {
        // AudioContext fallback
      }
    }

    document.getElementById('btnTh').addEventListener('click', () => playSound('th'));
    document.getElementById('btnE').addEventListener('click', () => playSound('e'));
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .reader-area {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .sentence-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .sentence-card.card-active {
      border-color: #facc15;
      box-shadow: 0 6px 18px rgba(250, 204, 21, 0.18);
    }

    .words-container {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
    }

    .word {
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
      padding: 4px 8px;
      border-radius: 8px;
      background: transparent;
      color: #334155;
      cursor: pointer;
      position: relative;
      transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .word.active {
      background-color: #fef08a;
      color: #0f172a;
      font-weight: 700;
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
    }

    .sentence-emoji {
      font-size: 32px;
      line-height: 1;
      padding-left: 6px;
      flex-shrink: 0;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 520px;
    }

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

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

    .btn-primary {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #0284c7;
    }

    .reading-guide {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .guide-arrow {
      color: #eab308;
      font-size: 16px;
    }
  </style>
</head>
<body>

  <div class="reading-guide">
    <span>Read left to right</span>
    <span class="guide-arrow">→</span>
  </div>

  <div class="reader-area">
    
    <div class="sentence-card" id="card0">
      <div class="words-container">
        <span class="word" data-step="0">I</span>
        <span class="word" data-step="1">can</span>
        <span class="word" data-step="2">see</span>
        <span class="word" data-step="3">a</span>
        <span class="word" data-step="4">cat.</span>
      </div>
      <div class="sentence-emoji" aria-hidden="true">🐱</div>
    </div>

    
    <div class="sentence-card" id="card1">
      <div class="words-container">
        <span class="word" data-step="5">I</span>
        <span class="word" data-step="6">see</span>
        <span class="word" data-step="7">the</span>
        <span class="word" data-step="8">sun.</span>
      </div>
      <div class="sentence-emoji" aria-hidden="true">☀️</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="toggleBtn" type="button" aria-label="Pause or play reading animation">
      <span id="playIcon">⏸</span> <span id="btnText">Pause</span>
    </button>
  </div>

  <script>
    const totalSteps = 9;
    // Step-to-card mapping: 0-4 are on card0, 5-8 are on card1
    const card0 = document.getElementById('card0');
    const card1 = document.getElementById('card1');
    const words = Array.from(document.querySelectorAll('.word'));
    const toggleBtn = document.getElementById('toggleBtn');
    const playIcon = document.getElementById('playIcon');
    const btnText = document.getElementById('btnText');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const STEP_DURATION = 650; // ms per word (pedagogical pace ~4s per sentence)

    function renderStep(step) {
      currentStep = step;
      
      // Update words
      words.forEach(w => {
        const s = parseInt(w.dataset.step, 10);
        if (s === currentStep) {
          w.classList.add('active');
        } else {
          w.classList.remove('active');
        }
      });

      // Update card focus borders
      if (currentStep < 5) {
        card0.classList.add('card-active');
        card1.classList.remove('card-active');
      } else {
        card0.classList.remove('card-active');
        card1.classList.add('card-active');
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      renderStep(currentStep);
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, STEP_DURATION);
      isPlaying = true;
      playIcon.textContent = '⏸';
      btnText.textContent = 'Pause';
    }

    function stopLoop() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playIcon.textContent = '▶';
      btnText.textContent = 'Play';
    }

    toggleBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopLoop();
      } else {
        nextStep();
        startLoop();
      }
    });

    // Tap any word to read it immediately
    words.forEach(w => {
      w.addEventListener('click', () => {
        const step = parseInt(w.dataset.step, 10);
        renderStep(step);
        if (isPlaying) {
          startLoop(); // reset interval timing from this word
        }
      });
    });

    // Initial render and start
    renderStep(0);
    startLoop();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .header-label {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #475569;
      margin-bottom: 12px;
      text-align: center;
    }

    .sub-label {
      font-size: 13px;
      color: #64748b;
      margin-top: -8px;
      margin-bottom: 14px;
      font-weight: 500;
      text-align: center;
    }

    .cards-track {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: clamp(6px, 1.8vw, 12px);
      width: 100%;
      max-width: 500px;
      margin-bottom: 18px;
      padding: 6px 2px 2px;
    }

    .card-col {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .sparkle {
      height: 24px;
      font-size: 18px;
      line-height: 24px;
      opacity: 0.2;
      transform: scale(0.75);
      transition: opacity 0.25s ease, transform 0.25s ease;
      margin-bottom: 4px;
    }

    .card-col.active .sparkle {
      opacity: 1;
      transform: scale(1.25) translateY(-2px);
    }

    .flashcard {
      width: 100%;
      height: clamp(68px, 18vw, 104px);
      background: #ffffff;
      border-radius: clamp(10px, 2.5vw, 16px);
      border-width: clamp(3px, 0.8vw, 4px);
      border-style: solid;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(17px, 4.5vw, 28px);
      font-weight: 800;
      color: #1e293b;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 4px;
    }

    .card-col.active .flashcard {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    }

    /* Distinct colorful borders & accents */
    .c-blue .flashcard { border-color: #3b82f6; }
    .c-blue .sparkle { color: #3b82f6; }
    .card-col.active.c-blue .flashcard { background-color: #eff6ff; }

    .c-green .flashcard { border-color: #10b981; }
    .c-green .sparkle { color: #10b981; }
    .card-col.active.c-green .flashcard { background-color: #ecfdf5; }

    .c-orange .flashcard { border-color: #f59e0b; }
    .c-orange .sparkle { color: #f59e0b; }
    .card-col.active.c-orange .flashcard { background-color: #fffbeb; }

    .c-purple .flashcard { border-color: #8b5cf6; }
    .c-purple .sparkle { color: #8b5cf6; }
    .card-col.active.c-purple .flashcard { background-color: #f5f3ff; }

    .c-teal .flashcard { border-color: #06b6d4; }
    .c-teal .sparkle { color: #06b6d4; }
    .card-col.active.c-teal .flashcard { background-color: #ecfeff; }

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

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .btn:active {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      transition: background-color 0.25s, transform 0.25s;
    }

    .dot[data-index="0"].active { background: #3b82f6; transform: scale(1.25); }
    .dot[data-index="1"].active { background: #10b981; transform: scale(1.25); }
    .dot[data-index="2"].active { background: #f59e0b; transform: scale(1.25); }
    .dot[data-index="3"].active { background: #8b5cf6; transform: scale(1.25); }
    .dot[data-index="4"].active { background: #06b6d4; transform: scale(1.25); }

    @media (max-width: 380px) {
      .header-label {
        font-size: 14px;
        margin-bottom: 8px;
      }
      .sub-label {
        font-size: 12px;
        margin-bottom: 10px;
      }
      .sparkle {
        height: 20px;
        font-size: 15px;
        line-height: 20px;
      }
      .cards-track {
        margin-bottom: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="header-label">Sight Word Flashcards</div>
  <div class="sub-label">Read each word as it lights up!</div>

  <div class="cards-track">
    <div class="card-col c-blue active" data-index="0" data-word="I" aria-label="Flashcard: I">
      <div class="sparkle">★</div>
      <div class="flashcard">I</div>
    </div>

    <div class="card-col c-green" data-index="1" data-word="a" aria-label="Flashcard: a">
      <div class="sparkle">★</div>
      <div class="flashcard">a</div>
    </div>

    <div class="card-col c-orange" data-index="2" data-word="can" aria-label="Flashcard: can">
      <div class="sparkle">★</div>
      <div class="flashcard">can</div>
    </div>

    <div class="card-col c-purple" data-index="3" data-word="see" aria-label="Flashcard: see">
      <div class="sparkle">★</div>
      <div class="flashcard">see</div>
    </div>

    <div class="card-col c-teal" data-index="4" data-word="the" aria-label="Flashcard: the">
      <div class="sparkle">★</div>
      <div class="flashcard">the</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Toggle playback">
      <span id="playIcon">⏸</span>
      <span id="playText">Pause</span>
    </button>
    <div class="dots" id="dotsGroup">
      <div class="dot active" data-index="0" title="Word 1: I"></div>
      <div class="dot" data-index="1" title="Word 2: a"></div>
      <div class="dot" data-index="2" title="Word 3: can"></div>
      <div class="dot" data-index="3" title="Word 4: see"></div>
      <div class="dot" data-index="4" title="Word 5: the"></div>
    </div>
  </div>

  <script>
    const tones = [523.25, 587.33, 659.25, 783.99, 880.00]; // C5, D5, E5, G5, A5
    let audioCtx = null;

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

    const cards = document.querySelectorAll('.card-col');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

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

    function setActiveCard(index, playSound = false) {
      currentIndex = index;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });

      if (playSound) {
        playTone(tones[index]);
      }
    }

    function nextCard() {
      const nextIndex = (currentIndex + 1) % cards.length;
      setActiveCard(nextIndex, false);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextCard, 2800);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Pause';
        startTimer();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        stopTimer();
      }
    });

    cards.forEach((card) => {
      card.addEventListener('click', () => {
        const idx = parseInt(card.getAttribute('data-index'), 10);
        setActiveCard(idx, true);
        if (isPlaying) {
          startTimer();
        }
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        const idx = parseInt(dot.getAttribute('data-index'), 10);
        setActiveCard(idx, true);
        if (isPlaying) {
          startTimer();
        }
      });
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      height: 100%;
      min-height: 320px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px;
      user-select: none;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      height: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

    @media (max-width: 420px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    .word-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .word-card:active,
    .word-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.25);
    }

    .letter-display {
      font-size: 54px;
      font-weight: 800;
      line-height: 1;
      color: #0f172a;
      padding-top: 4px;
    }

    .visual-icon {
      font-size: 64px;
      line-height: 1;
      margin: 12px 0;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .phrase-label {
      font-size: 24px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .highlight {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    
    <div class="word-card" id="card-I" role="button" tabindex="0" aria-label="Word I: I am happy">
      <div class="letter-display">I</div>
      <div class="visual-icon">🙋‍♂️</div>
      <div class="phrase-label"><span class="highlight">I</span> am happy</div>
    </div>

    
    <div class="word-card" id="card-A" role="button" tabindex="0" aria-label="Word a: a red apple">
      <div class="letter-display">a</div>
      <div class="visual-icon">🍎</div>
      <div class="phrase-label"><span class="highlight">a</span> red apple</div>
    </div>
  </div>

  <script>
    function playChime(freq) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {}
    }

    function setupCard(id, freq) {
      const el = document.getElementById(id);
      function activate() {
        playChime(freq);
        el.classList.add('active');
        setTimeout(() => el.classList.remove('active'), 300);
      }
      el.addEventListener('click', activate);
      el.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          activate();
        }
      });
    }

    setupCard('card-I', 523.25); // C5 note
    setupCard('card-A', 659.25); // E5 note
  </script>
</body>
</html>

OGE.1.RF.6

Aligned learning resources

Related diagrams