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

Imagine you are at the playground. Every time you push a swing high into the air or pull a heavy gate shut, you are using invisible action.

A **force** is simply a push or a pull that acts on an object.

A **push** moves an object away from whatever is applying the force, while a **pull** brings an object closer.

<!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>Pushes and Pulls</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    .controls {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      z-index: 2;
    }

    .btn {
      padding: 10px 22px;
      font-size: 16px;
      font-weight: 600;
      border: 2px solid transparent;
      border-radius: 24px;
      background: #ffffff;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn.active-push {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
    }

    .btn.active-pull {
      background: #ff7a00;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(255, 122, 0, 0.35);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 240px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Direction readout badge */
    .indicator-badge {
      align-self: center;
      margin-top: 16px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.2px;
      transition: all 0.3s ease;
    }

    .badge-push {
      background: #e6f7ff;
      color: #0088cc;
    }

    .badge-pull {
      background: #fff2e6;
      color: #d96200;
    }

    /* Track and floor */
    .scene-area {
      position: relative;
      width: 100%;
      height: 140px;
      margin-bottom: 24px;
    }

    .floor-line {
      position: absolute;
      bottom: 24px;
      left: 10%;
      right: 10%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
    }

    .floor-marks {
      position: absolute;
      bottom: 14px;
      left: 10%;
      right: 10%;
      display: flex;
      justify-content: space-between;
      opacity: 0.35;
    }

    .floor-marks span {
      width: 2px;
      height: 6px;
      background: #94a3b8;
    }

    /* Person / Force Origin */
    .person {
      position: absolute;
      bottom: 28px;
      left: 12%;
      font-size: 48px;
      line-height: 1;
      z-index: 2;
      transition: transform 0.4s ease;
    }

    /* Rope connector (for pull) */
    .rope {
      position: absolute;
      bottom: 46px;
      left: 20%;
      height: 3px;
      background: #d97706;
      border-radius: 2px;
      transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
      opacity: 0;
      transform-origin: left center;
    }

    /* The moving crate */
    .crate {
      position: absolute;
      bottom: 28px;
      font-size: 42px;
      line-height: 1;
      z-index: 2;
      transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Vector arrow */
    .arrow-container {
      position: absolute;
      bottom: 84px;
      height: 24px;
      display: flex;
      align-items: center;
      transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s ease, opacity 0.3s ease;
    }

    .vector-arrow {
      height: 4px;
      border-radius: 2px;
      position: relative;
      transition: width 0.4s ease, background 0.3s ease;
    }

    .vector-arrow::after {
      content: '';
      position: absolute;
      top: -4px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }

    /* Push State styles */
    .mode-push .crate {
      left: 68%;
    }
    .mode-push .rope {
      opacity: 0;
      width: 0%;
    }
    .mode-push .person {
      transform: scaleX(1);
    }
    .mode-push .arrow-container {
      left: 36%;
    }
    .mode-push .vector-arrow {
      width: 80px;
      background: #22b7ff;
    }
    .mode-push .vector-arrow::after {
      right: -2px;
      border-left: 10px solid #22b7ff;
    }

    /* Pull State styles */
    .mode-pull .crate {
      left: 32%;
    }
    .mode-pull .rope {
      opacity: 1;
      width: 14%;
    }
    .mode-pull .person {
      transform: scaleX(-1);
    }
    .mode-pull .arrow-container {
      left: 32%;
    }
    .mode-pull .vector-arrow {
      width: 70px;
      background: #ff7a00;
    }
    .mode-pull .vector-arrow::after {
      left: -2px;
      border-right: 10px solid #ff7a00;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button id="btnPush" class="btn active-push">👉 Push</button>
    <button id="btnPull" class="btn">👈 Pull</button>
  </div>

  <div id="stage" class="stage mode-push">
    <div id="badge" class="indicator-badge badge-push">
      Away from force ➔
    </div>

    <div class="scene-area">
      <div id="arrowBox" class="arrow-container">
        <div class="vector-arrow"></div>
      </div>

      <div id="rope" class="rope"></div>
      <div class="person">🧍</div>
      <div id="crate" class="crate">📦</div>

      <div class="floor-line"></div>
      <div class="floor-marks">
        <span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span>
      </div>
    </div>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const btnPush = document.getElementById('btnPush');
    const btnPull = document.getElementById('btnPull');
    const badge = document.getElementById('badge');

    function setMode(mode) {
      if (mode === 'push') {
        stage.className = 'stage mode-push';
        btnPush.className = 'btn active-push';
        btnPull.className = 'btn';
        badge.className = 'indicator-badge badge-push';
        badge.innerHTML = 'Moves away ➔';
      } else {
        stage.className = 'stage mode-pull';
        btnPush.className = 'btn';
        btnPull.className = 'btn active-pull';
        badge.className = 'indicator-badge badge-pull';
        badge.innerHTML = '⬅ Brings closer';
      }
    }

    btnPush.addEventListener('click', () => setMode('push'));
    btnPull.addEventListener('click', () => setMode('pull'));

    // Gentle auto-cycle demo every 3.5 seconds
    let current = 'push';
    let timer = setInterval(() => {
      current = current === 'push' ? 'pull' : 'push';
      setMode(current);
    }, 3500);

    // Stop auto-cycle when user clicks
    [btnPush, btnPull].forEach(btn => {
      btn.addEventListener('click', () => clearInterval(timer));
    });
  </script>
</body>
</html>

Over 300 years ago, scientist **Sir Isaac Newton** studied pushes and pulls to discover the rules of how every object in the universe moves.

What actually happens to an object when a push or pull acts on it?

A force can make a still object start moving, make a moving object speed up, or slow it down to a complete stop.

When you kick a stationary soccer ball, your foot gives it a quick push that starts it moving fast across the grass.

<!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;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  .btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1e2945;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }

  .btn:hover {
    background: #f8fafc;
  }

  .btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }

  /* Pitch area */
  .pitch-container {
    width: 100%;
    max-width: 480px;
    height: 220px;
    background: #f0fdf4;
    border-radius: 14px;
    border: 1px solid #bbf7d0;
    position: relative;
    overflow: hidden;
    margin: 12px 0;
  }

  /* Grass texture stripes */
  .grass-stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(34, 197, 94, 0.06) 40px,
      rgba(34, 197, 94, 0.06) 80px
    );
  }

  /* Ground Line */
  .ground {
    position: absolute;
    bottom: 34px;
    left: 0;
    right: 0;
    height: 3px;
    background: #86efac;
  }

  /* Distance tick markers */
  .markers {
    position: absolute;
    bottom: 8px;
    left: 10%;
    right: 10%;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
  }

  /* Foot element */
  .foot {
    position: absolute;
    bottom: 36px;
    left: 4%;
    font-size: 38px;
    line-height: 1;
    transform-origin: top center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
  }

  .foot.kick {
    transform: rotate(-35deg) translate(22px, -6px);
  }

  /* Ball element */
  .ball {
    position: absolute;
    bottom: 36px;
    left: 15%;
    font-size: 32px;
    line-height: 1;
    z-index: 3;
    transition: transform 1.2s cubic-bezier(0.1, 0.8, 0.3, 1);
  }

  /* Force Arrow (Push) */
  .force-arrow-wrap {
    position: absolute;
    bottom: 82px;
    left: 16%;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition: opacity 0.2s ease, transform 0.25s ease;
    z-index: 4;
  }

  .force-arrow-wrap.show {
    opacity: 1;
    transform: scaleX(1);
  }

  .arrow-line {
    height: 6px;
    background: #f97316;
    border-radius: 3px;
    transition: width 0.2s ease;
  }

  .arrow-head {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #f97316;
  }

  .force-label {
    position: absolute;
    top: -22px;
    left: 0;
    font-size: 13px;
    font-weight: 700;
    color: #ea580c;
    white-space: nowrap;
  }

  /* Status Pill */
  .status-pill {
    padding: 6px 16px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    transition: background 0.3s;
  }

  .indicator-dot.active {
    background: #22c55e;
  }
</style>
</head>
<body>

  <div class="controls">
    <button class="btn" id="btnGentle" onclick="kick(1)">
      <span>👟 Gentle Push</span>
    </button>
    <button class="btn" id="btnHard" onclick="kick(2)">
      <span>👟 Hard Push</span>
    </button>
    <button class="btn" id="btnReset" onclick="resetBall()" style="flex: 0.5;">
      <span>↺</span>
    </button>
  </div>

  <div class="pitch-container">
    <div class="grass-stripes"></div>

    <div class="force-arrow-wrap" id="forceArrow">
      <div class="arrow-line" id="arrowLine" style="width: 40px;"></div>
      <div class="arrow-head"></div>
      <span class="force-label" id="forceLabel">Push</span>
    </div>

    <div class="foot" id="foot">👟</div>
    <div class="ball" id="ball">⚽</div>

    <div class="ground"></div>
    <div class="markers">
      <span>0 m</span>
      <span>5 m</span>
      <span>10 m</span>
    </div>
  </div>

  <div class="status-pill">
    <span class="indicator-dot" id="dot"></span>
    <span id="statusText">Stationary</span>
  </div>

<script>
  const ball = document.getElementById('ball');
  const foot = document.getElementById('foot');
  const forceArrow = document.getElementById('forceArrow');
  const arrowLine = document.getElementById('arrowLine');
  const forceLabel = document.getElementById('forceLabel');
  const btnGentle = document.getElementById('btnGentle');
  const btnHard = document.getElementById('btnHard');
  const statusText = document.getElementById('statusText');
  const dot = document.getElementById('dot');

  let animating = false;

  function resetBall() {
    ball.style.transition = 'none';
    ball.style.transform = 'translateX(0px) rotate(0deg)';
    foot.classList.remove('kick');
    forceArrow.classList.remove('show');
    btnGentle.classList.remove('active');
    btnHard.classList.remove('active');
    statusText.textContent = 'Stationary';
    dot.classList.remove('active');
    animating = false;
  }

  function kick(strength) {
    if (animating) {
      resetBall();
    }
    animating = true;

    // Highlight button
    btnGentle.classList.toggle('active', strength === 1);
    btnHard.classList.toggle('active', strength === 2);

    const isGentle = strength === 1;
    const distancePx = isGentle ? 130 : 270;
    const arrowWidth = isGentle ? 36 : 80;
    const duration = isGentle ? 1.0 : 1.4;
    const rotations = isGentle ? 360 : 720;

    arrowLine.style.width = arrowWidth + 'px';
    forceLabel.textContent = isGentle ? 'Small Push' : 'Big Push';

    // 1. Show foot back swing & force arrow
    forceArrow.classList.add('show');
    foot.classList.add('kick');

    // 2. Ball starts moving
    setTimeout(() => {
      dot.classList.add('active');
      statusText.textContent = isGentle ? 'Slow Motion' : 'Fast Motion';

      ball.style.transition = `transform ${duration}s cubic-bezier(0.15, 0.7, 0.35, 1)`;
      ball.style.transform = `translateX(${distancePx}px) rotate(${rotations}deg)`;
    }, 150);

    // 3. Hide arrow and return foot
    setTimeout(() => {
      forceArrow.classList.remove('show');
      foot.classList.remove('kick');
    }, 450);

    // 4. Motion complete
    setTimeout(() => {
      dot.classList.remove('active');
      statusText.textContent = 'Stopped';
      animating = false;
    }, (duration * 1000) + 200);
  }

  // Initial trigger for demonstration
  setTimeout(() => kick(1), 600);
</script>
</body>
</html>

Speed isn't the only thing that changes — what if a force hits an object from the side?

A force can also change the **direction** an object is traveling by knocking it off its straight path.

When a tennis player swings a racket against an incoming ball, the racket's push turns the ball around and sends it flying back across the net.

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

  .nav-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    justify-content: center;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 10px;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }

  .tab-btn.active {
    background: #f0f9ff;
    border-color: #22b7ff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 250px;
    background: #f8f9fa;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
  }

  .ground {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e2e8f0;
  }

  .ground-dash {
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #cbd5e1 0, #cbd5e1 10px, transparent 10px, transparent 20px);
  }

  /* Actors */
  .actor-hand {
    position: absolute;
    bottom: 34px;
    font-size: 40px;
    transition: transform 0.4s ease, left 0.4s ease;
    z-index: 2;
  }

  .actor-ball {
    position: absolute;
    bottom: 38px;
    width: 36px;
    height: 36px;
    font-size: 32px;
    line-height: 36px;
    text-align: center;
    z-index: 3;
    transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .actor-racket {
    position: absolute;
    bottom: 34px;
    font-size: 42px;
    z-index: 2;
    transition: transform 0.3s ease;
  }

  /* Force Arrow Overlay */
  .force-arrow {
    position: absolute;
    bottom: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 4;
  }

  .force-arrow.visible {
    opacity: 1;
  }

  .force-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  .force-push .force-label {
    background: #e0f2fe;
    color: #0369a1;
  }

  .force-pull .force-label {
    background: #fef3c7;
    color: #b45309;
  }

  .force-turn .force-label {
    background: #dcfce7;
    color: #15803d;
  }

  .arrow-svg {
    width: 70px;
    height: 24px;
  }

  /* Action replay button */
  .action-btn {
    padding: 8px 18px;
    background: #22b7ff;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    transition: opacity 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .action-btn:active {
    transform: scale(0.97);
  }
</style>
</head>
<body>

  <div class="nav-bar">
    <button class="tab-btn active" id="tab0" onclick="setMode(0)">Push ➔</button>
    <button class="tab-btn" id="tab1" onclick="setMode(1)">Pull ⬅</button>
    <button class="tab-btn" id="tab2" onclick="setMode(2)">Turn ↩</button>
  </div>

  <div class="stage" id="stage">
    <div class="ground"></div>
    <div class="ground-dash"></div>

    <div class="actor-hand" id="hand">✋</div>
    <div class="actor-racket" id="racket" style="display:none;">🎾</div>
    <div class="actor-ball" id="ball">⚽</div>

    <div class="force-arrow" id="arrow">
      <div class="force-label" id="arrowText">PUSH</div>
      <svg class="arrow-svg" id="arrowSvg" viewBox="0 0 70 24">
        <defs>
          <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="currentColor"/>
          </marker>
        </defs>
        <line x1="10" y1="12" x2="60" y2="12" stroke="currentColor" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowhead)"/>
      </svg>
    </div>
  </div>

  <button class="action-btn" id="playBtn" onclick="runAnimation()">
    <span>▶ Apply Force</span>
  </button>

<script>
  let currentMode = 0;
  let animTimer = null;

  const hand = document.getElementById('hand');
  const racket = document.getElementById('racket');
  const ball = document.getElementById('ball');
  const arrow = document.getElementById('arrow');
  const arrowText = document.getElementById('arrowText');
  const arrowSvg = document.getElementById('arrowSvg');

  function setMode(mode) {
    currentMode = mode;
    for (let i = 0; i < 3; i++) {
      document.getElementById('tab' + i).classList.toggle('active', i === mode);
    }
    resetStage();
    runAnimation();
  }

  function resetStage() {
    clearTimeout(animTimer);
    arrow.classList.remove('visible', 'force-push', 'force-pull', 'force-turn');
    
    if (currentMode === 0) { // Push
      hand.style.display = 'block';
      hand.style.left = '20%';
      hand.style.transform = 'scaleX(1)';
      racket.style.display = 'none';
      ball.textContent = '⚽';
      ball.style.left = '32%';
      arrowText.textContent = 'Push (Away)';
      arrow.className = 'force-arrow force-push';
      arrowSvg.style.color = '#0284c7';
      arrowSvg.style.transform = 'scaleX(1)';
    } else if (currentMode === 1) { // Pull
      hand.style.display = 'block';
      hand.style.left = '70%';
      hand.style.transform = 'scaleX(-1)';
      racket.style.display = 'none';
      ball.textContent = '📦';
      ball.style.left = '30%';
      arrowText.textContent = 'Pull (Closer)';
      arrow.className = 'force-arrow force-pull';
      arrowSvg.style.color = '#b45309';
      arrowSvg.style.transform = 'scaleX(-1)';
    } else if (currentMode === 2) { // Turn / Reverse
      hand.style.display = 'none';
      racket.style.display = 'block';
      racket.textContent = '🏸';
      racket.style.left = '65%';
      ball.textContent = '🎾';
      ball.style.left = '10%';
      arrowText.textContent = 'Push (Turn)';
      arrow.className = 'force-arrow force-turn';
      arrowSvg.style.color = '#15803d';
      arrowSvg.style.transform = 'scaleX(-1)';
    }
  }

  function runAnimation() {
    resetStage();

    if (currentMode === 0) {
      // PUSH: Hand pushes ball right
      setTimeout(() => {
        arrow.style.left = '30%';
        arrow.classList.add('visible');
        hand.style.left = '26%';
      }, 200);

      setTimeout(() => {
        ball.style.left = '75%';
      }, 450);

      animTimer = setTimeout(() => {
        arrow.classList.remove('visible');
      }, 1200);

    } else if (currentMode === 1) {
      // PULL: Hand pulls box towards right
      setTimeout(() => {
        arrow.style.left = '42%';
        arrow.classList.add('visible');
        hand.style.left = '74%';
      }, 200);

      setTimeout(() => {
        ball.style.left = '62%';
      }, 450);

      animTimer = setTimeout(() => {
        arrow.classList.remove('visible');
      }, 1200);

    } else if (currentMode === 2) {
      // TURN: Ball flies right towards racket, racket pushes it left
      setTimeout(() => {
        ball.style.left = '58%';
      }, 100);

      setTimeout(() => {
        racket.style.transform = 'rotate(-25deg)';
        arrow.style.left = '42%';
        arrow.classList.add('visible');
      }, 600);

      setTimeout(() => {
        racket.style.transform = 'rotate(0deg)';
        ball.style.left = '12%';
      }, 800);

      animTimer = setTimeout(() => {
        arrow.classList.remove('visible');
      }, 1500);
    }
  }

  // Initialize
  setMode(0);
</script>
</body>
</html>

What happens if an object cannot roll or slide away when you push or pull it?

When an object cannot move away, forces can squish, stretch, bend, or twist its **shape**.

Pushing your hands down on a lump of clay squishes it flat, while pulling both ends of a rubber band stretches it long and thin.

<!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>Pushes and Pulls</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .force-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      touch-action: manipulation;
    }

    .force-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .force-card.active {
      border-color: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      color: #1e2945;
    }

    .stage {
      width: 100%;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Push Elements */
    .clay {
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, #fb923c, #ea580c);
      border-radius: 50%;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s ease;
      box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25);
      z-index: 2;
    }

    .force-card.active .clay {
      transform: scaleX(1.75) scaleY(0.45);
      border-radius: 40%;
    }

    /* Pull Elements */
    .band {
      width: 52px;
      height: 24px;
      background: linear-gradient(135deg, #38bdf8, #0284c7);
      border-radius: 12px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s ease;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
      z-index: 2;
    }

    .force-card.active .band {
      transform: scaleX(2.2) scaleY(0.4);
      border-radius: 4px;
    }

    /* Hands & Force Vectors */
    .hand {
      font-size: 26px;
      position: absolute;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
      line-height: 1;
    }

    .arrow-svg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 1;
    }

    .force-arrow {
      stroke: #10b981;
      stroke-width: 3.5;
      stroke-linecap: round;
      fill: none;
      opacity: 0.25;
      transition: opacity 0.3s ease, stroke-dashoffset 0.4s ease;
    }

    .arrow-head {
      fill: #10b981;
      opacity: 0.25;
      transition: opacity 0.3s ease, transform 0.4s ease;
    }

    .force-card.active .force-arrow,
    .force-card.active .arrow-head {
      opacity: 1;
    }

    /* Push layout positions */
    #hand-push-l { left: 16%; transform: translateX(0); }
    #hand-push-r { right: 16%; transform: translateX(0); }
    .force-card.active #hand-push-l { transform: translateX(18px); }
    .force-card.active #hand-push-r { transform: translateX(-18px); }

    /* Pull layout positions */
    #hand-pull-l { left: 24%; transform: translateX(0); }
    #hand-pull-r { right: 24%; transform: translateX(0); }
    .force-card.active #hand-pull-l { transform: translateX(-22px); }
    .force-card.active #hand-pull-r { transform: translateX(22px); }

    .action-badge {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 20px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .force-card.active .action-badge {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="force-card active" id="pushCard">
      <div class="card-title">PUSH</div>
      <div class="stage">
        <svg class="arrow-svg" viewBox="0 0 200 110">
          <defs>
            <marker id="arrow-in-r" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <polygon points="0 0, 6 3, 0 6" fill="#10b981" />
            </marker>
            <marker id="arrow-in-l" markerWidth="6" markerHeight="6" refX="2" refY="3" orient="auto">
              <polygon points="6 0, 0 3, 6 6" fill="#10b981" />
            </marker>
          </defs>
          <line x1="26" y1="55" x2="64" y2="55" class="force-arrow" marker-end="url(#arrow-in-r)" />
          <line x1="174" y1="55" x2="136" y2="55" class="force-arrow" marker-end="url(#arrow-in-l)" />
        </svg>

        <span class="hand" id="hand-push-l">👉</span>
        <div class="clay"></div>
        <span class="hand" id="hand-push-r">👈</span>
      </div>
      <div class="action-badge" id="pushBadge">Squashes Together</div>
    </div>

    
    <div class="force-card active" id="pullCard">
      <div class="card-title">PULL</div>
      <div class="stage">
        <svg class="arrow-svg" viewBox="0 0 200 110">
          <defs>
            <marker id="arrow-out-l" markerWidth="6" markerHeight="6" refX="2" refY="3" orient="auto">
              <polygon points="6 0, 0 3, 6 6" fill="#10b981" />
            </marker>
            <marker id="arrow-out-r" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <polygon points="0 0, 6 3, 0 6" fill="#10b981" />
            </marker>
          </defs>
          <line x1="68" y1="55" x2="28" y2="55" class="force-arrow" marker-end="url(#arrow-out-l)" />
          <line x1="132" y1="55" x2="172" y2="55" class="force-arrow" marker-end="url(#arrow-out-r)" />
        </svg>

        <span class="hand" id="hand-pull-l">👈</span>
        <div class="band"></div>
        <span class="hand" id="hand-pull-r">👉</span>
      </div>
      <div class="action-badge" id="pullBadge">Stretches Apart</div>
    </div>
  </div>

  <script>
    const pushCard = document.getElementById('pushCard');
    const pullCard = document.getElementById('pullCard');

    function toggleCard(card) {
      card.classList.toggle('active');
    }

    pushCard.addEventListener('click', () => toggleCard(pushCard));
    pullCard.addEventListener('click', () => toggleCard(pullCard));
  </script>
</body>
</html>

It is easy to think a moving ball carries 'force' stored inside it, but a force only exists during the actual push or pull between two objects.

Next time you open a backpack, bounce a basketball, or mold playdough, look closely to see whether your force is changing speed, direction, or shape!

science

Pushes and Pulls: Introducing Forces. Identify pushes and pulls as forces that can change an object's speed, direction, or shape.

What is a Force? Pushes and Pulls in Primary Science

Pushes and Pulls: How Forces Affect Speed, Direction, and Shape

Forces and Motion: Identify Pushes and Pulls and Their Effects

When teaching forces to KS1-KS2 pupils, employ the Concrete-Representational-Abstract (CRA) instructional framework. Begin with tactile physical experiences (e.g., stretching elastic bands, squashing playdough, pushing toy cars across different surfaces). Transition to representational visual modeling using directional force arrows to make unseen interactions visible. Anchor discussions around the three core observable changes: speeding up/slowing down, turning/changing path, and deforming/changing shape, explicitly distinguishing between directional contact forces and non-contact forces.

Pushes and Pulls: Introducing Forces

What Is a Force?

Changing Speed

Changing Direction