<!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: #ffffff;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .top-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

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

    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .arrow-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 800;
      color: #ffffff;
    }
    .arrow-badge.applied { background: #ef4444; }
    .arrow-badge.reaction { background: #16a34a; }

    .toggle-btn {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease;
    }
    .toggle-btn:hover { background: #1d4ed8; }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    @media (max-width: 540px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .col-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
    }

    .col-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: 100%;
    }

    .col-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
    }

    .pill {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      background: #e2e8f0;
      color: #334155;
    }
    .pill.highlight {
      background: #fef3c7;
      color: #b45309;
    }

    .svg-container {
      width: 100%;
      height: 120px;
      position: relative;
    }

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

    /* SVG Smooth Transitions */
    .rod, .beam, .force-arrow, .force-label {
      transition: all 0.4s ease;
    }

    /* Tension State */
    .state-rest .tension-rod { x: 55px; width: 90px; y: 53px; height: 20px; }
    .state-deformed .tension-rod { x: 35px; width: 130px; y: 56px; height: 14px; }
    .state-rest .arrow-tension-left { transform: translate(25px, 0); opacity: 0.3; }
    .state-deformed .arrow-tension-left { transform: translate(0, 0); opacity: 1; }
    .state-rest .arrow-tension-right { transform: translate(-25px, 0); opacity: 0.3; }
    .state-deformed .arrow-tension-right { transform: translate(0, 0); opacity: 1; }

    /* Compression State */
    .state-rest .comp-rod { x: 55px; width: 90px; y: 53px; height: 20px; }
    .state-deformed .comp-rod { x: 72px; width: 56px; y: 49px; height: 28px; }
    .state-rest .arrow-comp-left { transform: translate(-20px, 0); opacity: 0.3; }
    .state-deformed .arrow-comp-left { transform: translate(0, 0); opacity: 1; }
    .state-rest .arrow-comp-right { transform: translate(20px, 0); opacity: 0.3; }
    .state-deformed .arrow-comp-right { transform: translate(0, 0); opacity: 1; }

    /* Bending State */
    .state-rest .bend-beam { d: path("M 30 63 L 170 63"); stroke-width: 16; }
    .state-deformed .bend-beam { d: path("M 30 63 Q 100 95 170 63"); stroke-width: 14; }
    .state-rest .arrow-bend-down { transform: translate(0, -15px); opacity: 0.3; }
    .state-deformed .arrow-bend-down { transform: translate(0, 0); opacity: 1; }
    .state-rest .arrow-support { opacity: 0.4; }
    .state-deformed .arrow-support { opacity: 1; }
  </style>
</head>
<body class="state-deformed">

  <div class="top-bar">
    <span class="title">Forces for Deformation</span>
    <div class="controls">
      <div class="legend">
        <div class="legend-item">
          <span class="arrow-badge applied">F</span> Applied
        </div>
        <div class="legend-item">
          <span class="arrow-badge reaction">R</span> Reaction
        </div>
      </div>
      <button class="toggle-btn" id="toggleBtn" onclick="toggleState()">
        <span id="btnIcon">⏸</span> <span id="btnText">Forces Active</span>
      </button>
    </div>
  </div>

  <div class="grid">
    
    <div class="col-card">
      <div class="col-header">
        <div class="col-title">Tension (Stretching)</div>
        <span class="pill">≥ 2 Forces</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 200 125">
          <defs>
            <marker id="m-red-left" markerWidth="6" markerHeight="6" refX="2" refY="3" orient="auto">
              <path d="M 5 1 L 1 3 L 5 5 Z" fill="#ef4444" />
            </marker>
            <marker id="m-red-right" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
              <path d="M 1 1 L 5 3 L 1 5 Z" fill="#ef4444" />
            </marker>
            <marker id="m-red-down" markerWidth="6" markerHeight="6" refX="3" refY="4" orient="auto">
              <path d="M 1 1 L 3 5 L 5 1 Z" fill="#ef4444" />
            </marker>
            <marker id="m-green-up" markerWidth="6" markerHeight="6" refX="3" refY="2" orient="auto">
              <path d="M 1 5 L 3 1 L 5 5 Z" fill="#16a34a" />
            </marker>
          </defs>

          
          <rect x="55" y="53" width="90" height="20" rx="3" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 3"/>

          
          <rect class="rod tension-rod" x="35" y="56" width="130" height="14" rx="3" fill="#3b82f6"/>

          
          <g class="force-arrow arrow-tension-left">
            <line x1="33" y1="63" x2="10" y2="63" stroke="#ef4444" stroke-width="3" marker-end="url(#m-red-left)"/>
            <text x="18" y="52" fill="#ef4444" font-size="12" font-weight="700" text-anchor="middle">F</text>
          </g>
          <g class="force-arrow arrow-tension-right">
            <line x1="167" y1="63" x2="190" y2="63" stroke="#ef4444" stroke-width="3" marker-end="url(#m-red-right)"/>
            <text x="182" y="52" fill="#ef4444" font-size="12" font-weight="700" text-anchor="middle">F</text>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="col-card">
      <div class="col-header">
        <div class="col-title">Compression</div>
        <span class="pill">≥ 2 Forces</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 200 125">
          
          <rect x="55" y="53" width="90" height="20" rx="3" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 3"/>

          
          <rect class="rod comp-rod" x="72" y="49" width="56" height="28" rx="3" fill="#3b82f6"/>

          
          <g class="force-arrow arrow-comp-left">
            <line x1="42" y1="63" x2="68" y2="63" stroke="#ef4444" stroke-width="3" marker-end="url(#m-red-right)"/>
            <text x="52" y="52" fill="#ef4444" font-size="12" font-weight="700" text-anchor="middle">F</text>
          </g>
          <g class="force-arrow arrow-comp-right">
            <line x1="158" y1="63" x2="132" y2="63" stroke="#ef4444" stroke-width="3" marker-end="url(#m-red-left)"/>
            <text x="148" y="52" fill="#ef4444" font-size="12" font-weight="700" text-anchor="middle">F</text>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="col-card">
      <div class="col-header">
        <div class="col-title">Bending</div>
        <span class="pill highlight">≥ 3 Forces</span>
      </div>
      <div class="svg-container">
        <svg viewBox="0 0 200 125">
          
          <line x1="30" y1="63" x2="170" y2="63" stroke="#cbd5e1" stroke-width="16" stroke-linecap="round" stroke-dasharray="4 3"/>

          
          <polygon points="30,73 23,87 37,87" fill="#64748b"/>
          <polygon points="170,73 163,87 177,87" fill="#64748b"/>

          
          <path class="beam bend-beam" d="M 30 63 Q 100 95 170 63" fill="none" stroke="#3b82f6" stroke-width="14" stroke-linecap="round"/>

          
          <g class="force-arrow arrow-bend-down">
            <line x1="100" y1="20" x2="100" y2="65" stroke="#ef4444" stroke-width="3" marker-end="url(#m-red-down)"/>
            <text x="114" y="38" fill="#ef4444" font-size="12" font-weight="700" text-anchor="start">F</text>
          </g>

          
          <g class="force-arrow arrow-support">
            <line x1="30" y1="112" x2="30" y2="92" stroke="#16a34a" stroke-width="3" marker-end="url(#m-green-up)"/>
            <text x="30" y="122" fill="#16a34a" font-size="11" font-weight="700" text-anchor="middle">R₁</text>

            <line x1="170" y1="112" x2="170" y2="92" stroke="#16a34a" stroke-width="3" marker-end="url(#m-green-up)"/>
            <text x="170" y="122" fill="#16a34a" font-size="11" font-weight="700" text-anchor="middle">R₂</text>
          </g>
        </svg>
      </div>
    </div>
  </div>

  <script>
    let isDeformed = true;

    function toggleState() {
      isDeformed = !isDeformed;
      const body = document.body;
      const btnIcon = document.getElementById('btnIcon');
      const btnText = document.getElementById('btnText');

      if (isDeformed) {
        body.classList.remove('state-rest');
        body.classList.add('state-deformed');
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Forces Active';
      } else {
        body.classList.remove('state-deformed');
        body.classList.add('state-rest');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Rest State';
      }
    }
  </script>
</body>
</html>

Stretching, Bending, and Compressing: Why Multiple Forces Are Needed

<!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>Two Forces Needed to Stretch</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .stats-row {
      width: 100%;
      max-width: 580px;
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .metric-badge {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: center;
    }

    .metric-badge span {
      color: #0284c7;
      font-weight: 700;
    }

    .controls {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
    }

    .slider-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .slider-wrap label {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      white-space: nowrap;
    }

    input[type=range] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      cursor: grab;
    }

    input[type=range]::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      cursor: grab;
    }

    .anchor-hint {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .force-pull { fill: #0284c7; stroke: #0284c7; }
    .force-wall { fill: #d97706; stroke: #d97706; }
  </style>
</head>
<body>

  <div class="diagram-area">
    <svg viewBox="0 0 540 210" id="svgScene">
      <defs>
        
        <pattern id="hatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="10" stroke="#94a3b8" stroke-width="2" />
        </pattern>
        
        <marker id="arrowRight" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto">
          <polygon points="0 0, 7 3.5, 0 7" fill="#0284c7" />
        </marker>
        
        <marker id="arrowLeft" markerWidth="7" markerHeight="7" refX="1" refY="3.5" orient="auto">
          <polygon points="7 0, 0 3.5, 7 7" fill="#d97706" />
        </marker>
      </defs>

      
      <rect x="15" y="20" width="30" height="170" fill="url(#hatch)" />
      <line x1="45" y1="20" x2="45" y2="190" stroke="#475569" stroke-width="3.5" stroke-linecap="round" />

      
      <rect x="45" y="93" width="14" height="24" rx="2" fill="#64748b" />
      <circle cx="52" cy="105" r="3.5" fill="#ffffff" />

      
      <line id="refLine" x1="260" y1="35" x2="260" y2="175" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />
      <text x="260" y="30" text-anchor="middle" font-size="11" fill="#94a3b8" font-weight="600">Resting length</text>

      
      <g id="extGroup">
        <line id="extLine" x1="260" y1="165" x2="410" y2="165" stroke="#64748b" stroke-width="1.5" />
        <line id="extTickL" x1="260" y1="159" x2="260" y2="171" stroke="#64748b" stroke-width="1.5" />
        <line id="extTickR" x1="410" y1="159" x2="410" y2="171" stroke="#64748b" stroke-width="1.5" />
        <text id="extText" x="335" y="184" text-anchor="middle" font-size="12" font-weight="700" fill="#334155">Extension = 4.0 cm</text>
      </g>

      
      <path id="springPath" fill="none" stroke="#1e2945" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />

      
      <g id="handleGroup" transform="translate(410, 105)" style="cursor: grab;">
        <rect x="0" y="-12" width="12" height="24" rx="2" fill="#0284c7" />
        <path d="M 12 0 L 28 0 M 28 -14 L 28 14" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
      </g>

      
      <g id="wallForceGroup">
        <line id="wallArrow" x1="45" y1="70" x2="0" y2="70" stroke="#d97706" stroke-width="3.5" marker-end="url(#arrowLeft)" stroke-linecap="round" />
        <text id="wallForceLabel" x="5" y="60" font-size="12" font-weight="700" fill="#d97706">F_wall = 8 N</text>
      </g>

      
      <g id="pullForceGroup">
        <line id="pullArrow" x1="440" y1="105" x2="520" y2="105" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arrowRight)" stroke-linecap="round" />
        <text id="pullForceLabel" x="480" y="93" text-anchor="middle" font-size="12" font-weight="700" fill="#0284c7">F_pull = 8 N</text>
      </g>
    </svg>
  </div>

  <div class="stats-row">
    <div class="metric-badge">
      Net Force: <span id="netForceMath">8 N − 8 N = 0 N</span> (Stationary)
    </div>
    <div class="metric-badge">
      Rigid Wall: <span style="color:#d97706;">Equal Reaction Force</span>
    </div>
  </div>

  <div class="controls">
    <div class="slider-wrap">
      <label for="forceSlider">Applied Force (F_pull):</label>
      <input type="range" id="forceSlider" min="0" max="10" step="0.5" value="8">
      <span id="sliderVal" style="font-size:13px; font-weight:700; width:34px; color:#0284c7;">8 N</span>
    </div>
    <div class="anchor-hint">
      🔒 Wall anchor provides the essential 2nd force to stretch, not drift.
    </div>
  </div>

  <script>
    const slider = document.getElementById('forceSlider');
    const sliderVal = document.getElementById('sliderVal');
    const springPath = document.getElementById('springPath');
    const handleGroup = document.getElementById('handleGroup');
    const refLine = document.getElementById('refLine');
    const extLine = document.getElementById('extLine');
    const extTickR = document.getElementById('extTickR');
    const extText = document.getElementById('extText');
    const extGroup = document.getElementById('extGroup');
    const pullArrow = document.getElementById('pullArrow');
    const pullForceLabel = document.getElementById('pullForceLabel');
    const wallArrow = document.getElementById('wallArrow');
    const wallForceLabel = document.getElementById('wallForceLabel');
    const netForceMath = document.getElementById('netForceMath');

    // Physics constants
    // k = 2 N/cm -> 8 N gives 4 cm extension
    const restX = 260; // resting handle position (px)
    const anchorX = 59;
    const yCenter = 105;
    const pxPerCm = 37.5; // 4 cm = 150 px (from 260 to 410 at 8 N)
    const k = 2; // N per cm

    function drawSpring(startX, endX, centerY, coils = 11) {
      const straightEnd = 16;
      const x1 = startX + straightEnd;
      const x2 = endX - straightEnd;
      const span = x2 - x1;
      const step = span / (coils * 2);
      const amp = 16;

      let d = `M ${startX} ${centerY} L ${x1} ${centerY}`;
      for (let i = 1; i <= coils * 2; i++) {
        const cx = x1 + (i - 0.5) * step;
        const cy = centerY + (i % 2 === 1 ? -amp : amp);
        const nx = x1 + i * step;
        const ny = (i === coils * 2) ? centerY : (i % 2 === 1 ? amp : -amp) * 0.0;
        d += ` Q ${cx} ${cy} ${nx} ${(i === coils * 2) ? centerY : centerY}`;
      }
      d += ` L ${endX} ${centerY}`;
      return d;
    }

    function update(force) {
      sliderVal.textContent = force.toFixed(1) + ' N';
      const extCm = force / k;
      const currentX = restX + (extCm * pxPerCm);

      // 1. Spring
      springPath.setAttribute('d', drawSpring(anchorX, currentX, yCenter, 11));

      // 2. Handle
      handleGroup.setAttribute('transform', `translate(${currentX}, ${yCenter})`);

      // 3. Extension Marker
      if (force <= 0.2) {
        extGroup.style.opacity = '0';
      } else {
        extGroup.style.opacity = '1';
        extLine.setAttribute('x1', restX);
        extLine.setAttribute('x2', currentX);
        extTickR.setAttribute('x1', currentX);
        extTickR.setAttribute('x2', currentX);
        const midX = (restX + currentX) / 2;
        extText.setAttribute('x', midX);
        extText.textContent = `Extension = ${extCm.toFixed(1)} cm`;
      }

      // 4. User Pull Force Arrow
      const arrowLen = force * 9; // scale arrow length
      const pullStart = currentX + 30;
      const pullEnd = pullStart + arrowLen;
      
      if (force < 0.2) {
        pullArrow.style.display = 'none';
        pullForceLabel.style.display = 'none';
        wallArrow.style.display = 'none';
        wallForceLabel.style.display = 'none';
      } else {
        pullArrow.style.display = '';
        pullForceLabel.style.display = '';
        wallArrow.style.display = '';
        wallForceLabel.style.display = '';

        pullArrow.setAttribute('x1', pullStart);
        pullArrow.setAttribute('x2', pullEnd);
        pullForceLabel.setAttribute('x', (pullStart + pullEnd) / 2);
        pullForceLabel.textContent = `F_pull = ${force.toFixed(0)} N`;

        // 5. Wall Reaction Force Arrow (Leftward)
        const wallStart = 45;
        const wallEnd = Math.max(5, wallStart - arrowLen);
        wallArrow.setAttribute('x1', wallStart);
        wallArrow.setAttribute('x2', wallEnd);
        wallForceLabel.setAttribute('x', Math.min(wallEnd - 2, 10));
        wallForceLabel.textContent = `F_wall = ${force.toFixed(0)} N`;
      }

      // 6. Net force math badge
      netForceMath.textContent = `${force.toFixed(0)} N − ${force.toFixed(0)} N = 0 N`;
    }

    slider.addEventListener('input', (e) => {
      update(parseFloat(e.target.value));
    });

    // Initialize at 8 N
    update(8);
  </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>Forces: Motion vs Deformation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

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

    .btn {
      background: #ffffff;
      color: #1e2945;
      border: 1.5px solid #d0d7de;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
    }

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

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    .panel-header {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      background: #e0f2fe;
      color: #0284c7;
    }

    .stage {
      flex: 1;
      position: relative;
      min-height: 140px;
      background: #f1f5f9;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .floor {
      position: absolute;
      bottom: 22px;
      left: 0;
      right: 0;
      height: 2px;
      background: #cbd5e1;
    }

    /* Sponge Styling */
    .sponge {
      width: 72px;
      height: 56px;
      background: #22b7ff;
      border-radius: 6px;
      position: absolute;
      bottom: 24px;
      box-shadow: inset -2px -2px 0 rgba(0,0,0,0.12), inset 2px 2px 0 rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 4px;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), width 0.6s cubic-bezier(0.25, 1, 0.5, 1), height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .sponge-pores {
      width: 100%;
      height: 100%;
      background-image: radial-gradient(rgba(255,255,255,0.45) 20%, transparent 25%),
                        radial-gradient(rgba(0,50,120,0.2) 20%, transparent 25%);
      background-size: 12px 12px;
      background-position: 0 0, 6px 6px;
      border-radius: 4px;
    }

    /* Hands & Force Vectors */
    .force-group {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 2px;
      bottom: 34px;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
      pointer-events: none;
      z-index: 10;
    }

    .force-group.left {
      left: 10px;
    }

    .force-group.right {
      right: 10px;
      flex-direction: row-reverse;
    }

    .hand {
      font-size: 24px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .arrow-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
    }

    .arrow-svg {
      width: 32px;
      height: 14px;
    }

    /* Accel Vector */
    .accel-vector {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #10b981;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .status-bar {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
    }

    .status-tag {
      color: #64748b;
    }

    .status-val {
      font-weight: 700;
      color: #1e2945;
    }

    /* State Applied Animations */
    .applied #sponge1 {
      transform: translateX(45px);
    }
    .applied #forceL1 {
      transform: translateX(45px);
    }
    .applied #accel1 {
      opacity: 1;
    }

    .applied #sponge2 {
      width: 42px;
      height: 64px;
      bottom: 24px;
    }
    .applied #forceL2 {
      transform: translateX(20px);
    }
    .applied #forceR2 {
      transform: translateX(-20px);
    }
  </style>
</head>
<body>

  <div class="controls">
    <button id="toggleBtn" class="btn active">
      <span id="btnIcon">⏸</span> <span id="btnText">Pause</span>
    </button>
    <button id="stepBtn" class="btn">
      <span>🔄</span> <span>Switch State</span>
    </button>
  </div>

  <div class="grid" id="mainGrid">
    
    
    <div class="panel">
      <div class="panel-header">
        <span>Single Force</span>
        <span class="badge">Motion</span>
      </div>

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

        <div class="accel-vector" id="accel1">
          <span>Accelerates</span>
          <svg width="24" height="12" viewBox="0 0 24 12">
            <path d="M0 6h20M15 1l5 5-5 5" stroke="#10b981" stroke-width="2" fill="none" stroke-linecap="round"/>
          </svg>
        </div>

        <div class="force-group left" id="forceL1">
          <span class="hand">🫱</span>
          <div class="arrow-box">
            <span>10 N</span>
            <svg class="arrow-svg" viewBox="0 0 32 14">
              <path d="M2 7h24M20 2l6 5-6 5" stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round"/>
            </svg>
          </div>
        </div>

        <div class="sponge" id="sponge1" style="left: calc(50% - 36px);">
          <div class="sponge-pores"></div>
        </div>
      </div>

      <div class="status-bar">
        <span class="status-tag">Net Force: <strong class="status-val">10 N</strong></span>
        <span class="status-tag">Shape: <strong class="status-val">Unchanged</strong></span>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>Opposing Forces</span>
        <span class="badge" style="background:#fef3c7; color:#d97706;">Deformation</span>
      </div>

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

        <div class="force-group left" id="forceL2" style="left: 14px;">
          <span class="hand">🫱</span>
          <div class="arrow-box">
            <span>10 N</span>
            <svg class="arrow-svg" viewBox="0 0 32 14">
              <path d="M2 7h24M20 2l6 5-6 5" stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round"/>
            </svg>
          </div>
        </div>

        <div class="sponge" id="sponge2" style="left: calc(50% - 36px);">
          <div class="sponge-pores"></div>
        </div>

        <div class="force-group right" id="forceR2" style="right: 14px;">
          <span class="hand">🫲</span>
          <div class="arrow-box">
            <span>10 N</span>
            <svg class="arrow-svg" viewBox="0 0 32 14">
              <path d="M30 7H6M12 2L6 7l6 5" stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="status-bar">
        <span class="status-tag">Net Force: <strong class="status-val">0 N</strong></span>
        <span class="status-tag">Shape: <strong class="status-val">Compressed</strong></span>
      </div>
    </div>

  </div>

  <script>
    const grid = document.getElementById('mainGrid');
    const toggleBtn = document.getElementById('toggleBtn');
    const stepBtn = document.getElementById('stepBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');

    let isApplied = false;
    let isPlaying = true;
    let timer = null;

    function applyState(applied) {
      isApplied = applied;
      if (isApplied) {
        grid.classList.add('applied');
      } else {
        grid.classList.remove('applied');
      }
    }

    function toggleState() {
      applyState(!isApplied);
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        toggleState();
      }, 2400);
    }

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

    toggleBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        toggleBtn.classList.add('active');
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Pause';
        startLoop();
      } else {
        toggleBtn.classList.remove('active');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Play';
        stopLoop();
      }
    });

    stepBtn.addEventListener('click', () => {
      if (isPlaying) {
        isPlaying = false;
        toggleBtn.classList.remove('active');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Play';
        stopLoop();
      }
      toggleState();
    });

    // Initial state start
    startLoop();
    // Start after slight delay
    setTimeout(() => applyState(true), 400);
  </script>
</body>
</html>

UK-GCSE-SCIENCE-PHYS-FOR-01-04

Aligned learning resources

Related diagrams