<!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 {
      background-color: #fdfbf7;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .cards-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 500px;
    }

    .dot-card {
      flex: 1 1 90px;
      max-width: 145px;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border: 2px solid #ebe6dc;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(30, 41, 69, 0.05);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .dot-card:hover {
      border-color: #ff9f43;
      box-shadow: 0 6px 16px rgba(255, 122, 0, 0.15);
    }

    .dot-card:active {
      transform: scale(0.97);
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .guide-line {
      stroke: #ffd5a8;
      stroke-width: 2.5;
      stroke-dasharray: 4 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .dot {
      fill: #ff7a00;
      transform-origin: center;
      animation: gentleBounce 3s ease-in-out infinite;
      transition: fill 0.2s ease, transform 0.2s ease;
    }

    .dot:hover {
      fill: #e66200;
    }

    /* Staggered floating bounce */
    .d-1 { animation-delay: 0s; }
    .d-2 { animation-delay: 0.3s; }
    .d-3 { animation-delay: 0.6s; }

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

    .pulsing {
      animation: tapPulse 0.45s ease forwards !important;
    }

    @keyframes tapPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.35); fill: #ff4800; }
      100% { transform: scale(1); fill: #ff7a00; }
    }

    .bottom-banner {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #ffffff;
      border: 2px solid #ebe6dc;
      padding: 10px 22px;
      border-radius: 999px;
      box-shadow: 0 3px 8px rgba(30, 41, 69, 0.04);
    }

    .number-badge {
      background: #ff7a00;
      color: #ffffff;
      font-weight: 800;
      font-size: 18px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .banner-text {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.2px;
    }

    @media (max-width: 380px) {
      .cards-row {
        gap: 8px;
      }
      .dot-card {
        border-radius: 14px;
        padding: 4px;
      }
      .bottom-banner {
        margin-top: 14px;
        padding: 8px 16px;
      }
      .banner-text {
        font-size: 15px;
      }
      .number-badge {
        font-size: 15px;
        width: 24px;
        height: 24px;
      }
    }
  </style>
</head>
<body>

  <div class="cards-row">
    
    <div class="dot-card" onclick="animateCard(this)" title="Tap to count">
      <svg viewBox="0 0 100 100">
        <polygon class="guide-line" points="50,22 22,76 78,76" />
        <circle class="dot d-1" cx="50" cy="22" r="11" />
        <circle class="dot d-2" cx="22" cy="76" r="11" />
        <circle class="dot d-3" cx="78" cy="76" r="11" />
      </svg>
    </div>

    
    <div class="dot-card" onclick="animateCard(this)" title="Tap to count">
      <svg viewBox="0 0 100 100">
        <line class="guide-line" x1="20" y1="50" x2="80" y2="50" />
        <circle class="dot d-1" cx="20" cy="50" r="11" />
        <circle class="dot d-2" cx="50" cy="50" r="11" />
        <circle class="dot d-3" cx="80" cy="50" r="11" />
      </svg>
    </div>

    
    <div class="dot-card" onclick="animateCard(this)" title="Tap to count">
      <svg viewBox="0 0 100 100">
        <line class="guide-line" x1="22" y1="78" x2="78" y2="22" />
        <circle class="dot d-1" cx="22" cy="78" r="11" />
        <circle class="dot d-2" cx="50" cy="50" r="11" />
        <circle class="dot d-3" cx="78" cy="22" r="11" />
      </svg>
    </div>
  </div>

  <div class="bottom-banner">
    <div class="number-badge">3</div>
    <div class="banner-text">All of these are 3!</div>
  </div>

  <script>
    function animateCard(cardEl) {
      const dots = cardEl.querySelectorAll('.dot');
      dots.forEach((dot, index) => {
        dot.classList.remove('pulsing');
        setTimeout(() => {
          dot.classList.add('pulsing');
          setTimeout(() => {
            dot.classList.remove('pulsing');
          }, 450);
        }, index * 120);
      });
    }
  </script>
</body>
</html>

Seeing Numbers 1 to 3 Quickly

<!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;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Card Flip Arena */
    .card-perspective {
      perspective: 800px;
      width: 160px;
      height: 160px;
    }

    .flash-card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 10px 25px -5px rgba(30, 41, 69, 0.12), 0 0 0 3px #f1f5f9;
    }

    .card-face {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: 24px;
    }

    .card-face.active {
      display: block;
    }

    /* Dot Layouts */
    .dot-item {
      position: absolute;
      width: 34px;
      height: 34px;
      background: #ff5e62;
      background: radial-gradient(circle at 35% 35%, #ff7676, #e63946);
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(230, 57, 70, 0.35);
      transform: translate(-50%, -50%);
    }

    /* Pattern 1: Center */
    .p1-dot1 { top: 50%; left: 50%; }

    /* Pattern 3: Triangle */
    .p3-dot1 { top: 32%; left: 50%; }
    .p3-dot2 { top: 68%; left: 32%; }
    .p3-dot3 { top: 68%; left: 68%; }

    /* Pattern 2: Vertical */
    .p2-dot1 { top: 32%; left: 50%; }
    .p2-dot2 { top: 68%; left: 50%; }

    /* Choice Buttons */
    .choices-row {
      display: flex;
      justify-content: center;
      gap: 14px;
      width: 100%;
    }

    .choice-btn {
      position: relative;
      flex: 1;
      max-width: 96px;
      height: 64px;
      border: 3px solid #e2e8f0;
      border-radius: 18px;
      background: #ffffff;
      color: #64748b;
      font-size: 26px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      transition: all 0.25s ease;
    }

    .choice-btn.active-match {
      background: #f0fdf4;
      border-color: #22c55e;
      color: #15803d;
      box-shadow: 0 6px 16px -2px rgba(34, 197, 94, 0.35);
    }

    .check-badge {
      position: absolute;
      top: -9px;
      right: -7px;
      width: 24px;
      height: 24px;
      background: #22c55e;
      color: #ffffff;
      border-radius: 50%;
      font-size: 13px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.25s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

    .choice-btn.active-match .check-badge {
      opacity: 1;
      transform: scale(1);
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
    }

    .control-btn {
      background: #f1f5f9;
      border: none;
      color: #475569;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s;
    }

    .control-btn:hover {
      background: #e2e8f0;
    }

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

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

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

  <div class="flash-stage">
    
    <div class="card-perspective">
      <div id="flashCard" class="flash-card">
        
        <div id="face-0" class="card-face active">
          <div class="dot-item p1-dot1"></div>
        </div>

        
        <div id="face-1" class="card-face">
          <div class="dot-item p3-dot1"></div>
          <div class="dot-item p3-dot2"></div>
          <div class="dot-item p3-dot3"></div>
        </div>

        
        <div id="face-2" class="card-face">
          <div class="dot-item p2-dot1"></div>
          <div class="dot-item p2-dot2"></div>
        </div>
      </div>
    </div>

    
    <div class="choices-row">
      <button class="choice-btn active-match" id="btn-1" onclick="selectStep(0)">
        1
        <div class="check-badge">✓</div>
      </button>
      <button class="choice-btn" id="btn-2" onclick="selectStep(2)">
        2
        <div class="check-badge">✓</div>
      </button>
      <button class="choice-btn" id="btn-3" onclick="selectStep(1)">
        3
        <div class="check-badge">✓</div>
      </button>
    </div>

    
    <div class="controls">
      <button id="toggleBtn" class="control-btn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> <span id="playLabel">Pause</span>
      </button>
      <div class="step-dots">
        <div class="step-dot active" onclick="selectStep(0)"></div>
        <div class="step-dot" onclick="selectStep(1)"></div>
        <div class="step-dot" onclick="selectStep(2)"></div>
      </div>
    </div>
  </div>

  <script>
    // Sequence order: 1 dot -> 3 dots (triangle) -> 2 dots (vertical)
    const steps = [
      { id: 0, count: 1, btnId: 'btn-1' },
      { id: 1, count: 3, btnId: 'btn-3' },
      { id: 2, count: 2, btnId: 'btn-2' }
    ];

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

    function playTone(freq, dur = 0.15) {
      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.12, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch (e) {}
    }

    const card = document.getElementById('flashCard');
    const faces = [
      document.getElementById('face-0'),
      document.getElementById('face-1'),
      document.getElementById('face-2')
    ];
    const buttons = {
      'btn-1': document.getElementById('btn-1'),
      'btn-2': document.getElementById('btn-2'),
      'btn-3': document.getElementById('btn-3')
    };
    const stepDots = document.querySelectorAll('.step-dot');
    const playIcon = document.getElementById('playIcon');
    const playLabel = document.getElementById('playLabel');

    function renderState(index) {
      // Rotate card slightly during switch
      card.style.transform = 'rotateY(90deg) scale(0.92)';

      setTimeout(() => {
        faces.forEach((face, i) => {
          face.classList.toggle('active', i === index);
        });

        // Highlight matching choice button
        const activeBtnId = steps[index].btnId;
        Object.keys(buttons).forEach(key => {
          buttons[key].classList.toggle('active-match', key === activeBtnId);
        });

        // Indicator dots
        stepDots.forEach((d, i) => {
          d.classList.toggle('active', i === index);
        });

        card.style.transform = 'rotateY(0deg) scale(1)';
      }, 150);
    }

    function advance() {
      currentStep = (currentStep + 1) % steps.length;
      renderState(currentStep);
    }

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

    function selectStep(index) {
      currentStep = index;
      renderState(currentStep);
      playTone(523.25 + index * 120);
      if (isPlaying) {
        startTimer();
      }
    }

    function togglePlay() {
      playTone(440);
      isPlaying = !isPlaying;
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playLabel.textContent = 'Pause';
        startTimer();
      } else {
        playIcon.textContent = '▶';
        playLabel.textContent = 'Play';
        clearInterval(timer);
      }
    }

    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">
  <title>Seeing Numbers 1 to 3 Quickly</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Cards Deck */
    .cards-deck {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 12px;
      padding-top: 10px;
    }

    .number-card {
      flex: 1;
      max-width: 160px;
      min-width: 95px;
      height: 220px;
      background: #ffffff;
      border: 2.5px solid #e2e8f0;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 8px;
      cursor: pointer;
      position: relative;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    /* Active Card States */
    .number-card[data-card="1"].active {
      transform: translateY(-8px);
      border-color: #f43f5e;
      box-shadow: 0 12px 24px -4px rgba(244, 63, 94, 0.28);
    }
    .number-card[data-card="2"].active {
      transform: translateY(-8px);
      border-color: #0284c7;
      box-shadow: 0 12px 24px -4px rgba(2, 132, 199, 0.28);
    }
    .number-card[data-card="3"].active {
      transform: translateY(-8px);
      border-color: #10b981;
      box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.28);
    }

    /* Counter Display Areas */
    .counter-display-area {
      width: 100%;
      height: 105px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .counter-circle {
      border-radius: 50%;
      transition: transform 0.3s ease, opacity 0.3s ease;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
    }

    /* Card 1 - Single Counter */
    .pattern-single {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .counter-c1 {
      width: 48px;
      height: 48px;
      background: #f43f5e;
    }

    /* Card 2 - Pair Horizontal */
    .pattern-pair {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    .counter-c2 {
      width: 36px;
      height: 36px;
      background: #0284c7;
    }

    /* Card 3 - Triangle Pattern */
    .pattern-triangle {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .triangle-bottom-row {
      display: flex;
      gap: 14px;
    }
    .counter-c3 {
      width: 32px;
      height: 32px;
      background: #10b981;
    }

    .number-card.active .counter-circle {
      transform: scale(1.08);
    }

    /* Card Labels */
    .card-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .card-num-circle {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      color: #334155;
      transition: color 0.3s ease;
    }

    .card-word {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #94a3b8;
      transition: color 0.3s ease;
    }

    .number-card[data-card="1"].active .card-num-circle,
    .number-card[data-card="1"].active .card-word {
      color: #f43f5e;
    }
    .number-card[data-card="2"].active .card-num-circle,
    .number-card[data-card="2"].active .card-word {
      color: #0284c7;
    }
    .number-card[data-card="3"].active .card-num-circle,
    .number-card[data-card="3"].active .card-word {
      color: #10b981;
    }

    /* Control Bar */
    .control-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

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

    .step-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    .step-btn[data-step="1"].active {
      background: #f43f5e;
      border-color: #f43f5e;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3);
    }
    .step-btn[data-step="2"].active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
    }
    .step-btn[data-step="3"].active {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    }

    .toggle-play-btn {
      height: 38px;
      padding: 0 14px;
      border-radius: 20px;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .toggle-play-btn.playing {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }
  </style>
</head>
<body>
  <div class="main-stage">
    
    <div class="cards-deck">
      
      <div class="number-card active" data-card="1" onclick="selectStep(1)">
        <div class="counter-display-area">
          <div class="pattern-single">
            <div class="counter-circle counter-c1"></div>
          </div>
        </div>
        <div class="card-footer">
          <span class="card-num-circle">1</span>
          <span class="card-word">one</span>
        </div>
      </div>

      
      <div class="number-card" data-card="2" onclick="selectStep(2)">
        <div class="counter-display-area">
          <div class="pattern-pair">
            <div class="counter-circle counter-c2"></div>
            <div class="counter-circle counter-c2"></div>
          </div>
        </div>
        <div class="card-footer">
          <span class="card-num-circle">2</span>
          <span class="card-word">two</span>
        </div>
      </div>

      
      <div class="number-card" data-card="3" onclick="selectStep(3)">
        <div class="counter-display-area">
          <div class="pattern-triangle">
            <div class="counter-circle counter-c3"></div>
            <div class="triangle-bottom-row">
              <div class="counter-circle counter-c3"></div>
              <div class="counter-circle counter-c3"></div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <span class="card-num-circle">3</span>
          <span class="card-word">three</span>
        </div>
      </div>
    </div>

    
    <div class="control-bar">
      <div class="step-btn-group">
        <button class="step-btn active" data-step="1" onclick="selectStep(1)">1</button>
        <button class="step-btn" data-step="2" onclick="selectStep(2)">2</button>
        <button class="step-btn" data-step="3" onclick="selectStep(3)">3</button>
      </div>
      <button id="playBtn" class="toggle-play-btn" onclick="toggleAutoPlay()">
        <span id="playIcon">⏸</span>
        <span id="playText">Auto</span>
      </button>
    </div>
  </div>

  <script>
    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    const cards = document.querySelectorAll('.number-card');
    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function applyState(step) {
      currentStep = step;

      cards.forEach(card => {
        const cStep = parseInt(card.getAttribute('data-card'), 10);
        if (cStep === step) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });

      stepBtns.forEach(btn => {
        const bStep = parseInt(btn.getAttribute('data-step'), 10);
        if (bStep === step) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    function selectStep(step) {
      applyState(step);
    }

    function nextStep() {
      const next = currentStep >= 3 ? 1 : currentStep + 1;
      applyState(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = true;
      playBtn.classList.add('playing');
      playIcon.textContent = '⏸';
      playText.textContent = 'Auto';
      timer = setInterval(nextStep, 2500);
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      isPlaying = false;
      playBtn.classList.remove('playing');
      playIcon.textContent = '▶';
      playText.textContent = 'Play';
    }

    function toggleAutoPlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    }

    // Initialize auto play on load
    startAutoPlay();
  </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">
  <title>Seeing Numbers 1 to 3 Quickly</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      gap: 18px;
    }

    .banner {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ede9fe;
      border: 1.5px solid #ddd6fe;
      color: #5b21b6;
      padding: 8px 20px;
      border-radius: 999px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.2px;
      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.08);
    }

    .banner-eye {
      font-size: 22px;
      line-height: 1;
    }

    .cards-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 14px;
      width: 100%;
      max-width: 440px;
    }

    .card-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1 1 100px;
      max-width: 125px;
      cursor: pointer;
    }

    .tile {
      width: 100%;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
      position: relative;
      transform-origin: center center;
      animation: sway 4s ease-in-out infinite;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .card-item:nth-child(1) .tile {
      animation-delay: 0s;
    }

    .card-item:nth-child(2) .tile {
      animation-delay: -1.33s;
    }

    .card-item:nth-child(3) .tile {
      animation-delay: -2.66s;
    }

    .tile.active {
      border-color: #8b5cf6;
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 4px 12px rgba(109, 40, 217, 0.15);
    }

    @keyframes sway {
      0%, 100% {
        transform: rotate(-4deg);
      }
      50% {
        transform: rotate(4deg);
      }
    }

    .dot-area {
      width: 64px;
      height: 64px;
      position: relative;
    }

    .dot {
      width: 22px;
      height: 22px;
      background: #7c3aed;
      border-radius: 50%;
      position: absolute;
      box-shadow: 0 2px 5px rgba(124, 58, 237, 0.35);
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    /* Card 1: Horizontal */
    .pos-h1 { top: 21px; left: 6px; }
    .pos-h2 { top: 21px; right: 6px; }

    /* Card 2: Vertical */
    .pos-v1 { left: 21px; top: 6px; }
    .pos-v2 { left: 21px; bottom: 6px; }

    /* Card 3: Diagonal */
    .pos-d1 { top: 7px; left: 7px; }
    .pos-d2 { bottom: 7px; right: 7px; }

    .label {
      font-size: 14px;
      font-weight: 700;
      color: #4b5563;
      text-align: center;
    }

    .count-badge {
      font-size: 13px;
      font-weight: 800;
      color: #7c3aed;
      background: #ede9fe;
      padding: 2px 8px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <div class="banner">
    <span class="banner-eye">👁️</span>
    <span>Always 2!</span>
  </div>

  <div class="cards-grid">
    
    <div class="card-item" onclick="pulseCard(this)">
      <div class="tile">
        <div class="dot-area">
          <div class="dot pos-h1"></div>
          <div class="dot pos-h2"></div>
        </div>
      </div>
      <div class="count-badge">2</div>
      <span class="label">Horizontal</span>
    </div>

    
    <div class="card-item" onclick="pulseCard(this)">
      <div class="tile">
        <div class="dot-area">
          <div class="dot pos-v1"></div>
          <div class="dot pos-v2"></div>
        </div>
      </div>
      <div class="count-badge">2</div>
      <span class="label">Vertical</span>
    </div>

    
    <div class="card-item" onclick="pulseCard(this)">
      <div class="tile">
        <div class="dot-area">
          <div class="dot pos-d1"></div>
          <div class="dot pos-d2"></div>
        </div>
      </div>
      <div class="count-badge">2</div>
      <span class="label">Diagonal</span>
    </div>
  </div>

  <script>
    function pulseCard(container) {
      const tile = container.querySelector('.tile');
      tile.classList.add('active');
      const dots = container.querySelectorAll('.dot');
      dots.forEach((dot, index) => {
        setTimeout(() => {
          dot.style.transform = 'scale(1.25)';
          setTimeout(() => {
            dot.style.transform = 'scale(1)';
          }, 200);
        }, index * 120);
      });
      setTimeout(() => {
        tile.classList.remove('active');
      }, 700);
    }
  </script>
</body>
</html>

Comparing Sizes: Big and Small

Ordering Three Objects by Size

Comparing Lengths: Longer and Shorter

Comparing Heights: Taller and Shorter

Ordering Lengths from Shortest to Longest

Measuring Length with Cubes and Counters

math

Comparing Size, Length, and Height

Seeing 4 in Dot Patterns

Seeing 5 on Dice and Five-Frames

Seeing Up to 5 Dots Scattered Around

Seeing 6 and 7 as 5 and Some More

Seeing 8 and 9 Near 10 and as Doubles

Seeing Numbers Quickly on Ten-Frames to 10

Perceptual and Conceptual Subitizing to 10

Subitising 1, 2, and 3 with Dot Patterns

Subitising 4 and 5 with Dot Patterns

Subitising with Fingers (1 to 5)

Subitising with Different Arrangements (1 to 5)

Recognising Written Numbers 1 to 5

Recognising Written Numbers 6 to 9

Showing Numbers 1 to 9 With Objects

Showing Zero With Objects: An Empty Group

Subitising and Recognising Numbers 0 to 9

Comparing Weights: Heavy and Light

Comparing Weights Using a Balance Scale

Comparing Capacity: Full, Empty, and Half Full

Comparing Containers: Holds More and Holds Less

Measuring Capacity with Cups and Scoops

Solving Everyday Measurement Puzzles

Exploring Weight and Capacity

Saying Number Words in Order to 5

Touch Counting Objects in a Line to 5

The Cardinal Rule: The Last Number Tells How Many

Order Irrelevance: Counting in Any Direction

Counting Scattered Objects up to 5

Instant Recognition: Subitising up to 3

Instant Recognition: Subitising 4 and 5 on a Die

Foundations of Counting and Subitising to 5

Counting Forward to 10 with Objects

Counting Scattered Objects to 10

Counting Sounds and Actions up to 10

Counting Backwards from 5 to 1

Counting Backwards from 10 to 1

Counting on from Any Number up to 10

Counting Back from Any Number within 10

Counting Strategies and Number Fluency to 10

Counting Objects in a Line

Counting Objects in a Circle

Counting Objects in a Scatter

Counting Objects in a Ten-Frame

Counting Strategies and Spatial Arrangements

Counting Forward to 15

Counting Forward from 15 to 20

Counting Backwards from 20 to 10

Counting Backwards from 20 to 0

Finding One More Than a Number up to 10

Finding One Less Than a Number up to 10

Finding One More and One Less within 20

Finding the Missing Number on a Number Line to 20

Forward and Backward Counting to 20

Instant Recognition of 1, 2, and 3 Dots

Instant Recognition of 4 and 5 Dots

Reading Finger Patterns from 1 to 5

Reading Finger Patterns from 6 to 10

Identifying Quantities in Five-Frames Instantly

Identifying Quantities in Ten-Frames Instantly

Conceptual Subitizing: Seeing Two Smaller Groups

Quick Images Flash Challenges to 10

Perceptual and Conceptual Subitizing

Which Group Has More? (1 to 10)

Which Group Has More? (11 to 20)

Which Group Has Fewer? (1 to 10)

Which Group Has Fewer? (11 to 20)

Counting and Comparing Two Groups to 10

Counting and Comparing Two Groups to 20

Estimating Small Quantities (1 to 5)

Using Five as a Benchmark to Count On

Comparing Groups and Estimating Quantities

Adding With Objects: Combining Two Groups

Ways to Compose 2 and 3

Ways to Compose 4 With Connecting Cubes

Number Bonds for 5: Different Ways to Make 5

Finding All Ways to Make 5

Composing Numbers 2 Through 5

Counting Forward from 1 to 10 on a Number Track

Counting Backward from 10 to 0

Counting on from Any Starting Number to 10

Finding the Missing Number on a 1 to 10 Line

Identifying the Number Before and After to 10

Ordering Mixed Numerals from 1 to 10

Estimating Small Quantities up to 10

Showing Numbers to 10 in Many Different Ways

Counting Sequences and Ordering Numbers to 10

Skip Counting in 2s to 10 with Pairs

Skip Counting in 2s up to 20

Skip Counting in 5s to 20

Skip Counting in 10s to 50

Skip Counting in 10s to 100

Choosing the Best Counting Strategy

Skip Counting and Number Patterns

What Is Part-Part-Whole? Breaking 5 Into Parts

Breaking 6 Into Parts

Finding All Ways to Make 6

Breaking 7 Into Parts

Finding All Ways to Make 7

Breaking 8 Into Parts

Finding All Ways to Make 8

Breaking Numbers 5 to 8 Into Parts

Conceptual Subitising: Seeing Parts in 6

Conceptual Subitising: Seeing Parts in 7 and 8

Conceptual Subitising on Ten-Frames up to 10

Comparing Quantities with Matching Towers

Comparing Numbers Using 'More Than' and 'Less Than' to 10

Comparing Numbers With Different Tens Digits

Comparing Two-Digit Numbers With Base-Ten Models

Subitising and Comparing Quantities to 20

Composing 5 on One Hand With Fingers

Composing 5 Using a Five-Frame

Composing 5 With a Part-Part-Whole Mat

Story Problems: Putting Together to Make 5

Finding the Hidden Partner to Make 5

Making 5 With Three Small Groups

Celebrating All Ways to Make 5

Visual Models and Story Problems for 5

Number Bonds for 9: Different Ways to Make 9

Finding All Ways to Make 9

Breaking 10 Into Parts

Finding All Ways to Make 10

Using a Ten-Frame to Show Parts of 10

Number Bonds for 9 and 10

Number Pairs for 6 to 10

Ordering Three Numbers from Smallest to Greatest to 10

Ordering Numbers from Greatest to Smallest to 20

Estimating Quantities up to 10: Is It About 5 or 10?

Estimating Quantities in Jars up to 20

Checking Estimates by Grouping in 5s

Ordering and Estimating Quantities to 20

Combining Two Parts to Make a Whole (1 to 5)

Combining Two Parts to Make a Whole (6 to 10)

Finding the Missing Part (1 to 5)

Finding the Missing Part (6 to 10)

Subitising Parts of a Collection (1 to 5)

Subitising Parts of a Collection (6 to 10)

Showing Part-Part-Whole With Objects

Recording Part-Part-Whole With Number Sentences

Combining and Representing Part-Part-Whole to 10

Comparing Groups: More and Less by Matching

Identifying Groups with the Same Number of Objects

Using the Words Fewer and Less Correctly

Comparing Two Numbers up to 5 Using Towers

Comparing Two Numbers up to 10 on Ten-Frames

Finding How Many More in One Group Than Another

Finding How Many Fewer in a Group

Comparing Numbers on a Number Track to 10

Making Two Groups Equal by Adding or Removing Items

Comparing Three Groups to Find Most and Least

Comparing Quantities and Numbers

Composing 6 to 9 as 5 and Some More

Making Towers of 10 With Two Colors

Composing Numbers With a Bead String to 10

Composing Equal Doubles up to 10

Finding the Missing Partner on a Ten-Frame

Decomposing and Recomposing Quantities to 10

Story Problems: Composing Quantities up to 10

Strategies for Composing up to 10

Rainbow Pairs That Make 10

Ten Fingers Up: Bending Fingers to Make Pairs

Making 5 Versus Making 10 Comparison

Fill the Ten-Frame Game

Mystery Partner Clues for 5

Mystery Partner Clues for 10

Making 10 With an Egg Carton Ten-Frame

Using Zero When Making 5 and 10

Rapid Recall of Partners for 5

Rapid Recall of Partners for 10

Partners to 5 and 10 Mastery Celebration

Fluency with Anchors 5 and 10

Reading and Interpreting a Two-Part Picture

Drawing Pictures to Show Number Compositions

Telling Math Stories About Composing Numbers

Matching Expressions to Part-Whole Models

Interpreting the Equals Sign as 'The Same As'

Explaining Why 4 and 3 Makes the Same Total as 3 and 4

Composing a Quantity in Multiple Different Ways

Composing Quantities With Three Addends Within 10

Finding True and False Compositions

Solving Real-World Playground Composition Problems

Composition Within 10 Capstone Challenge

Interpreting Compositions Within 10

Using Counting On to Add (Within 10)

Using Counting Back to Subtract (Within 10)

Using Subitising to Add (Within 5)

Using Subitising to Add (Within 10)

Showing Addition With a Ten-Frame

Showing Subtraction With a Ten-Frame

Mental Strategies for Adding and Subtracting

OGM.1.CC.4

Aligned learning resources

Related diagrams