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 leave an ice pop on the sidewalk on a hot summer afternoon. When you come back five minutes later, your crunchy snack has turned into a sticky, colorful puddle!

Everything around you is made of tiny building blocks called **particles** that are far too small to see with your eyes.

In a solid like ice, these particles are packed close together in neat rows, locked in place and only vibrating slightly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solid Particle Model</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100vh;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .main-view {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      max-width: 440px;
    }

    .cube-container {
      position: relative;
      width: 240px;
      height: 240px;
      background: rgba(224, 242, 254, 0.45);
      border: 2.5px solid #38bdf8;
      border-radius: 16px;
      box-shadow: inset 0 0 16px rgba(56, 189, 248, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ice-label {
      position: absolute;
      top: 10px;
      left: 12px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #1e2945;
      opacity: 1;
    }

    .particle-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 10px;
      width: 180px;
      height: 180px;
      align-items: center;
      justify-items: center;
    }

    .particle-wrapper {
      position: relative;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: filter 0.2s ease;
    }

    .particle-wrapper:hover {
      filter: brightness(1.15);
    }

    .vib-wave {
      position: absolute;
      inset: -4px;
      border: 1.5px dashed rgba(2, 132, 199, 0.45);
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.85;
    }

    .particle {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #60a5fa, #0284c7 70%, #0369a1);
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
      position: relative;
      z-index: 2;
    }

    /* Gentle, smooth vibration in place (all >= 350ms) */
    .vibrating .particle {
      animation: jiggle 0.48s infinite alternate ease-in-out;
    }

    .particle-wrapper:nth-child(2n) .particle { animation-duration: 0.42s; animation-delay: 0.05s; }
    .particle-wrapper:nth-child(3n) .particle { animation-duration: 0.56s; animation-delay: 0.12s; }
    .particle-wrapper:nth-child(5n) .particle { animation-duration: 0.45s; animation-delay: 0.04s; }
    .particle-wrapper:nth-child(7n) .particle { animation-duration: 0.52s; animation-delay: 0.08s; }

    @keyframes jiggle {
      0%   { transform: translate(-1.2px, -1px); }
      50%  { transform: translate(1px, 1.2px); }
      100% { transform: translate(-0.8px, 1px); }
    }

    /* Thermometer */
    .thermo-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 10px;
    }

    .thermo-graphic {
      width: 24px;
      height: 140px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stem {
      width: 10px;
      height: 110px;
      background: #f1f5f9;
      border: 2px solid #94a3b8;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      position: relative;
      overflow: hidden;
    }

    .mercury {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 25%;
      background: #0284c7;
      transition: height 0.4s ease;
    }

    .bulb {
      width: 22px;
      height: 22px;
      background: #0284c7;
      border: 2px solid #94a3b8;
      border-radius: 50%;
      margin-top: -6px;
      z-index: 2;
    }

    .scale-ticks {
      position: absolute;
      right: -8px;
      top: 10px;
      bottom: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .tick {
      width: 5px;
      height: 1.5px;
      background: #94a3b8;
    }

    .temp-tag {
      font-size: 12px;
      font-weight: 700;
      color: #0b5394;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .caption {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 20px;
      border: 1px solid #e6e6e6;
      max-width: 90%;
    }

    @media (max-width: 360px) {
      .main-view {
        gap: 12px;
      }
      .cube-container {
        width: 210px;
        height: 210px;
      }
      .particle-grid {
        width: 160px;
        height: 160px;
        gap: 6px;
      }
      .caption {
        font-size: 13px;
        padding: 6px 12px;
      }
    }
  </style>
</head>
<body>

  <div class="main-view">
    
    <div class="cube-container">
      <span class="ice-label">Ice (Solid)</span>
      <div class="particle-grid vibrating" id="grid">
        
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>

        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>

        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>

        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
        <div class="particle-wrapper"><div class="vib-wave"></div><div class="particle"></div></div>
      </div>
    </div>

    
    <div class="thermo-container">
      <div class="thermo-graphic">
        <div class="stem">
          <div class="mercury"></div>
        </div>
        <div class="bulb"></div>
        <div class="scale-ticks">
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
        </div>
      </div>
      <div class="temp-tag">Cold</div>
    </div>
  </div>

  <div class="caption">
    Solid: Particles are locked in place and vibrate.
  </div>

  <script>
    // Interactive: tap any particle to cause a pulse feedback effect
    const wrappers = document.querySelectorAll('.particle-wrapper');
    wrappers.forEach((el) => {
      el.addEventListener('click', () => {
        const particle = el.querySelector('.particle');
        if (particle) {
          particle.style.filter = 'brightness(1.4)';
          setTimeout(() => {
            particle.style.filter = '';
          }, 300);
        }
      });
    });
  </script>
</body>
</html>

What happens inside the solid when the sun starts beating down on it?

Heat provides **thermal energy**, which is the energy of moving particles. As heat flows into the solid, the particles absorb this energy and shake faster and faster.

**Melting** is the change of state from a solid to a liquid when particles gain enough energy to break free from their locked positions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      height: 100%;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      user-select: none;
    }

    /* Toggle controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      margin-bottom: 8px;
    }

    .btn-toggle {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

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

    /* Canvas Stage */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 620px;
      flex: 1;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button id="btnSolid" class="btn-toggle active">❄️ Solid (Locked)</button>
    <button id="btnBoth" class="btn-toggle">🔥 Melting</button>
    <button id="btnLiquid" class="btn-toggle">💧 Liquid (Flowing)</button>
  </div>

  <div class="stage-container" id="stage">
    <canvas id="simCanvas"></canvas>
  </div>

  <script>
    const canvas = document.getElementById('simCanvas');
    const ctx = canvas.getContext('2d');
    const stage = document.getElementById('stage');

    const btnSolid = document.getElementById('btnSolid');
    const btnBoth = document.getElementById('btnBoth');
    const btnLiquid = document.getElementById('btnLiquid');

    let mode = 'both'; // 'solid' | 'both' | 'liquid'
    setMode('both');

    function setMode(newMode) {
      mode = newMode;
      btnSolid.classList.toggle('active', mode === 'solid');
      btnBoth.classList.toggle('active', mode === 'both');
      btnLiquid.classList.toggle('active', mode === 'liquid');
    }

    btnSolid.onclick = () => setMode('solid');
    btnBoth.onclick = () => setMode('both');
    btnLiquid.onclick = () => setMode('liquid');

    // Liquid particles state
    const NUM_LIQUID = 16;
    const liquidParticles = [];
    for (let i = 0; i < NUM_LIQUID; i++) {
      liquidParticles.push({
        x: 0, y: 0,
        vx: (Math.random() - 0.5) * 1.5,
        vy: (Math.random() - 0.5) * 1.5,
        radius: 11
      });
    }
    let liquidInit = false;

    function resize() {
      const rect = stage.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      ctx.scale(dpr, dpr);
    }

    window.addEventListener('resize', resize);
    new ResizeObserver(resize).observe(stage);
    resize();

    let time = 0;

    function draw(timestamp) {
      time = timestamp * 0.003;
      const rect = stage.getBoundingClientRect();
      const W = rect.width;
      const H = rect.height;

      ctx.clearRect(0, 0, W, H);

      const isMobile = W < 460;
      const panelMargin = 12;
      const headerH = 26;

      let p1 = { x: 0, y: 0, w: 0, h: 0 };
      let p2 = { x: 0, y: 0, w: 0, h: 0 };
      let arrowPos = { x: 0, y: 0, dir: 'horiz' };

      if (mode === 'solid') {
        p1 = { x: panelMargin, y: panelMargin, w: W - panelMargin * 2, h: H - panelMargin * 2 };
      } else if (mode === 'liquid') {
        p2 = { x: panelMargin, y: panelMargin, w: W - panelMargin * 2, h: H - panelMargin * 2 };
      } else {
        // Both panels
        if (isMobile) {
          const pH = (H - 50) / 2;
          p1 = { x: panelMargin, y: 6, w: W - panelMargin * 2, h: pH };
          p2 = { x: panelMargin, y: pH + 44, w: W - panelMargin * 2, h: pH };
          arrowPos = { x: W / 2, y: pH + 22, dir: 'vert' };
        } else {
          const arrowW = 60;
          const pW = (W - panelMargin * 2 - arrowW) / 2;
          p1 = { x: panelMargin, y: panelMargin, w: pW, h: H - panelMargin * 2 };
          p2 = { x: panelMargin + pW + arrowW, y: panelMargin, w: pW, h: H - panelMargin * 2 };
          arrowPos = { x: panelMargin + pW + arrowW / 2, y: H / 2, dir: 'horiz' };
        }
      }

      // Draw Solid Panel
      if (mode === 'solid' || mode === 'both') {
        drawSolidPanel(p1.x, p1.y, p1.w, p1.h, headerH);
      }

      // Draw Arrow
      if (mode === 'both') {
        drawHeatArrow(arrowPos.x, arrowPos.y, arrowPos.dir);
      }

      // Draw Liquid Panel
      if (mode === 'liquid' || mode === 'both') {
        drawLiquidPanel(p2.x, p2.y, p2.w, p2.h, headerH);
      }

      requestAnimationFrame(draw);
    }

    function drawSolidPanel(x, y, w, h, headerH) {
      // Panel Box
      ctx.fillStyle = '#ffffff';
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.roundRect(x, y, w, h, 14);
      ctx.fill();
      ctx.stroke();

      // Title
      ctx.fillStyle = '#1e2945';
      ctx.font = 'bold 15px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('Solid (Ice)', x + w / 2, y + 24);

      // Ice Cube Container Outline
      const boxSize = Math.min(w * 0.72, h - headerH - 32, 170);
      const bx = x + (w - boxSize) / 2;
      const by = y + headerH + 12 + (h - headerH - 24 - boxSize) / 2;

      ctx.fillStyle = 'rgba(224, 242, 254, 0.45)';
      ctx.strokeStyle = '#7dd3fc';
      ctx.lineWidth = 2;
      ctx.setLineDash([4, 4]);
      ctx.beginPath();
      ctx.roundRect(bx, by, boxSize, boxSize, 12);
      ctx.fill();
      ctx.stroke();
      ctx.setLineDash([]);

      // 4x4 Particle Grid
      const rows = 4;
      const cols = 4;
      const pr = Math.max(7, Math.min(11, boxSize / 14));
      const stepX = boxSize / (cols + 1);
      const stepY = boxSize / (rows + 1);

      for (let r = 1; r <= rows; r++) {
        for (let c = 1; c <= cols; c++) {
          const baseX = bx + c * stepX;
          const baseY = by + r * stepY;

          // Slow subtle rigid vibration
          const vibAmp = 1.4;
          const px = baseX + Math.sin(time * 6 + r * 1.5 + c) * vibAmp;
          const py = baseY + Math.cos(time * 6 + c * 1.5 + r) * vibAmp;

          // Lattice connector lines
          if (c < cols) {
            const nextX = bx + (c + 1) * stepX + Math.sin(time * 6 + r * 1.5 + (c + 1)) * vibAmp;
            const nextY = baseY + Math.cos(time * 6 + (c + 1) * 1.5 + r) * vibAmp;
            ctx.strokeStyle = '#bae6fd';
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.moveTo(px, py);
            ctx.lineTo(nextX, nextY);
            ctx.stroke();
          }
          if (r < rows) {
            const nextX = baseX + Math.sin(time * 6 + (r + 1) * 1.5 + c) * vibAmp;
            const nextY = by + (r + 1) * stepY + Math.cos(time * 6 + c * 1.5 + (r + 1)) * vibAmp;
            ctx.strokeStyle = '#bae6fd';
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.moveTo(px, py);
            ctx.lineTo(nextX, nextY);
            ctx.stroke();
          }

          // Particle
          drawParticle(px, py, pr, '#38bdf8', '#0284c7');
        }
      }
    }

    function drawLiquidPanel(x, y, w, h, headerH) {
      // Panel Box
      ctx.fillStyle = '#ffffff';
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.roundRect(x, y, w, h, 14);
      ctx.fill();
      ctx.stroke();

      // Title
      ctx.fillStyle = '#1e2945';
      ctx.font = 'bold 15px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('Liquid (Water)', x + w / 2, y + 24);

      // Puddle Boundary
      const puddleW = Math.min(w * 0.85, 220);
      const puddleH = Math.min(h - headerH - 30, 140);
      const px = x + (w - puddleW) / 2;
      const py = y + headerH + 12 + (h - headerH - 24 - puddleH) / 2;

      ctx.fillStyle = 'rgba(186, 230, 253, 0.4)';
      ctx.strokeStyle = '#0284c7';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.ellipse(px + puddleW / 2, py + puddleH / 2, puddleW / 2, puddleH / 2, 0, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();

      // Initialize liquid particles inside puddle if needed
      const pr = Math.max(7, Math.min(11, puddleH / 11));
      const cx = px + puddleW / 2;
      const cy = py + puddleH / 2;
      const rx = puddleW / 2 - pr - 4;
      const ry = puddleH / 2 - pr - 4;

      if (!liquidInit) {
        liquidParticles.forEach((p, idx) => {
          const angle = (idx / NUM_LIQUID) * Math.PI * 2;
          const dist = Math.random() * 0.6 + 0.1;
          p.x = cx + Math.cos(angle) * (rx * dist);
          p.y = cy + Math.sin(angle) * (ry * dist);
          p.radius = pr;
        });
        liquidInit = true;
      }

      // Update & render flowing particles
      liquidParticles.forEach(p => {
        p.radius = pr;
        p.x += p.vx * 0.7;
        p.y += p.vy * 0.7;

        // Ellipse boundary collision
        const dx = p.x - cx;
        const dy = p.y - cy;
        const normDist = (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry);

        if (normDist >= 1) {
          // Push back and reflect velocity
          const angle = Math.atan2(dy * (rx / ry), dx);
          p.x = cx + Math.cos(angle) * rx * 0.95;
          p.y = cy + Math.sin(angle) * ry * 0.95;
          p.vx = -p.vx + (Math.random() - 0.5) * 0.5;
          p.vy = -p.vy + (Math.random() - 0.5) * 0.5;
        }

        // Slight random drift (flowing / sliding past one another)
        p.vx += (Math.random() - 0.5) * 0.08;
        p.vy += (Math.random() - 0.5) * 0.08;
        const speed = Math.hypot(p.vx, p.vy);
        if (speed > 1.2) {
          p.vx = (p.vx / speed) * 1.2;
          p.vy = (p.vy / speed) * 1.2;
        }

        drawParticle(p.x, p.y, p.radius, '#0284c7', '#0369a1');
      });
    }

    function drawParticle(x, y, r, fillColor, strokeColor) {
      ctx.fillStyle = fillColor;
      ctx.strokeStyle = strokeColor;
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fill();
      ctx.stroke();

      // Highlight shine
      ctx.fillStyle = 'rgba(255, 255, 255, 0.65)';
      ctx.beginPath();
      ctx.arc(x - r * 0.3, y - r * 0.3, r * 0.32, 0, Math.PI * 2);
      ctx.fill();
    }

    function drawHeatArrow(cx, cy, dir) {
      ctx.fillStyle = '#f97316';
      ctx.strokeStyle = '#ea580c';
      ctx.font = 'bold 12px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      if (dir === 'horiz') {
        // Text above
        ctx.fillText('+ Heat', cx, cy - 14);

        // Arrow line + head
        ctx.lineWidth = 4;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(cx - 16, cy + 4);
        ctx.lineTo(cx + 14, cy + 4);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(cx + 16, cy + 4);
        ctx.lineTo(cx + 6, cy - 2);
        ctx.lineTo(cx + 6, cy + 10);
        ctx.closePath();
        ctx.fill();
      } else {
        // Vertical arrow for mobile
        ctx.fillText('+ Heat', cx - 36, cy);

        ctx.lineWidth = 4;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(cx + 10, cy - 10);
        ctx.lineTo(cx + 10, cy + 8);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(cx + 10, cy + 12);
        ctx.lineTo(cx + 4, cy + 2);
        ctx.lineTo(cx + 16, cy + 2);
        ctx.closePath();
        ctx.fill();
      }
    }

    requestAnimationFrame(draw);
  </script>
</body>
</html>

Does an ice cube melt at the same temperature as a chocolate bar or a piece of metal?

The exact temperature where a solid turns into a liquid is called its **melting point**. Scientists measure temperature in units called **degrees Celsius** ($^\circ\text{C}$).

Pure ice melts at exactly $0^\circ\text{C}$ ($32^\circ\text{F}$), while a chocolate bar starts melting around $30^\circ\text{C}$—which is why it melts quickly in your warm hands!

<!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>Melting Points Comparison</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .diagram-area {
      width: 100%;
      max-width: 500px;
      height: 380px;
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
    }

    /* Thermometer Assembly */
    .thermometer-col {
      width: 76px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .stem {
      width: 22px;
      height: calc(100% - 48px);
      background: #e2e8f0;
      border-radius: 12px 12px 0 0;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
      border: 2px solid #cbd5e1;
      border-bottom: none;
    }

    .mercury {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 12%;
      background: linear-gradient(to top, #3b82f6, #f97316, #ef4444);
      transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 0;
    }

    .bulb {
      width: 48px;
      height: 48px;
      background: #3b82f6;
      border-radius: 50%;
      border: 3px solid #cbd5e1;
      margin-top: -8px;
      z-index: 2;
      box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
    }

    /* Scale ticks along the thermometer */
    .ticks {
      position: absolute;
      right: -8px;
      top: 14px;
      height: calc(100% - 66px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none;
    }

    .tick {
      width: 8px;
      height: 2px;
      background: #94a3b8;
    }

    /* Markers & Cards List */
    .items-col {
      flex: 1;
      height: calc(100% - 48px);
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      position: relative;
    }

    .item-row {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
    }

    .item-row:hover {
      border-color: #94a3b8;
    }

    .item-row.active {
      border-color: var(--theme-color);
      box-shadow: 0 4px 14px var(--theme-glow);
      background: #fff;
    }

    .item-icon {
      font-size: 24px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
    }

    .item-info {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    .item-name {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .item-state {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    .temp-badge {
      font-size: 13px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 8px;
      color: #ffffff;
      background: var(--theme-color);
      white-space: nowrap;
      letter-spacing: -0.2px;
    }

    /* Heat indicator bar helper text */
    .heat-label {
      position: absolute;
      top: -24px;
      left: 0;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #ef4444;
    }

    .cool-label {
      position: absolute;
      bottom: 44px;
      left: 0;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="thermometer-col">
      <span class="heat-label">Hot</span>
      <div class="stem">
        <div class="mercury" id="mercury"></div>
      </div>
      <div class="bulb">🌡️</div>
      <span class="cool-label">Cold</span>
      <div class="ticks">
        <div class="tick"></div>
        <div class="tick"></div>
        <div class="tick"></div>
        <div class="tick"></div>
      </div>
    </div>

    
    <div class="items-col">
      
      <div class="item-row active" style="--theme-color: #0284c7; --theme-glow: rgba(2,132,199,0.18);" data-level="12%">
        <div class="item-icon">🧊</div>
        <div class="item-info">
          <span class="item-name">Ice</span>
          <span class="item-state">Solid ➔ Liquid</span>
        </div>
        <div class="temp-badge">0°C</div>
      </div>

      
      <div class="item-row" style="--theme-color: #9a3412; --theme-glow: rgba(154,52,18,0.18);" data-level="38%">
        <div class="item-icon">🍫</div>
        <div class="item-info">
          <span class="item-name">Chocolate</span>
          <span class="item-state">Solid ➔ Liquid</span>
        </div>
        <div class="temp-badge">30°C</div>
      </div>

      
      <div class="item-row" style="--theme-color: #ea580c; --theme-glow: rgba(234,88,12,0.18);" data-level="62%">
        <div class="item-icon">🕯️</div>
        <div class="item-info">
          <span class="item-name">Candle Wax</span>
          <span class="item-state">Solid ➔ Liquid</span>
        </div>
        <div class="temp-badge">60°C</div>
      </div>

      
      <div class="item-row" style="--theme-color: #ca8a04; --theme-glow: rgba(202,138,4,0.18);" data-level="96%">
        <div class="item-icon">🪙</div>
        <div class="item-info">
          <span class="item-name">Gold</span>
          <span class="item-state">Solid ➔ Liquid</span>
        </div>
        <div class="temp-badge">1,064°C</div>
      </div>
    </div>
  </div>

  <script>
    const rows = document.querySelectorAll('.item-row');
    const mercury = document.getElementById('mercury');
    let autoIndex = 0;
    let timer = null;

    function selectItem(index) {
      rows.forEach((r, i) => {
        r.classList.toggle('active', i === index);
      });
      mercury.style.height = rows[index].getAttribute('data-level');
      autoIndex = index;
    }

    rows.forEach((row, idx) => {
      row.addEventListener('click', () => {
        clearInterval(timer);
        selectItem(idx);
        startAutoPlay();
      });
    });

    function startAutoPlay() {
      timer = setInterval(() => {
        autoIndex = (autoIndex + 1) % rows.length;
        selectItem(autoIndex);
      }, 3500);
    }

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

When a solid turns into a runny puddle, did any of the stuff inside it disappear?

Melting changes the arrangement of particles, not the amount of particles. If you melt a $50\text{ g}$ block of ice in a sealed container, you get exactly $50\text{ g}$ of liquid water.

Next time you watch an ice cube melt in your cup, picture those tiny particles dancing faster and sliding away from their frozen seats!

science

Melting: Solids Turning into Liquids. Describe melting as the process where thermal energy causes particles in a solid to break free into a liquid state.

What are freezing and melting? (KS2 Science)

Melting and Solidifying: Particle Model and Everyday Examples

Phase Changes, Thermal Energy, and Particle Motion

Effective teaching of melting across Key Stages 1 and 2 relies on connecting macroscopic observations (ice cubes melting, chocolate softening, seasonal icicles thawing in spring) to microscopic particle models. Teachers should use physical role-play (pupils standing shoulder-to-shoulder vibrating on the spot as a solid, then shaking faster and sliding past each other as a liquid when 'heated') or marble trays to reinforce that particles remain intact while their kinetic energy and arrangement change. Explicit contrast between 'melting' (single substance + heat) and 'dissolving' (mixing two substances) prevents long-term cognitive confusion.

Melting: Solids Turning into Liquids

Adding Thermal Energy

The Melting Point