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

A cold glass of water resting motionless on your desk might seem completely still, but inside it, trillions of water molecules are violently vibrating, colliding, and pulling on one another.

This microscopic storm represents a hidden reservoir of energy stored inside every material, known as its **internal energy**.

**Internal energy** is defined as the total energy stored by all the particles (atoms and molecules) that make up a system.

It is the sum of two distinct stores: the **kinetic energy** of the moving particles and the **potential energy** stored in the forces between them.

<!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>Internal Energy Breakdown</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px;
      width: 100%;
      user-select: none;
    }

    /* Equation Top Bar */
    .equation-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      font-weight: 700;
      font-size: 15px;
      text-align: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .badge-total {
      background: #1e2945;
      color: #ffffff;
    }

    .badge-kinetic {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .badge-potential {
      background: #ede9fe;
      color: #5b21b6;
      border: 1px solid #ddd6fe;
    }

    .operator {
      color: #64748b;
      font-size: 16px;
    }

    /* Split Cards Container */
    .split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

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

    .store-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    .store-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .store-subtitle {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      text-align: center;
      margin-top: -4px;
    }

    /* Canvas / Visual Viewport */
    .canvas-container {
      width: 100%;
      height: 160px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #edf2f7;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Interactive Controls */
    .control-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 2px 4px;
    }

    .control-btn {
      flex: 1;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 4px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, border-color 0.2s;
    }

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

    /* Particle styling */
    .particle-kin {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 1.5;
    }

    .particle-pot {
      fill: #7c3aed;
      stroke: #ffffff;
      stroke-width: 1.5;
    }

    .spring-line {
      stroke: #a78bfa;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .trail-line {
      stroke: #38bdf8;
      stroke-linecap: round;
      opacity: 0.6;
    }
  </style>
</head>
<body>

  
  <div class="equation-card">
    <span class="badge badge-total">Internal Energy</span>
    <span class="operator">=</span>
    <span class="badge badge-kinetic">Kinetic Store</span>
    <span class="operator">+</span>
    <span class="badge badge-potential">Potential Store</span>
  </div>

  
  <div class="split-grid">
    
    
    <div class="store-card">
      <div class="store-title">Kinetic Store (Motion)</div>
      <div class="store-subtitle">Linked to Temperature</div>
      
      <div class="canvas-container">
        <svg id="kineticSvg" viewBox="0 0 220 160"></svg>
      </div>

      <div class="control-row">
        <button class="control-btn active" id="btnLowTemp">Cool</button>
        <button class="control-btn" id="btnHighTemp">Hot</button>
      </div>
    </div>

    
    <div class="store-card">
      <div class="store-title">Potential Store (Bonds)</div>
      <div class="store-subtitle">Linked to Particle Separation</div>
      
      <div class="canvas-container">
        <svg id="potentialSvg" viewBox="0 0 220 160">
          <g id="springsGroup"></g>
          <g id="potParticlesGroup"></g>
        </svg>
      </div>

      <div class="control-row">
        <button class="control-btn active" id="btnCloseSep">Close</button>
        <button class="control-btn" id="btnFarSep">Separated</button>
      </div>
    </div>

  </div>

  <script>
    // --- Kinetic Particles Simulation ---
    const kinSvg = document.getElementById('kineticSvg');
    let speedMult = 1.0;

    const numParticles = 8;
    const particles = [];
    const bounds = { x: 14, y: 14, w: 192, h: 132 };

    for (let i = 0; i < numParticles; i++) {
      const x = 30 + (i % 4) * 45 + (Math.random() * 10 - 5);
      const y = 35 + Math.floor(i / 4) * 70 + (Math.random() * 10 - 5);
      const angle = Math.random() * Math.PI * 2;
      const baseSpeed = 1.2 + Math.random() * 0.8;
      
      particles.push({
        x: x,
        y: y,
        vx: Math.cos(angle) * baseSpeed,
        vy: Math.sin(angle) * baseSpeed,
        trailX: x,
        trailY: y,
        radius: 8.5
      });
    }

    // Create SVG elements
    particles.forEach((p, idx) => {
      const trail = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      trail.setAttribute('id', 'trail_' + idx);
      trail.setAttribute('class', 'trail-line');
      trail.setAttribute('stroke-width', '2.5');
      kinSvg.appendChild(trail);

      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('id', 'p_' + idx);
      circle.setAttribute('class', 'particle-kin');
      circle.setAttribute('r', p.radius);
      circle.setAttribute('cx', p.x);
      circle.setAttribute('cy', p.y);
      kinSvg.appendChild(circle);
    });

    function updateKinetic() {
      particles.forEach((p, idx) => {
        p.trailX = p.x;
        p.trailY = p.y;

        p.x += p.vx * speedMult;
        p.y += p.vy * speedMult;

        if (p.x <= bounds.x) { p.x = bounds.x; p.vx *= -1; }
        if (p.x >= bounds.x + bounds.w) { p.x = bounds.x + bounds.w; p.vx *= -1; }
        if (p.y <= bounds.y) { p.y = bounds.y; p.vy *= -1; }
        if (p.y >= bounds.y + bounds.h) { p.y = bounds.y + bounds.h; p.vy *= -1; }

        const c = document.getElementById('p_' + idx);
        c.setAttribute('cx', p.x);
        c.setAttribute('cy', p.y);

        const t = document.getElementById('trail_' + idx);
        const trailLen = speedMult > 1.5 ? 2.5 : 1.2;
        t.setAttribute('x1', p.x - (p.vx * speedMult * trailLen));
        t.setAttribute('y1', p.y - (p.vy * speedMult * trailLen));
        t.setAttribute('x2', p.x);
        t.setAttribute('y2', p.y);
      });

      requestAnimationFrame(updateKinetic);
    }
    requestAnimationFrame(updateKinetic);

    // Kinetic Controls
    const btnLowTemp = document.getElementById('btnLowTemp');
    const btnHighTemp = document.getElementById('btnHighTemp');

    btnLowTemp.addEventListener('click', () => {
      speedMult = 0.8;
      btnLowTemp.classList.add('active');
      btnHighTemp.classList.remove('active');
    });

    btnHighTemp.addEventListener('click', () => {
      speedMult = 2.8;
      btnHighTemp.classList.add('active');
      btnLowTemp.classList.remove('active');
    });

    // --- Potential Energy Spring Simulation ---
    const springsGroup = document.getElementById('springsGroup');
    const potParticlesGroup = document.getElementById('potParticlesGroup');

    let isSeparated = false;
    let animProgress = 0; // 0 (close) to 1 (separated)

    const baseNodes = [
      { id: 0, row: 0, col: 0 },
      { id: 1, row: 0, col: 1 },
      { id: 2, row: 1, col: 0 },
      { id: 3, row: 1, col: 1 }
    ];

    const springLinks = [
      [0, 1], [2, 3], [0, 2], [1, 3]
    ];

    function createSpringPath(x1, y1, x2, y2, coils = 7) {
      const dx = x2 - x1;
      const dy = y2 - y1;
      const dist = Math.sqrt(dx * dx + dy * dy);
      const nx = -dy / dist;
      const ny = dx / dist;

      let d = `M ${x1} ${y1}`;
      const amp = 6;
      for (let i = 1; i <= coils; i++) {
        const t = i / (coils + 1);
        const side = (i % 2 === 0 ? 1 : -1) * amp;
        const px = x1 + dx * t + nx * side;
        const py = y1 + dy * t + ny * side;
        d += ` L ${px} ${py}`;
      }
      d += ` L ${x2} ${y2}`;
      return d;
    }

    function renderPotential() {
      // Interpolate separation
      const targetProgress = isSeparated ? 1 : 0;
      animProgress += (targetProgress - animProgress) * 0.12;

      // Close positions vs Separated positions
      const cx = 110;
      const cy = 80;
      const spreadX = 35 + animProgress * 38; // 35 close, 73 far
      const spreadY = 28 + animProgress * 26; // 28 close, 54 far

      const positions = [
        { x: cx - spreadX, y: cy - spreadY },
        { x: cx + spreadX, y: cy - spreadY },
        { x: cx - spreadX, y: cy + spreadY },
        { x: cx + spreadX, y: cy + spreadY }
      ];

      // Draw Springs
      springsGroup.innerHTML = '';
      springLinks.forEach(([a, b]) => {
        const p1 = positions[a];
        const p2 = positions[b];
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('class', 'spring-line');
        path.setAttribute('d', createSpringPath(p1.x, p1.y, p2.x, p2.y));
        
        // Dynamic glow & color when stretched
        if (animProgress > 0.4) {
          path.style.stroke = '#8b5cf6';
          path.style.filter = `drop-shadow(0 0 ${animProgress * 4}px rgba(139, 92, 246, 0.7))`;
        } else {
          path.style.stroke = '#cbd5e1';
          path.style.filter = 'none';
        }

        springsGroup.appendChild(path);
      });

      // Draw Particles
      potParticlesGroup.innerHTML = '';
      positions.forEach((p) => {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('class', 'particle-pot');
        circle.setAttribute('cx', p.x);
        circle.setAttribute('cy', p.y);
        circle.setAttribute('r', 10);
        potParticlesGroup.appendChild(circle);
      });

      requestAnimationFrame(renderPotential);
    }
    requestAnimationFrame(renderPotential);

    // Potential Controls
    const btnCloseSep = document.getElementById('btnCloseSep');
    const btnFarSep = document.getElementById('btnFarSep');

    btnCloseSep.addEventListener('click', () => {
      isSeparated = false;
      btnCloseSep.classList.add('active');
      btnFarSep.classList.remove('active');
    });

    btnFarSep.addEventListener('click', () => {
      isSeparated = true;
      btnFarSep.classList.add('active');
      btnCloseSep.classList.remove('active');
    });
  </script>
</body>
</html>

In 1850, physicist Rudolf Clausius established this concept while developing thermodynamics, realizing that heat added to a gas transforms into the microscopic mechanical energy of its atoms.

So what determines how much kinetic energy versus potential energy a substance has at any given moment?

Every particle in a substance is in motion: vibrating in solids, sliding in liquids, or flying freely in gases.

**Temperature** is directly proportional to the **average kinetic energy** of the particles in a substance.

When you heat a substance and its temperature rises, the particles move faster, directly increasing the system's total kinetic energy store.

What happens if you keep adding heat, but the temperature suddenly stops rising?

Particles experience attractive **intermolecular forces** that pull them toward one another, behaving like tiny stretched elastic bands.

The **potential energy** of the particles depends on their positions relative to each other — the further apart particles are pulled against attractive forces, the greater their potential energy.

<!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>States of Matter and Potential Energy</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .states-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 620px;
  }

  .state-card {
    background: #f8f9fa;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    user-select: none;
  }

  .state-card.active {
    border-color: #22b7ff;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(34, 183, 255, 0.18);
  }

  .state-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .state-pe {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .state-card.active .state-pe {
    color: #0284c7;
  }

  .canvas-box {
    width: 100%;
    aspect-ratio: 1;
    max-height: 150px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    position: relative;
  }

  .canvas-box svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Energy Arrow Bar */
  .energy-axis {
    width: 100%;
    max-width: 620px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .arrow-container {
    width: 100%;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .arrow-line {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #94a3b8 0%, #38bdf8 50%, #22b7ff 100%);
    border-radius: 4px;
    position: relative;
  }

  .arrow-head {
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #22b7ff;
  }

  .arrow-label {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
    text-align: center;
  }

  .arrow-sub {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
  }

  /* Particle & Spring styling */
  .particle {
    fill: #22b7ff;
    stroke: #0284c7;
    stroke-width: 1.5;
  }

  .spring {
    stroke: #94a3b8;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .broken-bond {
    stroke: #cbd5e1;
    stroke-width: 1.2;
    stroke-dasharray: 2 2;
  }

  /* Gentle vibration animation */
  @keyframes solidVibe {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(0.6px, -0.6px); }
    50% { transform: translate(-0.6px, 0.4px); }
    75% { transform: translate(0.4px, 0.6px); }
  }

  .solid-mesh {
    animation: solidVibe 1.2s infinite ease-in-out;
    transform-origin: center;
  }

  @media (max-width: 420px) {
    .state-title { font-size: 13px; }
    .state-pe { font-size: 10px; }
    .arrow-label { font-size: 11px; }
    .arrow-sub { font-size: 10px; }
  }
</style>
</head>
<body>

<div class="states-grid">
  
  <div class="state-card active" id="card-solid" onclick="selectState(0)">
    <div class="state-title">Solid</div>
    <div class="state-pe">Low PE</div>
    <div class="canvas-box">
      <svg viewBox="0 0 120 120">
        <g class="solid-mesh">
          
          
          <path class="spring" d="M36,36 L54,36 M66,36 L84,36" />
          <path class="spring" d="M36,60 L54,60 M66,60 L84,60" />
          <path class="spring" d="M36,84 L54,84 M66,84 L84,84" />
          
          <path class="spring" d="M30,42 L30,54 M30,66 L30,78" />
          <path class="spring" d="M60,42 L60,54 M60,66 L60,78" />
          <path class="spring" d="M90,42 L90,54 M90,66 L90,78" />
          
          <circle class="particle" cx="30" cy="36" r="6" />
          <circle class="particle" cx="60" cy="36" r="6" />
          <circle class="particle" cx="90" cy="36" r="6" />
          <circle class="particle" cx="30" cy="60" r="6" />
          <circle class="particle" cx="60" cy="60" r="6" />
          <circle class="particle" cx="90" cy="60" r="6" />
          <circle class="particle" cx="30" cy="84" r="6" />
          <circle class="particle" cx="60" cy="84" r="6" />
          <circle class="particle" cx="90" cy="84" r="6" />
        </g>
      </svg>
    </div>
  </div>

  
  <div class="state-card" id="card-liquid" onclick="selectState(1)">
    <div class="state-title">Liquid</div>
    <div class="state-pe">Moderate PE</div>
    <div class="canvas-box">
      <svg viewBox="0 0 120 120">
        
        <path class="spring" d="M28,42 Q40,32 56,46" />
        <path class="spring" d="M56,46 Q76,38 92,40" />
        <path class="spring" d="M28,42 Q24,68 36,80" />
        <path class="spring" d="M56,46 Q64,68 62,86" />
        <path class="spring" d="M36,80 Q48,92 62,86" />
        <path class="spring" d="M62,86 Q78,92 90,76" />
        <path class="spring" d="M92,40 Q98,58 90,76" />
        
        <circle class="particle" cx="28" cy="42" r="6" />
        <circle class="particle" cx="56" cy="46" r="6" />
        <circle class="particle" cx="92" cy="40" r="6" />
        <circle class="particle" cx="36" cy="80" r="6" />
        <circle class="particle" cx="62" cy="86" r="6" />
        <circle class="particle" cx="90" cy="76" r="6" />
      </svg>
    </div>
  </div>

  
  <div class="state-card" id="card-gas" onclick="selectState(2)">
    <div class="state-title">Gas</div>
    <div class="state-pe">High PE</div>
    <div class="canvas-box">
      <svg viewBox="0 0 120 120">
        
        <line class="broken-bond" x1="24" y1="26" x2="40" y2="40" />
        <line class="broken-bond" x1="94" y1="32" x2="78" y2="44" />
        <line class="broken-bond" x1="42" y1="90" x2="58" y2="76" />
        
        <path d="M16,34 L22,28" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round" />
        <path d="M102,24 L96,30" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round" />
        <path d="M84,94 L76,86" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round" />
        <path d="M30,98 L36,92" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round" />
        
        <circle class="particle" cx="24" cy="26" r="6" />
        <circle class="particle" cx="94" cy="32" r="6" />
        <circle class="particle" cx="38" cy="90" r="6" />
        <circle class="particle" cx="80" cy="84" r="6" />
      </svg>
    </div>
  </div>
</div>


<div class="energy-axis">
  <div class="arrow-container">
    <div class="arrow-line">
      <div class="arrow-head"></div>
    </div>
  </div>
  <div class="arrow-label">Increasing Potential Energy →</div>
  <div class="arrow-sub">Work done against intermolecular forces</div>
</div>

<script>
  const cards = [
    document.getElementById('card-solid'),
    document.getElementById('card-liquid'),
    document.getElementById('card-gas')
  ];

  function selectState(index) {
    cards.forEach((c, i) => {
      if (i === index) {
        c.classList.add('active');
      } else {
        c.classList.remove('active');
      }
    });
  }
</script>
</body>
</html>

During a phase change (like melting or boiling), energy supplied to the system breaks or weakens intermolecular bonds instead of speeding particles up, increasing potential energy while temperature stays constant.

How can we track which energy store is changing in different real-world situations?

Consider two different heating processes applied to $1\,\text{kg}$ of water.

<!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, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

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

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

    .case-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.05);
    }

    .case-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 6px;
    }

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

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

    .stage-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      height: 120px;
    }

    .thermo-box {
      width: 42px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .thermo-stem {
      width: 10px;
      height: 70px;
      background: #e2e8f0;
      border-radius: 5px 5px 0 0;
      position: relative;
      overflow: hidden;
    }

    .thermo-fill {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #ef4444;
      border-radius: 0;
      transition: height 0.6s ease;
    }

    .thermo-bulb {
      width: 18px;
      height: 18px;
      background: #ef4444;
      border-radius: 50%;
      margin-top: -4px;
      z-index: 1;
    }

    .temp-val {
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 4px;
    }

    .particle-box {
      flex: 1;
      height: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .energy-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      font-size: 12px;
      padding-top: 4px;
    }

    .energy-pill {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 8px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .energy-pill.total {
      grid-column: 1 / -1;
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
      font-weight: 600;
    }

    .val-up {
      color: #dc2626;
      font-weight: 700;
    }

    .val-const {
      color: #64748b;
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="case-card">
      <div class="case-header">
        <span class="case-title">A: Warming Liquid</span>
        <span class="badge">20°C → 80°C</span>
      </div>
      
      <div class="stage-row">
        <div class="thermo-box">
          <div class="thermo-stem">
            <div class="thermo-fill" style="height: 75%;"></div>
          </div>
          <div class="thermo-bulb"></div>
          <span class="temp-val">Temp ↑</span>
        </div>
        <div class="particle-box">
          <canvas id="canvasA"></canvas>
        </div>
      </div>

      <div class="energy-summary">
        <div class="energy-pill">
          <span>Kinetic (Ek)</span>
          <span class="val-up">▲ Rising</span>
        </div>
        <div class="energy-pill">
          <span>Potential (Ep)</span>
          <span class="val-const">≈ Constant</span>
        </div>
        <div class="energy-pill total">
          <span>Total Internal Energy (U)</span>
          <span class="val-up">▲ Increases</span>
        </div>
      </div>
    </div>

    
    <div class="case-card">
      <div class="case-header">
        <span class="case-title">B: Boiling to Steam</span>
        <span class="badge">100°C (Constant)</span>
      </div>

      <div class="stage-row">
        <div class="thermo-box">
          <div class="thermo-stem">
            <div class="thermo-fill" style="height: 95%;"></div>
          </div>
          <div class="thermo-bulb"></div>
          <span class="temp-val">100°C</span>
        </div>
        <div class="particle-box">
          <canvas id="canvasB"></canvas>
        </div>
      </div>

      <div class="energy-summary">
        <div class="energy-pill">
          <span>Kinetic (Ek)</span>
          <span class="val-const">= Constant</span>
        </div>
        <div class="energy-pill">
          <span>Potential (Ep)</span>
          <span class="val-up">▲ Bonds Break</span>
        </div>
        <div class="energy-pill total">
          <span>Total Internal Energy (U)</span>
          <span class="val-up">▲ Increases</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function initCanvas(canvasId, isBoiling) {
      const canvas = document.getElementById(canvasId);
      const ctx = canvas.getContext('2d');
      let w = canvas.width = canvas.parentElement.clientWidth;
      let h = canvas.height = canvas.parentElement.clientHeight;

      const particles = [];
      const count = isBoiling ? 14 : 18;

      for (let i = 0; i < count; i++) {
        particles.push({
          x: Math.random() * (w - 16) + 8,
          y: isBoiling ? (h * 0.4 + Math.random() * (h * 0.55)) : (h * 0.3 + Math.random() * (h * 0.65)),
          vx: (Math.random() - 0.5) * (isBoiling ? 1.2 : 2.5),
          vy: (Math.random() - 0.5) * (isBoiling ? 1.2 : 2.5),
          r: 5,
          isGas: false
        });
      }

      function resize() {
        w = canvas.width = canvas.parentElement.clientWidth;
        h = canvas.height = canvas.parentElement.clientHeight;
      }
      window.addEventListener('resize', resize);

      function draw() {
        ctx.clearRect(0, 0, w, h);

        // State background hint
        if (isBoiling) {
          ctx.fillStyle = 'rgba(239, 68, 68, 0.05)';
          ctx.fillRect(0, 0, w, h * 0.35);
          ctx.fillStyle = '#94a3b8';
          ctx.font = '10px system-ui';
          ctx.fillText('Gas Phase (Separated)', 8, 14);
        }

        particles.forEach(p => {
          if (isBoiling) {
            // Some particles break away into gas
            if (!p.isGas && Math.random() < 0.005 && p.y < h * 0.6) {
              p.isGas = true;
            }

            if (p.isGas) {
              p.vy -= 0.04;
              p.vx += (Math.random() - 0.5) * 0.2;
              if (p.y < 8) {
                p.y = h * 0.85;
                p.isGas = false;
                p.vy = (Math.random() - 0.5) * 1.0;
              }
            } else {
              // Stay in liquid pool
              if (p.y < h * 0.45) p.vy += 0.1;
            }
          }

          p.x += p.vx;
          p.y += p.vy;

          // Bounds
          if (p.x < p.r) { p.x = p.r; p.vx *= -1; }
          if (p.x > w - p.r) { p.x = w - p.r; p.vx *= -1; }
          if (p.y < p.r) { p.y = p.r; p.vy *= -1; }
          if (p.y > h - p.r) { p.y = h - p.r; p.vy *= -1; }

          // Draw trails for speed in warming liquid
          if (!isBoiling) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.x - p.vx * 3, p.y - p.vy * 3);
            ctx.strokeStyle = 'rgba(2, 132, 199, 0.3)';
            ctx.lineWidth = 2;
            ctx.stroke();
          }

          // Draw Particle
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
          ctx.fillStyle = p.isGas ? '#f97316' : '#0284c7';
          ctx.fill();
        });

        requestAnimationFrame(draw);
      }

      draw();
    }

    initCanvas('canvasA', false);
    initCanvas('canvasB', true);
  </script>
</body>
</html>

A common misconception is that two objects at the exact same temperature must have the same internal energy per kilogram.

In reality, $1\,\text{kg}$ of steam at $100^\circ\text{C}$ stores substantially more **internal energy** than $1\,\text{kg}$ of liquid water at $100^\circ\text{C}$ because immense potential energy was added to completely separate the molecules.

science

Internal Energy: Kinetic and Potential Energy of Particles. Define internal energy as the total kinetic and potential energy stored by the particles within a system.

GCSE Physics: Internal Energy and Energy Stores

Energy of Moving Particles & Internal Energy (KS4 Physics)

States of Matter: Basics (Particle Motion, Heating, and Phase Transitions)

Teaching internal energy at GCSE requires bridging the microscopic particle world with macroscopic thermodynamic observations. Start by establishing internal energy as a dual-component store ($E_{\text{internal}} = E_k + E_p$). Use a two-column anchor chart contrasting temperature changes ($\Delta E_k$, specific heat capacity) with phase changes ($\Delta E_p$, latent heat). Interactive particle simulations (like PhET) provide strong visual scaffolding to prevent the persistent misconception that particles themselves heat up or expand.

Internal Energy: Kinetic and Potential Energy of Particles

What is Internal Energy?

The Kinetic Store