<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Properties of Liquids</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .main-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .tab-btn:hover {
      background: #f8fafc;
      color: #334155;
    }

    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .tab-btn:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }

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

    .step-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .step-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 235px;
      display: block;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 2px;
    }

    .ctrl-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .ctrl-btn:active {
      background: #e2e8f0;
    }

    .ctrl-btn:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }

    /* Particle sliding animation */
    @keyframes slide-drift-1 {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(2.5px, -2px); }
    }
    @keyframes slide-drift-2 {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-2px, 2px); }
    }
    .drift-a { animation: slide-drift-1 3.2s ease-in-out infinite; }
    .drift-b { animation: slide-drift-2 3.6s ease-in-out infinite; }

    /* Syringe push pulse (rigid plunger push) */
    @keyframes push-pulse {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(2.5px); }
    }
    .plunger-push {
      animation: push-pulse 1.8s ease-in-out infinite;
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="nav-tabs" role="tablist">
      <button class="tab-btn active" id="tab0" role="tab" aria-selected="true">1. Shape</button>
      <button class="tab-btn" id="tab1" role="tab" aria-selected="false">2. Volume</button>
      <button class="tab-btn" id="tab2" role="tab" aria-selected="false">3. Particles</button>
    </div>

    
    <div class="stage">
      
      
      <div class="step-panel active" id="step0" role="tabpanel">
        <svg viewBox="0 0 380 220">
          
          <g transform="translate(35, 20)">
            
            <rect x="0" y="25" width="46" height="120" rx="3" fill="#e0f2fe" stroke="#64748b" stroke-width="2"/>
            
            <rect x="2" y="55" width="42" height="88" rx="2" fill="#38bdf8"/>
            <ellipse cx="23" cy="55" rx="21" ry="3.5" fill="#7dd3fc"/>
            
            <line x1="46" y1="55" x2="36" y2="55" stroke="#0284c7" stroke-width="2"/>
            <text x="52" y="59" font-size="11" font-weight="700" fill="#0369a1">100 mL</text>
            
            <line x1="46" y1="85" x2="40" y2="85" stroke="#94a3b8" stroke-width="1.5"/>
            <line x1="46" y1="115" x2="40" y2="115" stroke="#94a3b8" stroke-width="1.5"/>
          </g>

          
          <g transform="translate(142, 85)">
            <path d="M 0 0 L 32 0 M 24 -6 L 32 0 L 24 6" stroke="#475569" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
            <text x="16" y="-10" text-anchor="middle" font-size="11" font-weight="600" fill="#475569">Poured</text>
          </g>

          
          <g transform="translate(200, 35)">
            
            <path d="M 0 45 Q 8 115 55 115 Q 102 115 110 45 Z" fill="#e0f2fe" stroke="#64748b" stroke-width="2"/>
            
            <path d="M 5 78 Q 16 113 55 113 Q 94 113 105 78 Z" fill="#38bdf8"/>
            <ellipse cx="55" cy="78" rx="50" ry="5.5" fill="#7dd3fc"/>
            
            <line x1="105" y1="78" x2="95" y2="78" stroke="#0284c7" stroke-width="2"/>
            <text x="111" y="82" font-size="11" font-weight="700" fill="#0369a1">100 mL</text>
          </g>

          
          <g transform="translate(190, 195)">
            <rect x="-135" y="-12" width="270" height="24" rx="12" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
            <text x="0" y="4" text-anchor="middle" font-size="11.5" font-weight="600" fill="#334155">Changes shape • Keeps 100 mL volume</text>
          </g>
        </svg>
      </div>

      
      <div class="step-panel" id="step1" role="tabpanel">
        <svg viewBox="0 0 380 220">
          
          <g transform="translate(105, 10)">
            
            <g class="plunger-push">
              
              <path d="M 0 0 L 0 16 M -4 10 L 0 16 L 4 10" stroke="#ef4444" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
              <text x="0" y="-3" text-anchor="middle" font-size="10" font-weight="800" fill="#ef4444">PUSH</text>
              
              
              <rect x="-22" y="20" width="44" height="5" rx="2" fill="#64748b"/>
              <rect x="-4" y="25" width="8" height="42" fill="#94a3b8"/>
              
              <rect x="-18" y="67" width="36" height="10" rx="2" fill="#334155"/>
            </g>

            
            <rect x="-20" y="60" width="40" height="88" rx="2" fill="rgba(224,242,254,0.4)" stroke="#64748b" stroke-width="2"/>
            
            <rect x="-26" y="60" width="52" height="4" rx="2" fill="#94a3b8"/>
            
            
            <rect x="-18" y="77" width="36" height="71" fill="#38bdf8"/>

            
            <rect x="-4" y="148" width="8" height="12" fill="#38bdf8" stroke="#64748b" stroke-width="1.5"/>
            
            <rect x="-10" y="158" width="20" height="10" rx="3" fill="#1e293b"/>
          </g>

          
          <g transform="translate(105, 173)">
            <line x1="16" y1="0" x2="38" y2="0" stroke="#64748b" stroke-width="1.5" stroke-dasharray="2 2"/>
            <rect x="42" y="-10" width="60" height="20" rx="4" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
            <text x="72" y="4" text-anchor="middle" font-size="11" font-weight="700" fill="#475569">Capped</text>
          </g>

          
          <g transform="translate(200, 48)">
            
            <rect x="0" y="0" width="168" height="60" rx="8" fill="#fef2f2" stroke="#fca5a5" stroke-width="1.2"/>
            
            
            <circle cx="24" cy="30" r="12" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
            <path d="M 19 25 L 29 35 M 29 25 L 19 35" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/>
            
            <text x="44" y="25" font-size="11.5" font-weight="700" fill="#b91c1c">Cannot compress</text>
            <text x="44" y="42" font-size="10.5" font-weight="500" fill="#7f1d1d">Plunger is blocked</text>
          </g>

          
          <g transform="translate(190, 198)">
            <rect x="-135" y="-12" width="270" height="24" rx="12" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
            <text x="0" y="4" text-anchor="middle" font-size="11.5" font-weight="600" fill="#334155">Incompressible • Fixed volume</text>
          </g>
        </svg>
      </div>

      
      <div class="step-panel" id="step2" role="tabpanel">
        <svg viewBox="0 0 380 220">
          
          <circle cx="190" cy="95" r="74" fill="#f0f9ff" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="5 4"/>

          
          <g transform="translate(190, 95)">
            
            <g class="drift-a">
              <circle cx="-40" cy="40" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="-17" cy="44" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="8" cy="43" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="33" cy="40" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
            </g>

            
            <g class="drift-b">
              <circle cx="-50" cy="19" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="-27" cy="22" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="-3" cy="21" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="21" cy="21" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="45" cy="18" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
            </g>

            
            <g class="drift-a">
              <circle cx="-43" cy="-3" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="-20" cy="-1" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="4" cy="-2" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="28" cy="-3" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="50" cy="-5" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
            </g>

            
            <g class="drift-b">
              <circle cx="-32" cy="-25" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="-9" cy="-24" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="15" cy="-25" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="38" cy="-28" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
            </g>

            
            <g class="drift-a">
              <circle cx="-16" cy="-47" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
              <circle cx="8" cy="-48" r="11.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
            </g>

            
            <path d="M -28 0 L -12 -2 M -16 -6 L -12 -2 L -16 2" stroke="#0369a1" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M 0 37 L 16 35 M 12 31 L 16 35 L 12 39" stroke="#0369a1" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
          </g>

          
          <g transform="translate(190, 198)">
            <rect x="-135" y="-12" width="270" height="24" rx="12" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
            <text x="0" y="4" text-anchor="middle" font-size="11.5" font-weight="600" fill="#334155">Close together • Slide past each other</text>
          </g>
        </svg>
      </div>

    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn" aria-label="Previous step">◀</button>
      <button class="ctrl-btn" id="playBtn" aria-label="Pause animation">⏸</button>
      <button class="ctrl-btn" id="nextBtn" aria-label="Next step">▶</button>
    </div>
  </div>

  <script>
    const panels = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2')
    ];
    const tabs = [
      document.getElementById('tab0'),
      document.getElementById('tab1'),
      document.getElementById('tab2')
    ];
    const prevBtn = document.getElementById('prevBtn');
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');

    let activeIdx = 0;
    let playing = true;
    let timer = null;

    function setStep(idx) {
      activeIdx = (idx + panels.length) % panels.length;
      panels.forEach((p, i) => {
        p.classList.toggle('active', i === activeIdx);
      });
      tabs.forEach((t, i) => {
        const isActive = i === activeIdx;
        t.classList.toggle('active', isActive);
        t.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(() => {
        setStep(activeIdx + 1);
      }, 3500);
    }

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

    tabs.forEach((t, i) => {
      t.addEventListener('click', () => {
        setStep(i);
        if (playing) startTimer();
      });
    });

    prevBtn.addEventListener('click', () => {
      setStep(activeIdx - 1);
      if (playing) startTimer();
    });

    nextBtn.addEventListener('click', () => {
      setStep(activeIdx + 1);
      if (playing) startTimer();
    });

    playBtn.addEventListener('click', () => {
      playing = !playing;
      playBtn.textContent = playing ? '⏸' : '▶';
      playBtn.setAttribute('aria-label', playing ? 'Pause animation' : 'Play animation');
      if (playing) {
        startTimer();
      } else {
        stopTimer();
      }
    });

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

Comparing the Properties of Solids, Liquids, and Gases

<!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; }
    html, body {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      user-select: none;
      -webkit-user-select: none;
    }
    .nav {
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 10px 12px 6px;
      flex-wrap: wrap;
    }
    .tab {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .tab.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
    .view-container {
      position: relative;
      flex: 1;
      width: 100%;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    .caption-box {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      pointer-events: none;
      white-space: nowrap;
    }
    .btn-toggle {
      position: absolute;
      top: 10px;
      right: 14px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 16px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      z-index: 10;
    }
  </style>
</head>
<body>
  <div class="nav">
    <button class="tab active" data-view="0">1. Shape &amp; Volume</button>
    <button class="tab" data-view="1">2. Compression</button>
    <button class="tab" data-view="2">3. Particle Zoom</button>
  </div>

  <div class="view-container" id="stage">
    <canvas id="cv"></canvas>
    <button class="btn-toggle" id="actionBtn">Switch Container</button>
    <div class="caption-box" id="caption">Fills entire container</div>
  </div>

  <script>
    const cv = document.getElementById('cv');
    const ctx = cv.getContext('2d');
    const tabs = document.querySelectorAll('.tab');
    const caption = document.getElementById('caption');
    const actionBtn = document.getElementById('actionBtn');

    let currentView = 0;
    let width = 0, height = 0;
    let animId = null;

    // View A state
    let containerType = 0; // 0: star balloon, 1: jar
    let morphProgress = 0;

    // View B state
    let plungerPos = 0; // 0 = uncompressed, 1 = compressed
    let plungerTarget = 0;

    // View C state
    let zoomParticles = [];

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

    // Particle helpers
    const NUM_PARTICLES = 36;
    let particles = [];

    function initParticles() {
      particles = [];
      for (let i = 0; i < NUM_PARTICLES; i++) {
        particles.push({
          x: Math.random() * 200 - 100,
          y: Math.random() * 200 - 100,
          vx: (Math.random() - 0.5) * 2.2,
          vy: (Math.random() - 0.5) * 2.2,
          r: 4.5
        });
      }

      zoomParticles = [];
      for (let i = 0; i < 9; i++) {
        zoomParticles.push({
          x: Math.random() * 260 - 130,
          y: Math.random() * 200 - 100,
          vx: (Math.random() - 0.5) * 1.5,
          vy: (Math.random() - 0.5) * 1.5,
          r: 12
        });
      }
    }
    initParticles();

    function setView(v) {
      currentView = v;
      tabs.forEach((t, i) => t.classList.toggle('active', i === v));
      if (v === 0) {
        actionBtn.style.display = 'block';
        actionBtn.textContent = containerType === 0 ? 'Fill Glass Jar →' : 'Fill Balloon →';
        caption.textContent = containerType === 0 ? 'Takes balloon shape' : 'Expands to fill jar';
      } else if (v === 1) {
        actionBtn.style.display = 'block';
        actionBtn.textContent = plungerTarget === 0 ? 'Push Plunger ⬇' : 'Release Plunger ⬆';
        caption.textContent = plungerTarget === 1 ? 'Easily compressed' : 'Gas particles far apart';
      } else {
        actionBtn.style.display = 'none';
        caption.textContent = 'Wide gaps between particles';
      }
    }

    tabs.forEach((tab, idx) => {
      tab.addEventListener('click', () => setView(idx));
    });

    actionBtn.addEventListener('click', () => {
      if (currentView === 0) {
        containerType = containerType === 0 ? 1 : 0;
        setView(0);
      } else if (currentView === 1) {
        plungerTarget = plungerTarget === 0 ? 1 : 0;
        setView(1);
      }
    });

    // Auto-cycle gently every 4.5 seconds if untouched
    let lastUserInteract = Date.now();
    cv.addEventListener('pointerdown', () => {
      lastUserInteract = Date.now();
      if (currentView === 0) {
        containerType = containerType === 0 ? 1 : 0;
        setView(0);
      } else if (currentView === 1) {
        plungerTarget = plungerTarget === 0 ? 1 : 0;
        setView(1);
      }
    });

    function getStarRadius(angle, spikes = 5, outerR = 105, innerR = 48) {
      const step = Math.PI / spikes;
      let relAngle = (angle + Math.PI / 2) % (2 * step);
      if (relAngle < 0) relAngle += 2 * step;
      if (relAngle > step) relAngle = 2 * step - relAngle;
      const t = relAngle / step;
      return outerR * (1 - t) + innerR * t;
    }

    function renderViewA(cx, cy) {
      // Morph animation
      const targetMorph = containerType;
      morphProgress += (targetMorph - morphProgress) * 0.08;

      ctx.save();
      ctx.translate(cx, cy);

      // Draw container
      if (morphProgress < 0.5) {
        // Star balloon
        ctx.beginPath();
        const pts = 5;
        const outer = 100;
        const inner = 46;
        for (let i = 0; i < pts * 2; i++) {
          const r = i % 2 === 0 ? outer : inner;
          const a = (i * Math.PI) / pts - Math.PI / 2;
          const x = Math.cos(a) * r;
          const y = Math.sin(a) * r;
          if (i === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.fillStyle = 'rgba(254, 240, 138, 0.35)';
        ctx.fill();
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#eab308';
        ctx.stroke();

        // Balloon knot
        ctx.beginPath();
        ctx.moveTo(-6, outer - 2);
        ctx.lineTo(6, outer - 2);
        ctx.lineTo(0, outer + 12);
        ctx.closePath();
        ctx.fillStyle = '#ca8a04';
        ctx.fill();
      } else {
        // Glass Jar
        const jw = 170, jh = 190, r = 16;
        ctx.beginPath();
        ctx.roundRect(-jw/2, -jh/2, jw, jh, [r, r, 6, 6]);
        ctx.fillStyle = 'rgba(224, 242, 254, 0.45)';
        ctx.fill();
        ctx.lineWidth = 3.5;
        ctx.strokeStyle = '#0284c7';
        ctx.stroke();

        // Jar lid
        ctx.beginPath();
        ctx.roundRect(-jw/2 - 6, -jh/2 - 14, jw + 12, 14, [4, 4, 0, 0]);
        ctx.fillStyle = '#64748b';
        ctx.fill();
      }

      // Update & draw gas particles inside boundary
      particles.forEach(p => {
        p.x += p.vx;
        p.y += p.vy;

        if (morphProgress < 0.5) {
          const dist = Math.hypot(p.x, p.y);
          const angle = Math.atan2(p.y, p.x);
          const maxR = getStarRadius(angle) - p.r - 2;
          if (dist > maxR) {
            const nx = p.x / dist;
            const ny = p.y / dist;
            p.x = nx * maxR;
            p.y = ny * maxR;
            const dot = p.vx * nx + p.vy * ny;
            p.vx = (p.vx - 2 * dot * nx) + (Math.random() - 0.5) * 0.2;
            p.vy = (p.vy - 2 * dot * ny) + (Math.random() - 0.5) * 0.2;
          }
        } else {
          const hw = 80 - p.r;
          const hh = 90 - p.r;
          if (p.x < -hw) { p.x = -hw; p.vx *= -1; }
          if (p.x > hw) { p.x = hw; p.vx *= -1; }
          if (p.y < -hh) { p.y = -hh; p.vy *= -1; }
          if (p.y > hh) { p.y = hh; p.vy *= -1; }
        }

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

      ctx.restore();
    }

    function renderViewB(cx, cy) {
      plungerPos += (plungerTarget - plungerPos) * 0.08;

      ctx.save();
      ctx.translate(cx, cy);

      const barrelW = 200;
      const barrelH = 80;
      const startX = -barrelW / 2;
      const topY = -barrelH / 2;

      // Syringe Barrel (glass)
      ctx.fillStyle = 'rgba(241, 245, 249, 0.7)';
      ctx.fillRect(startX, topY, barrelW, barrelH);

      // Capped nozzle on left
      ctx.fillStyle = '#94a3b8';
      ctx.fillRect(startX - 18, -10, 18, 20);
      ctx.fillStyle = '#dc2626'; // Red cap
      ctx.fillRect(startX - 26, -14, 10, 28);

      // Barrel outline
      ctx.strokeStyle = '#64748b';
      ctx.lineWidth = 3;
      ctx.strokeRect(startX, topY, barrelW, barrelH);

      // Tick marks
      ctx.strokeStyle = '#94a3b8';
      ctx.lineWidth = 1.5;
      for (let i = 1; i <= 5; i++) {
        const tx = startX + (barrelW / 6) * i;
        ctx.beginPath();
        ctx.moveTo(tx, topY);
        ctx.lineTo(tx, topY + 12);
        ctx.stroke();
      }

      // Plunger position: travels from right edge to middle
      const maxTravel = barrelW * 0.55;
      const curX = startX + barrelW - (plungerPos * maxTravel);

      // Gas particles in chamber (between startX and curX)
      const chamberW = curX - startX;
      particles.forEach(p => {
        // Map particle inside active chamber
        p.x += p.vx * (1 + plungerPos * 0.8);
        p.y += p.vy * (1 + plungerPos * 0.8);

        const pad = p.r + 2;
        const minX = startX + pad;
        const maxX = curX - pad;
        const minY = topY + pad;
        const maxY = topY + barrelH - pad;

        if (p.x < minX) { p.x = minX; p.vx = Math.abs(p.vx); }
        if (p.x > maxX) { p.x = maxX; p.vx = -Math.abs(p.vx); }
        if (p.y < minY) { p.y = minY; p.vy = Math.abs(p.vy); }
        if (p.y > maxY) { p.y = maxY; p.vy = -Math.abs(p.vy); }

        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = '#0284c7';
        ctx.fill();
      });

      // Plunger Head (rubber seal)
      ctx.fillStyle = '#334155';
      ctx.fillRect(curX, topY + 2, 14, barrelH - 4);

      // Plunger Rod & Handle
      ctx.fillStyle = '#94a3b8';
      ctx.fillRect(curX + 14, -8, 100, 16);
      ctx.fillStyle = '#64748b';
      ctx.fillRect(curX + 104, -28, 12, 56);

      ctx.restore();
    }

    function renderViewC(cx, cy) {
      ctx.save();
      ctx.translate(cx, cy);

      // Magnifier circular portal
      const radius = 105;
      ctx.save();
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2);
      ctx.clip();

      ctx.fillStyle = '#f8fafc';
      ctx.fillRect(-radius, -radius, radius * 2, radius * 2);

      // Particle dots moving with high speeds & vector lines showing large gaps
      zoomParticles.forEach(p => {
        p.x += p.vx * 1.6;
        p.y += p.vy * 1.6;

        const limit = radius - p.r;
        const dist = Math.hypot(p.x, p.y);
        if (dist > limit) {
          const nx = p.x / dist;
          const ny = p.y / dist;
          p.x = nx * limit;
          p.y = ny * limit;
          const dot = p.vx * nx + p.vy * ny;
          p.vx -= 2 * dot * nx;
          p.vy -= 2 * dot * ny;
        }

        // Motion trail / velocity vector
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x - p.vx * 12, p.y - p.vy * 12);
        ctx.strokeStyle = 'rgba(2, 132, 199, 0.35)';
        ctx.lineWidth = 3;
        ctx.stroke();

        // Particle circle
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = '#0284c7';
        ctx.fill();
        ctx.strokeStyle = '#0369a1';
        ctx.lineWidth = 1.5;
        ctx.stroke();
      });

      ctx.restore();

      // Magnifier lens rim
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2);
      ctx.lineWidth = 7;
      ctx.strokeStyle = '#0284c7';
      ctx.stroke();

      // Handle
      ctx.beginPath();
      ctx.moveTo(radius * 0.7, radius * 0.7);
      ctx.lineTo(radius * 0.7 + 34, radius * 0.7 + 34);
      ctx.lineWidth = 10;
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#64748b';
      ctx.stroke();

      ctx.restore();
    }

    function animate() {
      ctx.clearRect(0, 0, width, height);

      const cx = width / 2;
      const cy = height / 2 - 8;

      if (currentView === 0) {
        renderViewA(cx, cy);
      } else if (currentView === 1) {
        renderViewB(cx, cy);
      } else {
        renderViewC(cx, cy);
      }

      animId = requestAnimationFrame(animate);
    }
    animate();
  </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">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      padding: 8px 4px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 16px;
      width: 100%;
      max-width: 660px;
      margin: 0 auto;
      align-items: start;
    }

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

    .panel-box {
      display: flex;
      flex-direction: column;
      background: transparent;
      padding: 0;
    }

    .panel-title {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #0f172a;
      margin-bottom: 10px;
      text-align: center;
    }

    /* Left panel: Sand grain zoom */
    .sand-demo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      gap: 8px;
    }

    .sand-svg {
      width: 100%;
      max-width: 220px;
      height: auto;
    }

    .grain-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      border: 1.5px solid #94a3b8;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
    }

    .dot-solid {
      width: 9px;
      height: 9px;
      background: #b45309;
      border-radius: 2px;
      flex-shrink: 0;
    }

    /* Right panel: States Matrix */
    .states-table {
      display: grid;
      grid-template-columns: 72px repeat(3, 1fr);
      gap: 6px;
      font-size: 12px;
      align-items: center;
      text-align: center;
      width: 100%;
    }

    .col-header {
      font-weight: 800;
      padding: 5px 2px;
      border-radius: 6px;
      font-size: 12px;
      letter-spacing: 0.2px;
    }
    .col-solid { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
    .col-liquid { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
    .col-gas { background: #f3e8ff; color: #581c87; border: 1px solid #e9d5ff; }

    .row-label {
      font-weight: 800;
      color: #1e293b;
      text-align: left;
      font-size: 11px;
      padding-left: 2px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .particle-box {
      width: 100%;
      aspect-ratio: 1;
      max-height: 56px;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      margin: 0 auto;
      display: block;
    }

    .tag {
      font-weight: 700;
      padding: 5px 2px;
      border-radius: 5px;
      font-size: 11px;
      line-height: 1.2;
    }

    .tag-yes { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
    .tag-no { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
    .tag-fixed { background: #f8fafc; color: #1e293b; border: 1px solid #cbd5e1; }
    .tag-flow { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
    .tag-fill { background: #fae8ff; color: #701a75; border: 1px solid #f5d0fe; }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="panel-box">
      <div class="panel-title">Granular Solid</div>
      <div class="sand-demo">
        <svg class="sand-svg" viewBox="0 0 200 170" aria-label="Sand pile taking bowl shape, magnified crystal grain">
          
          <path d="M 25 50 Q 25 112 100 112 Q 175 112 175 50" fill="none" stroke="#64748b" stroke-width="2.5" stroke-linecap="round"/>
          <ellipse cx="100" cy="50" rx="75" ry="12" fill="none" stroke="#94a3b8" stroke-width="1.5"/>

          
          <path d="M 35 60 Q 100 85 165 60 Q 160 106 100 108 Q 40 106 35 60 Z" fill="#fde68a" stroke="#d97706" stroke-width="1.2"/>
          
          
          <path d="M 45 68 Q 100 45 155 68" fill="#fcd34d"/>
          
          
          <g fill="#92400e" opacity="0.75">
            <circle cx="80" cy="72" r="1.5"/>
            <circle cx="100" cy="65" r="1.5"/>
            <circle cx="120" cy="70" r="1.5"/>
            <circle cx="90" cy="85" r="1.5"/>
            <circle cx="110" cy="90" r="1.5"/>
            <circle cx="70" cy="88" r="1.5"/>
            <circle cx="130" cy="85" r="1.5"/>
            <circle cx="100" cy="98" r="1.5"/>
          </g>

          
          <line x1="100" y1="80" x2="140" y2="40" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,2"/>

          
          <g transform="translate(140, 40)">
            <circle cx="0" cy="0" r="26" fill="#ffffff" stroke="#2563eb" stroke-width="2.5"/>
            
            <polygon points="-12,-6 0,-15 14,-8 10,12 -8,14" fill="#fbbf24" stroke="#92400e" stroke-width="1.5"/>
            <polyline points="-12,-6 2,0 14,-8" fill="none" stroke="#b45309" stroke-width="1.2"/>
            <line x1="2" y1="0" x2="10" y2="12" stroke="#b45309" stroke-width="1.2"/>
            <line x1="2" y1="0" x2="-8" y2="14" stroke="#b45309" stroke-width="1.2"/>
          </g>
        </svg>

        <div class="grain-badge">
          <span class="dot-solid"></span>
          <span>Each grain = Solid with fixed shape</span>
        </div>
      </div>
    </div>

    
    <div class="panel-box">
      <div class="panel-title">Properties Summary</div>
      
      <div class="states-table">
        
        <div></div>
        <div class="col-header col-solid">Solid</div>
        <div class="col-header col-liquid">Liquid</div>
        <div class="col-header col-gas">Gas</div>

        
        <div class="row-label">Particles</div>
        
        
        <svg class="particle-box" viewBox="0 0 60 60" aria-label="Solid particle arrangement: tightly packed regular lattice">
          <g fill="#b45309">
            <circle cx="16" cy="16" r="5.5"/><circle cx="30" cy="16" r="5.5"/><circle cx="44" cy="16" r="5.5"/>
            <circle cx="16" cy="30" r="5.5"/><circle cx="30" cy="30" r="5.5"/><circle cx="44" cy="30" r="5.5"/>
            <circle cx="16" cy="44" r="5.5"/><circle cx="30" cy="44" r="5.5"/><circle cx="44" cy="44" r="5.5"/>
          </g>
        </svg>

        
        <svg class="particle-box" viewBox="0 0 60 60" aria-label="Liquid particle arrangement: close but irregular arrangement">
          <g fill="#0284c7">
            <circle cx="14" cy="36" r="5.5"/><circle cx="27" cy="33" r="5.5"/><circle cx="42" cy="34" r="5.5"/>
            <circle cx="18" cy="48" r="5.5"/><circle cx="33" cy="47" r="5.5"/><circle cx="47" cy="46" r="5.5"/>
            <circle cx="32" cy="21" r="5.5"/>
          </g>
        </svg>

        
        <svg class="particle-box" viewBox="0 0 60 60" aria-label="Gas particle arrangement: spaced far apart">
          <g fill="#7e22ce">
            <circle cx="14" cy="16" r="5"/>
            <circle cx="46" cy="24" r="5"/>
            <circle cx="28" cy="48" r="5"/>
          </g>
        </svg>

        
        <div class="row-label">Shape</div>
        <div class="tag tag-fixed">Fixed</div>
        <div class="tag tag-flow">Takes container</div>
        <div class="tag tag-fill">Fills container</div>

        
        <div class="row-label">Volume</div>
        <div class="tag tag-fixed">Fixed</div>
        <div class="tag tag-fixed">Fixed</div>
        <div class="tag tag-fill">Changes</div>

        
        <div class="row-label">Compress?</div>
        <div class="tag tag-no">✕ No</div>
        <div class="tag tag-no">✕ No</div>
        <div class="tag tag-yes">✓ Yes</div>
      </div>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 10px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 740px;
      margin: 0 auto;
    }

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

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .header-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 48px;
    }

    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 999px;
      display: inline-block;
    }

    .badge-shape { background: #dbeafe; color: #1d4ed8; }
    .badge-vol { background: #ede9fe; color: #6d28d9; }
    .badge-comp { background: #fef3c7; color: #b45309; }

    .subtitle {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-top: 4px;
      line-height: 1.25;
    }

    .stage-wrapper {
      width: 100%;
      height: 115px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin: 4px 0;
    }

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

    .caption {
      font-size: 11px;
      color: #334155;
      text-align: center;
      line-height: 1.35;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      margin-bottom: 6px;
    }

    .caption strong {
      color: #0f172a;
      margin-right: 3px;
    }

    .toggle-group {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 999px;
      width: 100%;
      max-width: 175px;
    }

    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 6px 0;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      text-align: center;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Transition styles */
    .smooth-trans {
      transition: all 0.35s ease;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    
    <div class="panel">
      <div class="header-group">
        <div class="badge badge-shape">1. Shape</div>
        <div class="subtitle">Does it keep its own shape?</div>
      </div>

      <div class="stage-wrapper">
        <svg viewBox="0 0 160 110">
          
          <path d="M 22,32 C 25,100 135,100 138,32" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
          <ellipse cx="80" cy="32" rx="58" ry="7" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3"/>
          
          
          <path id="shapeLiquid" d="M 33,52 C 38,94 122,94 127,52 C 105,56 55,56 33,52 Z" fill="#38bdf8" opacity="0" class="smooth-trans"/>
          
          
          <g id="shapeSolid" class="smooth-trans" opacity="1">
            
            <polygon points="66,42 90,42 98,50 74,50" fill="#f87171"/>
            
            <polygon points="66,42 74,50 74,72 66,64" fill="#dc2626"/>
            
            <polygon points="74,50 98,50 98,72 74,72" fill="#ef4444"/>
          </g>
        </svg>
      </div>

      <div class="caption" id="capShape">
        <span><strong>Solid:</strong> Rigid shape, does not conform to the bowl.</span>
      </div>

      <div class="toggle-group">
        <button class="toggle-btn active" id="btnSolid" onclick="setShape('solid')">Solid</button>
        <button class="toggle-btn" id="btnLiquid" onclick="setShape('liquid')">Liquid</button>
      </div>
    </div>

    
    <div class="panel">
      <div class="header-group">
        <div class="badge badge-vol">2. Volume</div>
        <div class="subtitle">Amount of space taken up</div>
      </div>

      <div class="stage-wrapper">
        <svg viewBox="0 0 160 110">
          
          <g id="volBeaker" class="smooth-trans" opacity="1">
            <rect x="42" y="24" width="76" height="72" rx="3" fill="#f8fafc" stroke="#94a3b8" stroke-width="2.5"/>
            
            <rect x="44.5" y="60" width="71" height="34" rx="1" fill="#c084fc" opacity="0.85"/>
            
            <line x1="38" y1="60" x2="52" y2="60" stroke="#6d28d9" stroke-width="2"/>
            <text x="35" y="64" font-size="10" font-weight="700" fill="#6d28d9" text-anchor="end">100 mL</text>
          </g>

          
          <g id="volCylinder" class="smooth-trans" opacity="0">
            <rect x="62" y="14" width="36" height="84" rx="3" fill="#f8fafc" stroke="#94a3b8" stroke-width="2.5"/>
            
            <rect x="64.5" y="30" width="31" height="66" rx="1" fill="#c084fc" opacity="0.85"/>
            
            <line x1="56" y1="30" x2="72" y2="30" stroke="#6d28d9" stroke-width="2"/>
            <text x="53" y="34" font-size="10" font-weight="700" fill="#6d28d9" text-anchor="end">100 mL</text>
          </g>
        </svg>
      </div>

      <div class="caption" id="capVol">
        <span><strong>Wide Beaker:</strong> Liquid spreads wide; volume is 100 mL.</span>
      </div>

      <div class="toggle-group">
        <button class="toggle-btn active" id="btnBeaker" onclick="setVolume('beaker')">Wide Beaker</button>
        <button class="toggle-btn" id="btnCylinder" onclick="setVolume('cylinder')">Tall Cylinder</button>
      </div>
    </div>

    
    <div class="panel">
      <div class="header-group">
        <div class="badge badge-comp">3. Compressibility</div>
        <div class="subtitle">Can it be squished into less space?</div>
      </div>

      <div class="stage-wrapper">
        <svg viewBox="0 0 160 110">
          
          <rect x="52" y="22" width="56" height="74" fill="#f8fafc" stroke="#94a3b8" stroke-width="2.5" rx="2"/>
          
          <rect x="73" y="96" width="14" height="10" fill="#64748b"/>
          <line x1="66" y1="106" x2="94" y2="106" stroke="#475569" stroke-width="3" stroke-linecap="round"/>

          
          <g id="pushArrow" class="smooth-trans" opacity="0">
            <line x1="80" y1="2" x2="80" y2="14" stroke="#d97706" stroke-width="2.5" stroke-linecap="round"/>
            <polyline points="75,9 80,14 85,9" fill="none" stroke="#d97706" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          </g>

          
          <g id="plunger" class="smooth-trans" transform="translate(0, 0)">
            <rect x="76" y="2" width="8" height="24" fill="#cbd5e1"/>
            <rect x="65" y="0" width="30" height="5" rx="2" fill="#94a3b8"/>
            <rect x="54" y="24" width="52" height="7" fill="#475569" rx="1"/>
          </g>

          
          <g id="particles" fill="#f59e0b" stroke="#b45309" stroke-width="1">
            <circle id="p1" class="particle-item smooth-trans" cx="62" cy="42" r="3.5"/>
            <circle id="p2" class="particle-item smooth-trans" cx="80" cy="46" r="3.5"/>
            <circle id="p3" class="particle-item smooth-trans" cx="98" cy="42" r="3.5"/>
            <circle id="p4" class="particle-item smooth-trans" cx="70" cy="62" r="3.5"/>
            <circle id="p5" class="particle-item smooth-trans" cx="90" cy="62" r="3.5"/>
            <circle id="p6" class="particle-item smooth-trans" cx="62" cy="82" r="3.5"/>
            <circle id="p7" class="particle-item smooth-trans" cx="80" cy="82" r="3.5"/>
            <circle id="p8" class="particle-item smooth-trans" cx="98" cy="82" r="3.5"/>
          </g>
        </svg>
      </div>

      <div class="caption" id="capComp">
        <span><strong>Gas (Free):</strong> Particles spread out with large gaps.</span>
      </div>

      <div class="toggle-group">
        <button class="toggle-btn active" id="btnFree" onclick="setComp('free')">Free</button>
        <button class="toggle-btn" id="btnPressed" onclick="setComp('pressed')">Pressed</button>
      </div>
    </div>

  </div>

  <script>
    function setShape(state) {
      const solid = document.getElementById('shapeSolid');
      const liquid = document.getElementById('shapeLiquid');
      const btnS = document.getElementById('btnSolid');
      const btnL = document.getElementById('btnLiquid');
      const cap = document.getElementById('capShape');

      if (state === 'solid') {
        solid.style.opacity = '1';
        liquid.style.opacity = '0';
        btnS.classList.add('active');
        btnL.classList.remove('active');
        cap.innerHTML = '<span><strong>Solid:</strong> Rigid shape, does not conform to the bowl.</span>';
      } else {
        solid.style.opacity = '0';
        liquid.style.opacity = '1';
        btnS.classList.remove('active');
        btnL.classList.add('active');
        cap.innerHTML = '<span><strong>Liquid:</strong> Flows and conforms to the bowl\'s contour.</span>';
      }
    }

    function setVolume(state) {
      const beaker = document.getElementById('volBeaker');
      const cylinder = document.getElementById('volCylinder');
      const btnB = document.getElementById('btnBeaker');
      const btnC = document.getElementById('btnCylinder');
      const cap = document.getElementById('capVol');

      if (state === 'beaker') {
        beaker.style.opacity = '1';
        cylinder.style.opacity = '0';
        btnB.classList.add('active');
        btnC.classList.remove('active');
        cap.innerHTML = '<span><strong>Wide Beaker:</strong> Liquid spreads wide; volume is 100 mL.</span>';
      } else {
        beaker.style.opacity = '0';
        cylinder.style.opacity = '1';
        btnB.classList.remove('active');
        btnC.classList.add('active');
        cap.innerHTML = '<span><strong>Tall Cylinder:</strong> Liquid level is higher, but volume is still 100 mL.</span>';
      }
    }

    function setComp(state) {
      const plunger = document.getElementById('plunger');
      const arrow = document.getElementById('pushArrow');
      const btnF = document.getElementById('btnFree');
      const btnP = document.getElementById('btnPressed');
      const cap = document.getElementById('capComp');

      const p1 = document.getElementById('p1');
      const p2 = document.getElementById('p2');
      const p3 = document.getElementById('p3');
      const p4 = document.getElementById('p4');
      const p5 = document.getElementById('p5');
      const p6 = document.getElementById('p6');
      const p7 = document.getElementById('p7');
      const p8 = document.getElementById('p8');

      if (state === 'free') {
        plunger.style.transform = 'translateY(0px)';
        arrow.style.opacity = '0';
        btnF.classList.add('active');
        btnP.classList.remove('active');
        cap.innerHTML = '<span><strong>Gas (Free):</strong> Particles spread out with large gaps.</span>';

        // Spread particles
        p1.setAttribute('cx', '62'); p1.setAttribute('cy', '42');
        p2.setAttribute('cx', '80'); p2.setAttribute('cy', '46');
        p3.setAttribute('cx', '98'); p3.setAttribute('cy', '42');
        p4.setAttribute('cx', '70'); p4.setAttribute('cy', '62');
        p5.setAttribute('cx', '90'); p5.setAttribute('cy', '62');
        p6.setAttribute('cx', '62'); p6.setAttribute('cy', '82');
        p7.setAttribute('cx', '80'); p7.setAttribute('cy', '82');
        p8.setAttribute('cx', '98'); p8.setAttribute('cy', '82');
      } else {
        plunger.style.transform = 'translateY(36px)';
        arrow.style.opacity = '1';
        btnF.classList.remove('active');
        btnP.classList.add('active');
        cap.innerHTML = '<span><strong>Gas (Pressed):</strong> Forced into a smaller volume under pressure.</span>';

        // Compress particles near base
        p1.setAttribute('cx', '61'); p1.setAttribute('cy', '74');
        p2.setAttribute('cx', '74'); p2.setAttribute('cy', '72');
        p3.setAttribute('cx', '86'); p3.setAttribute('cy', '72');
        p4.setAttribute('cx', '99'); p4.setAttribute('cy', '74');
        p5.setAttribute('cx', '61'); p5.setAttribute('cy', '86');
        p6.setAttribute('cx', '74'); p6.setAttribute('cy', '87');
        p7.setAttribute('cx', '86'); p7.setAttribute('cy', '87');
        p8.setAttribute('cx', '99'); p8.setAttribute('cy', '86');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
    }

    /* Stepper navigation */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }
    .tab-btn {
      flex: 1;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .tab-btn:hover {
      background: #f1f5f9;
      color: #1e293b;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37,99,235,0.25);
    }
    .play-btn {
      width: 32px;
      height: 32px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      color: #334155;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .play-btn:hover {
      background: #e2e8f0;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 400 / 240;
      overflow: hidden;
    }
    .view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .view.active {
      opacity: 1;
      pointer-events: auto;
    }

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

    /* Vibration subtle animation for particles */
    @keyframes jiggle {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(0.6px, -0.6px); }
      50% { transform: translate(-0.5px, 0.5px); }
      75% { transform: translate(-0.6px, -0.4px); }
    }
    .particle-grid circle {
      animation: jiggle 1.4s ease-in-out infinite alternate;
    }
    .particle-grid circle:nth-child(even) {
      animation-duration: 1.1s;
      animation-direction: alternate-reverse;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" data-step="0">1. Shape</button>
    <button class="tab-btn" data-step="1">2. Syringe</button>
    <button class="tab-btn" data-step="2">3. Particles</button>
    <button id="playBtn" class="play-btn" aria-label="Toggle autoplay">⏸</button>
  </div>

  <div class="stage">
    
    <div class="view active" id="view-0">
      <svg viewBox="0 0 400 240">
        
        <g>
          
          <rect x="50" y="70" width="100" height="120" rx="4" fill="none" stroke="#94a3b8" stroke-width="3"/>
          <path d="M 45 70 L 155 70" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
          
          <rect x="68" y="125" width="64" height="60" rx="3" fill="#d97706" stroke="#b45309" stroke-width="2"/>
          <path d="M 68 140 L 132 140 M 68 155 L 132 155 M 68 170 L 132 170" stroke="#b45309" stroke-width="1" opacity="0.3"/>
          
          <text x="100" y="215" text-anchor="middle" font-size="14" font-weight="600" fill="#475569">Square cup</text>
        </g>

        
        <g>
          
          <path d="M 230 100 Q 230 190 300 190 Q 370 190 370 100" fill="none" stroke="#94a3b8" stroke-width="3"/>
          <line x1="225" y1="100" x2="375" y2="100" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
          
          <rect x="268" y="125" width="64" height="60" rx="3" fill="#d97706" stroke="#b45309" stroke-width="2"/>
          <path d="M 268 140 L 332 140 M 268 155 L 332 155 M 268 170 L 332 170" stroke="#b45309" stroke-width="1" opacity="0.3"/>
          
          <text x="300" y="215" text-anchor="middle" font-size="14" font-weight="600" fill="#475569">Round bowl</text>
        </g>

        
        <rect x="120" y="16" width="160" height="30" rx="15" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1.5"/>
        <text x="200" y="36" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">Fixed shape</text>
      </svg>
    </div>

    
    <div class="view" id="view-1">
      <svg viewBox="0 0 400 240">
        
        <g>
          <line x1="160" y1="20" x2="160" y2="48" stroke="#ef4444" stroke-width="3.5" stroke-linecap="round"/>
          <polygon points="154,46 166,46 160,56" fill="#ef4444"/>
          <text x="160" y="15" text-anchor="middle" font-size="12" font-weight="bold" fill="#ef4444">Push</text>
        </g>

        
        <g>
          
          <rect x="110" y="60" width="100" height="150" fill="#f1f5f9" stroke="#64748b" stroke-width="3"/>
          <rect x="100" y="56" width="120" height="8" rx="2" fill="#64748b"/>
          
          <rect x="150" y="210" width="20" height="18" fill="#64748b"/>
          <line x1="140" y1="228" x2="180" y2="228" stroke="#dc2626" stroke-width="3" stroke-linecap="round"/>
          
          
          <rect x="154" y="28" width="12" height="40" fill="#94a3b8"/>
          <rect x="135" y="24" width="50" height="6" rx="2" fill="#64748b"/>
          <rect x="112" y="68" width="96" height="16" fill="#475569"/>

          
          <g fill="#d97706" stroke="#92400e" stroke-width="1.5">
            
            <circle cx="126" cy="100" r="13"/>
            <circle cx="152" cy="100" r="13"/>
            <circle cx="178" cy="100" r="13"/>
            <circle cx="194" cy="100" r="13"/>
            
            <circle cx="126" cy="126" r="13"/>
            <circle cx="152" cy="126" r="13"/>
            <circle cx="178" cy="126" r="13"/>
            <circle cx="194" cy="126" r="13"/>
            
            <circle cx="126" cy="152" r="13"/>
            <circle cx="152" cy="152" r="13"/>
            <circle cx="178" cy="152" r="13"/>
            <circle cx="194" cy="152" r="13"/>
            
            <circle cx="126" cy="178" r="13"/>
            <circle cx="152" cy="178" r="13"/>
            <circle cx="178" cy="178" r="13"/>
            <circle cx="194" cy="178" r="13"/>
            
            <circle cx="139" cy="198" r="11"/>
            <circle cx="161" cy="198" r="11"/>
            <circle cx="183" cy="198" r="11"/>
          </g>
        </g>

        
        <g transform="translate(245, 110)">
          <rect x="0" y="0" width="135" height="50" rx="8" fill="#fef2f2" stroke="#f87171" stroke-width="1.5"/>
          <text x="67" y="22" text-anchor="middle" font-size="14" font-weight="bold" fill="#dc2626">Cannot</text>
          <text x="67" y="39" text-anchor="middle" font-size="14" font-weight="bold" fill="#dc2626">compress</text>
          
          <polygon points="0,25 -8,20 -8,30" fill="#fef2f2" stroke="#f87171" stroke-width="1.5"/>
          <line x1="0" y1="21" x2="0" y2="29" stroke="#fef2f2" stroke-width="2"/>
        </g>
      </svg>
    </div>

    
    <div class="view" id="view-2">
      <svg viewBox="0 0 400 240">
        
        <circle cx="180" cy="120" r="92" fill="#f8fafc" stroke="#3b82f6" stroke-width="4"/>
        <line x1="245" y1="185" x2="300" y2="230" stroke="#64748b" stroke-width="8" stroke-linecap="round"/>

        
        <g class="particle-grid" fill="#d97706" stroke="#78350f" stroke-width="1.5">
          
          <circle cx="132" cy="72" r="11"/>
          <circle cx="156" cy="72" r="11"/>
          <circle cx="180" cy="72" r="11"/>
          <circle cx="204" cy="72" r="11"/>
          <circle cx="228" cy="72" r="11"/>

          
          <circle cx="132" cy="96" r="11"/>
          <circle cx="156" cy="96" r="11"/>
          <circle cx="180" cy="96" r="11"/>
          <circle cx="204" cy="96" r="11"/>
          <circle cx="228" cy="96" r="11"/>

          
          <circle cx="132" cy="120" r="11"/>
          <circle cx="156" cy="120" r="11"/>
          <circle cx="180" cy="120" r="11"/>
          <circle cx="204" cy="120" r="11"/>
          <circle cx="228" cy="120" r="11"/>

          
          <circle cx="132" cy="144" r="11"/>
          <circle cx="156" cy="144" r="11"/>
          <circle cx="180" cy="144" r="11"/>
          <circle cx="204" cy="144" r="11"/>
          <circle cx="228" cy="144" r="11"/>

          
          <circle cx="132" cy="168" r="11"/>
          <circle cx="156" cy="168" r="11"/>
          <circle cx="180" cy="168" r="11"/>
          <circle cx="204" cy="168" r="11"/>
          <circle cx="228" cy="168" r="11"/>
        </g>

        
        <rect x="290" y="55" width="100" height="48" rx="6" fill="#f0fdf4" stroke="#86efac" stroke-width="1.5"/>
        <text x="340" y="75" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Regular rows</text>
        <text x="340" y="93" text-anchor="middle" font-size="12" font-weight="600" fill="#166534">Tightly packed</text>

        
        <line x1="285" y1="80" x2="250" y2="105" stroke="#16a34a" stroke-width="2" stroke-linecap="round"/>
        <polygon points="252,99 248,107 257,105" fill="#16a34a"/>
      </svg>
    </div>
  </div>

  <script>
    const views = [
      document.getElementById('view-0'),
      document.getElementById('view-1'),
      document.getElementById('view-2')
    ];
    const tabs = document.querySelectorAll('.tab-btn');
    const playBtn = document.getElementById('playBtn');
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    function setStep(idx) {
      currentStep = idx;
      views.forEach((v, i) => {
        if (v) v.classList.toggle('active', i === idx);
      });
      tabs.forEach((t, i) => {
        if (t) t.classList.toggle('active', i === idx);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % views.length);
    }

    function startAuto() {
      stopAuto();
      isPlaying = true;
      if (playBtn) playBtn.textContent = '⏸';
      timer = setInterval(nextStep, 3200);
    }

    function stopAuto() {
      isPlaying = false;
      if (playBtn) playBtn.textContent = '▶';
      if (timer) clearInterval(timer);
    }

    tabs.forEach((tab, idx) => {
      tab.addEventListener('click', () => {
        stopAuto();
        setStep(idx);
      });
    });

    if (playBtn) {
      playBtn.addEventListener('click', () => {
        if (isPlaying) {
          stopAuto();
        } else {
          startAuto();
        }
      });
    }

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

science.ks3.y1.t3.s5

Aligned learning resources

Related diagrams