<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      min-height: 100vh;
      user-select: none;
    }

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

    /* Stepper Navigation */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 5px;
      flex-wrap: nowrap;
    }
    .btn-step {
      flex: 1;
      padding: 6px 3px;
      font-size: 11.5px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
    }
    .btn-step:hover {
      background: #f1f5f9;
      color: #0f172a;
    }
    .btn-step.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.3);
    }
    .btn-play {
      padding: 6px 10px;
      font-size: 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e293b;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }
    .btn-play:hover {
      background: #f1f5f9;
    }

    /* Visual Content Container */
    .diagram-body {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 480px) {
      .diagram-body {
        flex-direction: column;
        gap: 8px;
      }
      .svg-wrap {
        max-width: 250px;
        max-height: 250px;
      }
      .math-card {
        width: 100%;
        min-height: 110px !important;
        padding: 10px 12px !important;
      }
    }

    .svg-wrap {
      width: 100%;
      max-width: 280px;
      aspect-ratio: 1 / 1;
      flex-shrink: 0;
    }

    /* Math Card */
    .math-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      flex: 1;
      min-width: 210px;
      min-height: 240px;
      text-align: center;
    }

    .badge-rule {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 12px;
    }

    .math-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 14px;
      color: #1e293b;
    }

    .math-title {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 2px;
    }

    .math-line {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13.5px;
    }

    .point-tag {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      text-transform: uppercase;
    }
    .tail-tag {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .head-tag {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }

    .math-dx { color: #d97706; font-weight: 700; }
    .math-dy { color: #059669; font-weight: 700; }

    .vec {
      display: inline-block;
      position: relative;
      font-weight: 700;
      font-style: italic;
      padding-top: 4px;
      font-family: Georgia, "Times New Roman", serif;
    }
    .vec::after {
      content: '→';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
    }

    .math-calc {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 14px;
      font-family: "Cambria Math", "Times New Roman", serif;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    .matrix-equation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 14px;
      flex-wrap: wrap;
    }

    .matrix {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 2px 7px;
      margin: 0 2px;
      line-height: 1.35;
    }
    .matrix::before, .matrix::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      border: 1.5px solid #334155;
    }
    .matrix::before {
      left: 0;
      border-right: none;
    }
    .matrix::after {
      right: 0;
      border-left: none;
    }
    .matrix-row {
      font-size: 13.5px;
      padding: 1px 0;
    }

    /* SVG Elements transition */
    .fade-item {
      transition: opacity 0.3s ease;
      opacity: 0;
    }
    .fade-item.show {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="controls">
      <button class="btn-step active" onclick="setStep(0)">1. Points</button>
      <button class="btn-step" onclick="setStep(1)">2. Vector</button>
      <button class="btn-step" onclick="setStep(2)">3. Δx &amp; Δy</button>
      <button class="btn-step" onclick="setStep(3)">4. Matrix</button>
      <button id="playBtn" class="btn-play" onclick="togglePlay()" title="Toggle Auto-play">⏸</button>
    </div>

    
    <div class="diagram-body">
      
      <svg class="svg-wrap" viewBox="0 0 340 340">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 10 5 L 0 8.5 z" fill="#0284c7" />
          </marker>
        </defs>

        
        <g stroke="#e2e8f0" stroke-width="1.2">
          <line x1="40" y1="36" x2="304" y2="36" />
          <line x1="40" y1="80" x2="304" y2="80" />
          <line x1="40" y1="124" x2="304" y2="124" />
          <line x1="40" y1="168" x2="304" y2="168" />
          <line x1="40" y1="212" x2="304" y2="212" />
          <line x1="40" y1="256" x2="304" y2="256" />

          <line x1="84" y1="36" x2="84" y2="300" />
          <line x1="128" y1="36" x2="128" y2="300" />
          <line x1="172" y1="36" x2="172" y2="300" />
          <line x1="216" y1="36" x2="216" y2="300" />
          <line x1="260" y1="36" x2="260" y2="300" />
          <line x1="304" y1="36" x2="304" y2="300" />
        </g>

        
        <g stroke="#64748b" stroke-width="2">
          <line x1="40" y1="300" x2="316" y2="300" />
          <line x1="40" y1="300" x2="40" y2="24" />
        </g>

        
        <g font-size="11" fill="#64748b" text-anchor="middle" font-weight="600" font-family="system-ui, sans-serif">
          <text x="84" y="316">1</text>
          <text x="128" y="316">2</text>
          <text x="172" y="316">3</text>
          <text x="216" y="316">4</text>
          <text x="260" y="316">5</text>
          <text x="304" y="316">6</text>

          <text x="26" y="260">1</text>
          <text x="26" y="216">2</text>
          <text x="26" y="172">3</text>
          <text x="26" y="128">4</text>
          <text x="26" y="84">5</text>
          <text x="26" y="40">6</text>

          <text x="318" y="316" fill="#334155" font-weight="bold">x</text>
          <text x="26" y="20" fill="#334155" font-weight="bold">y</text>
        </g>

        
        <g id="deltaLines" class="fade-item">
          
          <line x1="84" y1="212" x2="260" y2="212" stroke="#d97706" stroke-width="2.5" stroke-dasharray="4 3" />
          <text x="172" y="232" fill="#d97706" font-size="11.5" font-weight="bold" text-anchor="middle" font-family="system-ui, sans-serif">Δx = 5 − 1 = 4</text>

          
          <line x1="260" y1="212" x2="260" y2="80" stroke="#059669" stroke-width="2.5" stroke-dasharray="4 3" />
          <text x="268" y="150" fill="#059669" font-size="11.5" font-weight="bold" text-anchor="start" font-family="system-ui, sans-serif">Δy = 5 − 2 = 3</text>
        </g>

        
        <g id="vectorLine" class="fade-item">
          <line x1="84" y1="212" x2="254" y2="84" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arrow)" />
        </g>

        
        
        <g id="pointA">
          <circle cx="84" cy="212" r="5" fill="#1e293b" />
          <text x="84" y="196" fill="#1e293b" font-size="11.5" font-weight="bold" text-anchor="middle" font-family="system-ui, sans-serif">A (1, 2)</text>
          <text id="tailLabel" class="fade-item" x="84" y="183" fill="#64748b" font-size="10" font-weight="700" text-anchor="middle" font-family="system-ui, sans-serif">Tail</text>
        </g>

        
        <g id="pointB">
          <circle cx="260" cy="80" r="5" fill="#0284c7" />
          <text x="260" y="64" fill="#0284c7" font-size="11.5" font-weight="bold" text-anchor="middle" font-family="system-ui, sans-serif">B (5, 5)</text>
          <text id="headLabel" class="fade-item" x="260" y="51" fill="#0284c7" font-size="10" font-weight="700" text-anchor="middle" font-family="system-ui, sans-serif">Head</text>
        </g>
      </svg>

      
      <div class="math-card">
        <div class="badge-rule">Head − Tail Rule</div>
        <div id="mathTarget" class="math-content"></div>
      </div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let playing = true;

    const mathSteps = [
      `
        <div class="math-title">Step 1: Identify Points</div>
        <div class="math-line"><span class="point-tag tail-tag">Tail</span> Point <strong>A</strong> = (1, 2)</div>
        <div class="math-line"><span class="point-tag head-tag">Head</span> Point <strong>B</strong> = (5, 5)</div>
      `,
      `
        <div class="math-title">Step 2: Draw Directed Vector</div>
        <div class="math-line" style="font-size: 15px;">
          <span class="vec">AB</span> = Vector from <strong>A</strong> &rarr; <strong>B</strong>
        </div>
        <div style="font-size: 11.5px; color: #64748b; margin-top: 4px;">Tail at A, pointing to Head at B</div>
      `,
      `
        <div class="math-title">Step 3: Horizontal &amp; Vertical Shifts</div>
        <div class="math-calc">
          <div>&Delta;x = x<sub>B</sub> &minus; x<sub>A</sub> = 5 &minus; 1 = <strong class="math-dx">4</strong></div>
          <div>&Delta;y = y<sub>B</sub> &minus; y<sub>A</sub> = 5 &minus; 2 = <strong class="math-dy">3</strong></div>
        </div>
      `,
      `
        <div class="math-title">Step 4: Column Matrix Form</div>
        <div class="matrix-equation">
          <span class="vec">AB</span> =
          <div class="matrix">
            <div class="matrix-row">&Delta;x</div>
            <div class="matrix-row">&Delta;y</div>
          </div>
          =
          <div class="matrix">
            <div class="matrix-row">5 &minus; 1</div>
            <div class="matrix-row">5 &minus; 2</div>
          </div>
          =
          <div class="matrix">
            <div class="matrix-row math-dx">4</div>
            <div class="matrix-row math-dy">3</div>
          </div>
        </div>
      `
    ];

    function renderMath(step) {
      document.getElementById('mathTarget').innerHTML = mathSteps[step];
    }

    function setStep(idx) {
      currentStep = idx;

      // Update button highlights
      document.querySelectorAll('.btn-step').forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });

      // SVG Elements
      const vec = document.getElementById('vectorLine');
      const deltas = document.getElementById('deltaLines');
      const tail = document.getElementById('tailLabel');
      const head = document.getElementById('headLabel');

      tail.classList.toggle('show', true);
      head.classList.toggle('show', true);
      vec.classList.toggle('show', idx >= 1);
      deltas.classList.toggle('show', idx >= 2);

      renderMath(idx);
    }

    function nextStep() {
      setStep((currentStep + 1) % 4);
    }

    function togglePlay() {
      playing = !playing;
      document.getElementById('playBtn').textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (playing) nextStep();
      }, 3500);
    }

    // Init
    setStep(0);
    startTimer();
  </script>
</body>
</html>

Vectors as Matrices with One Column

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Vector and Matrix Representation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    html, body {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #0f172a;
      overflow: hidden;
    }
    .diagram-container {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }
    #canvas-container {
      flex: 1;
      height: 100%;
      position: relative;
      cursor: grab;
      touch-action: none;
    }
    #canvas-container:active {
      cursor: grabbing;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .matrix-panel {
      width: 200px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      z-index: 10;
      background: rgba(255, 255, 255, 0.95);
    }
    .vector-header {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .vector-header span.badge {
      background: #e0e7ff;
      color: #4338ca;
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 12px;
      font-weight: 700;
    }
    .matrix-equation {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 700;
      color: #0f172a;
    }
    .matrix-symbol {
      font-style: italic;
      font-family: "Times New Roman", Times, serif;
    }
    .matrix-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 6px 12px;
      gap: 8px;
      background: #f8fafc;
      border-radius: 8px;
      border-left: 3px solid #1e293b;
      border-right: 3px solid #1e293b;
    }
    .matrix-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 19px;
      font-weight: 800;
      cursor: pointer;
      background: #ffffff;
      border: 1.5px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.18s ease;
    }
    .matrix-row:hover {
      border-color: #cbd5e1;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    .matrix-row.active {
      box-shadow: 0 0 0 2px currentColor;
    }
    .row-x { color: #dc2626; }
    .row-y { color: #059669; }
    .row-z { color: #2563eb; }

    .tag {
      font-size: 11px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 4px;
      letter-spacing: 0.5px;
    }
    .tag-x { background: #fee2e2; color: #b91c1c; }
    .tag-y { background: #d1fae5; color: #047857; }
    .tag-z { background: #dbeafe; color: #1d4ed8; }

    .hint {
      position: absolute;
      bottom: 12px;
      left: 12px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #cbd5e1;
      padding: 4px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      z-index: 5;
    }

    .legend {
      display: flex;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    @media (max-width: 480px) {
      .matrix-panel {
        width: 135px;
        padding: 10px 8px;
        gap: 8px;
      }
      .matrix-row {
        font-size: 16px;
        padding: 3px 6px;
        gap: 6px;
      }
      .vector-header {
        font-size: 13px;
      }
      .matrix-equation {
        font-size: 18px;
      }
      .hint {
        font-size: 11px;
        bottom: 8px;
        left: 8px;
        padding: 3px 8px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <div id="canvas-container">
      <canvas id="render-canvas"></canvas>
    </div>
    <div class="hint">
      <span>✥</span> Drag to rotate 3D view
    </div>
    
    <div class="matrix-panel">
      <div class="vector-header">
        <span>Vector <b class="matrix-symbol">v</b></span>
        <span class="badge">(2, 3, 5)</span>
      </div>
      <div class="matrix-equation">
        <span class="matrix-symbol">v</span> =
        <div class="matrix-wrapper">
          <div class="matrix-row row-x" id="btn-x" title="Click or hover to highlight X component">
            <span>2</span>
            <span class="tag tag-x">X</span>
          </div>
          <div class="matrix-row row-y" id="btn-y" title="Click or hover to highlight Y component">
            <span>3</span>
            <span class="tag tag-y">Y</span>
          </div>
          <div class="matrix-row row-z" id="btn-z" title="Click or hover to highlight Z component">
            <span>5</span>
            <span class="tag tag-z">Z</span>
          </div>
        </div>
      </div>
      <div class="legend">
        <span class="legend-item"><span class="legend-dot" style="background:#dc2626;"></span>X</span>
        <span class="legend-item"><span class="legend-dot" style="background:#059669;"></span>Y</span>
        <span class="legend-item"><span class="legend-dot" style="background:#2563eb;"></span>Z</span>
      </div>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('render-canvas');
    const ctx = canvas.getContext('2d');
    const container = document.getElementById('canvas-container');

    let activeComponent = null; // 'x', 'y', 'z', or null

    // 3D parameters
    // Coordinate definition:
    // X = Red (Right/Left)
    // Y = Green (Vertical Up)
    // Z = Blue (Depth Forward/Backward)
    // Target vector: (2, 3, 5)
    const target = { x: 2, y: 3, z: 5 };

    let rotY = -0.55;  // Azimuth
    let rotX = 0.35;   // Elevation
    let isDragging = false;
    let prevX = 0;
    let prevY = 0;
    let autoRotate = true;
    let lastInteractTime = Date.now();

    function resize() {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const w = container.clientWidth;
      const h = container.clientHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    window.addEventListener('resize', resize);
    resize();

    // 3D to 2D projection
    function project(p, originOffset = { x: 1.2, y: 1.6, z: 2.5 }) {
      const w = container.clientWidth;
      const h = container.clientHeight;

      // Translate relative to center of interest
      const tx = p.x - originOffset.x;
      const ty = p.y - originOffset.y;
      const tz = p.z - originOffset.z;

      // Rotate around Y axis
      const cosY = Math.cos(rotY);
      const sinY = Math.sin(rotY);
      const x1 = tx * cosY + tz * sinY;
      const y1 = ty;
      const z1 = -tx * sinY + tz * cosY;

      // Rotate around X axis
      const cosX = Math.cos(rotX);
      const sinX = Math.sin(rotX);
      const x2 = x1;
      const y2 = y1 * cosX - z1 * sinX;
      const z2 = y1 * sinX + z1 * cosX;

      // Perspective projection
      const cameraDistance = 10;
      const fov = Math.min(w, h) * 0.95;
      const zEff = z2 + cameraDistance;
      const scale = fov / (zEff > 0.1 ? zEff : 0.1);

      return {
        x: (w / 2) + x2 * scale,
        y: (h / 2) - y2 * scale,
        depth: z2,
        scale: scale
      };
    }

    function drawArrow(p1, p2, color, lineWidth = 2.5, headLength = 10) {
      const sp1 = project(p1);
      const sp2 = project(p2);

      ctx.save();
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      ctx.beginPath();
      ctx.moveTo(sp1.x, sp1.y);
      ctx.lineTo(sp2.x, sp2.y);
      ctx.stroke();

      // Draw arrowhead
      const dx = sp2.x - sp1.x;
      const dy = sp2.y - sp1.y;
      const angle = Math.atan2(dy, dx);
      if (Math.hypot(dx, dy) > 5) {
        ctx.beginPath();
        ctx.moveTo(sp2.x, sp2.y);
        ctx.lineTo(
          sp2.x - headLength * Math.cos(angle - Math.PI / 6),
          sp2.y - headLength * Math.sin(angle - Math.PI / 6)
        );
        ctx.lineTo(
          sp2.x - headLength * Math.cos(angle + Math.PI / 6),
          sp2.y - headLength * Math.sin(angle + Math.PI / 6)
        );
        ctx.closePath();
        ctx.fill();
      }
      ctx.restore();
    }

    function drawDashedLine(p1, p2, color, lineWidth = 2, isDim = false) {
      const sp1 = project(p1);
      const sp2 = project(p2);

      ctx.save();
      ctx.strokeStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.lineCap = 'round';
      ctx.globalAlpha = isDim ? 0.2 : 0.95;
      ctx.setLineDash([5, 4]);

      ctx.beginPath();
      ctx.moveTo(sp1.x, sp1.y);
      ctx.lineTo(sp2.x, sp2.y);
      ctx.stroke();
      ctx.restore();
    }

    function drawTextBadge(text, p, bgColor, textColor, subtext) {
      const sp = project(p);
      ctx.save();
      ctx.font = 'bold 12px system-ui, sans-serif';
      const textWidth = ctx.measureText(text).width;
      const pad = 6;
      const boxW = textWidth + pad * 2;
      const boxH = 20;

      ctx.fillStyle = bgColor;
      ctx.shadowColor = 'rgba(0,0,0,0.15)';
      ctx.shadowBlur = 6;
      ctx.shadowOffsetY = 2;

      const rx = sp.x - boxW / 2;
      const ry = sp.y - boxH / 2 - 12;

      ctx.beginPath();
      ctx.roundRect(rx, ry, boxW, boxH, 4);
      ctx.fill();

      ctx.shadowColor = 'transparent';
      ctx.fillStyle = textColor;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, sp.x, ry + boxH / 2);
      ctx.restore();
    }

    function render() {
      const w = container.clientWidth;
      const h = container.clientHeight;
      ctx.clearRect(0, 0, w, h);

      // 1. Grid Floor on XZ plane (Y = 0)
      ctx.save();
      ctx.strokeStyle = '#f1f5f9';
      ctx.lineWidth = 1.2;
      const gridMax = 6;
      for (let i = 0; i <= gridMax; i++) {
        const startX = project({ x: 0, y: 0, z: i });
        const endX = project({ x: gridMax, y: 0, z: i });
        ctx.beginPath();
        ctx.moveTo(startX.x, startX.y);
        ctx.lineTo(endX.x, endX.y);
        ctx.stroke();

        const startZ = project({ x: i, y: 0, z: 0 });
        const endZ = project({ x: i, y: 0, z: gridMax });
        ctx.beginPath();
        ctx.moveTo(startZ.x, startZ.y);
        ctx.lineTo(endZ.x, endZ.y);
        ctx.stroke();
      }
      ctx.restore();

      // 2. Base projection shadow plane / rectangle (0,0,0) -> (2,0,0) -> (2,0,5) -> (0,0,5)
      ctx.save();
      const p00 = project({ x: 0, y: 0, z: 0 });
      const p20 = project({ x: target.x, y: 0, z: 0 });
      const p25 = project({ x: target.x, y: 0, z: target.z });
      const p05 = project({ x: 0, y: 0, z: target.z });

      ctx.fillStyle = 'rgba(99, 102, 241, 0.05)';
      ctx.beginPath();
      ctx.moveTo(p00.x, p00.y);
      ctx.lineTo(p20.x, p20.y);
      ctx.lineTo(p25.x, p25.y);
      ctx.lineTo(p05.x, p05.y);
      ctx.closePath();
      ctx.fill();
      ctx.restore();

      // 3. Coordinate Axes
      const axisLen = 5.2;
      // X Axis (Red)
      const isXActive = activeComponent === 'x';
      const isYActive = activeComponent === 'y';
      const isZActive = activeComponent === 'z';

      const xAlpha = (!activeComponent || isXActive) ? 1.0 : 0.25;
      const yAlpha = (!activeComponent || isYActive) ? 1.0 : 0.25;
      const zAlpha = (!activeComponent || isZActive) ? 1.0 : 0.25;

      ctx.save();
      ctx.globalAlpha = xAlpha;
      drawArrow({ x: 0, y: 0, z: 0 }, { x: axisLen, y: 0, z: 0 }, '#dc2626', isXActive ? 3.5 : 2.5, 10);
      drawTextBadge('X', { x: axisLen + 0.35, y: 0, z: 0 }, '#fee2e2', '#b91c1c');
      ctx.restore();

      // Y Axis (Green, Vertical Up)
      ctx.save();
      ctx.globalAlpha = yAlpha;
      drawArrow({ x: 0, y: 0, z: 0 }, { x: 0, y: axisLen - 0.5, z: 0 }, '#059669', isYActive ? 3.5 : 2.5, 10);
      drawTextBadge('Y', { x: 0, y: axisLen - 0.1, z: 0 }, '#d1fae5', '#047857');
      ctx.restore();

      // Z Axis (Blue, Depth Forward)
      ctx.save();
      ctx.globalAlpha = zAlpha;
      drawArrow({ x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 6.2 }, '#2563eb', isZActive ? 3.5 : 2.5, 10);
      drawTextBadge('Z', { x: 0, y: 0, z: 6.5 }, '#dbeafe', '#1d4ed8');
      ctx.restore();

      // 4. Component Stepped Guide Lines to (2, 3, 5)
      // Step X: (0,0,0) -> (2,0,0)
      const p_origin = { x: 0, y: 0, z: 0 };
      const p_x = { x: target.x, y: 0, z: 0 };
      const p_xz = { x: target.x, y: 0, z: target.z };
      const p_xyz = { x: target.x, y: target.y, z: target.z };

      // Component X segment
      drawDashedLine(p_origin, p_x, '#dc2626', isXActive ? 3.5 : 2.5, activeComponent && !isXActive);
      // Component Z segment (from X to XZ ground position)
      drawDashedLine(p_x, p_xz, '#2563eb', isZActive ? 3.5 : 2.5, activeComponent && !isZActive);
      // Component Y segment (from XZ ground up to point)
      drawDashedLine(p_xz, p_xyz, '#059669', isYActive ? 3.5 : 2.5, activeComponent && !isYActive);

      // Auxiliary dashed lines for depth perception
      drawDashedLine({ x: 0, y: 0, z: target.z }, p_xz, '#94a3b8', 1.2, true);
      drawDashedLine({ x: 0, y: target.y, z: 0 }, { x: 0, y: target.y, z: target.z }, '#94a3b8', 1.2, true);

      // 5. Main Vector Arrow (from origin to (2, 3, 5))
      ctx.save();
      ctx.globalAlpha = (!activeComponent) ? 1.0 : 0.7;
      drawArrow(p_origin, p_xyz, '#6366f1', 3.8, 13);
      ctx.restore();

      // 6. Vector Target Point Marker
      const ptScreen = project(p_xyz);
      ctx.save();
      ctx.beginPath();
      ctx.arc(ptScreen.x, ptScreen.y, 5.5, 0, Math.PI * 2);
      ctx.fillStyle = '#4f46e5';
      ctx.fill();
      ctx.lineWidth = 2.5;
      ctx.strokeStyle = '#ffffff';
      ctx.stroke();

      // Point Label
      drawTextBadge('v = (2, 3, 5)', { x: target.x + 0.1, y: target.y + 0.35, z: target.z }, '#4f46e5', '#ffffff');
      ctx.restore();

      // Origin point dot
      const p0 = project(p_origin);
      ctx.save();
      ctx.beginPath();
      ctx.arc(p0.x, p0.y, 3.5, 0, Math.PI * 2);
      ctx.fillStyle = '#64748b';
      ctx.fill();
      ctx.restore();
    }

    // Interactive Drag Controls
    function onPointerDown(e) {
      isDragging = true;
      autoRotate = false;
      const pt = e.touches ? e.touches[0] : e;
      prevX = pt.clientX;
      prevY = pt.clientY;
      lastInteractTime = Date.now();
    }

    function onPointerMove(e) {
      if (!isDragging) return;
      const pt = e.touches ? e.touches[0] : e;
      const dx = pt.clientX - prevX;
      const dy = pt.clientY - prevY;
      prevX = pt.clientX;
      prevY = pt.clientY;

      rotY += dx * 0.008;
      rotX += dy * 0.008;
      rotX = Math.max(-1.1, Math.min(1.1, rotX));
      lastInteractTime = Date.now();
    }

    function onPointerUp() {
      isDragging = false;
      lastInteractTime = Date.now();
    }

    container.addEventListener('mousedown', onPointerDown);
    window.addEventListener('mousemove', onPointerMove);
    window.addEventListener('mouseup', onPointerUp);

    container.addEventListener('touchstart', onPointerDown, { passive: true });
    window.addEventListener('touchmove', onPointerMove, { passive: true });
    window.addEventListener('touchend', onPointerUp);

    // Matrix Button Interactions
    const btnX = document.getElementById('btn-x');
    const btnY = document.getElementById('btn-y');
    const btnZ = document.getElementById('btn-z');
    const buttons = [
      { el: btnX, key: 'x' },
      { el: btnY, key: 'y' },
      { el: btnZ, key: 'z' }
    ];

    buttons.forEach(({ el, key }) => {
      el.addEventListener('mouseenter', () => {
        activeComponent = key;
        updateActiveButtons();
      });
      el.addEventListener('mouseleave', () => {
        if (!el.dataset.pinned) {
          activeComponent = getPinnedComponent();
          updateActiveButtons();
        }
      });
      el.addEventListener('click', () => {
        if (el.dataset.pinned === 'true') {
          delete el.dataset.pinned;
          activeComponent = null;
        } else {
          buttons.forEach(b => delete b.el.dataset.pinned);
          el.dataset.pinned = 'true';
          activeComponent = key;
        }
        updateActiveButtons();
      });
    });

    function getPinnedComponent() {
      const pinned = buttons.find(b => b.el.dataset.pinned === 'true');
      return pinned ? pinned.key : null;
    }

    function updateActiveButtons() {
      buttons.forEach(b => {
        if (activeComponent === b.key) {
          b.el.classList.add('active');
        } else {
          b.el.classList.remove('active');
        }
      });
    }

    // Animation Loop
    function animate() {
      requestAnimationFrame(animate);

      // Auto-resume subtle rotation after 3 seconds of inactivity
      if (!isDragging && Date.now() - lastInteractTime > 3000) {
        rotY += 0.003;
      }

      render();
    }

    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, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      gap: 20px;
    }

    .case-row {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border-radius: 12px;
      padding: 14px 10px;
      border: 1px solid #e2e8f0;
    }

    .math-expression {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
    }

    .matrix-box {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .mat {
      display: grid;
      place-items: center;
      gap: 3px 8px;
      padding: 4px 6px;
      position: relative;
      background: #ffffff;
      color: #334155;
      font-size: 14px;
    }

    .mat::before, .mat::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 5px;
      border: 1.5px solid #1e2945;
    }
    .mat::before { left: 0; border-right: none; border-radius: 4px 0 0 4px; }
    .mat::after { right: 0; border-left: none; border-radius: 0 4px 4px 0; }

    .mat-2x2 { grid-template-columns: repeat(2, 16px); }
    .mat-2x1 { grid-template-columns: 16px; }
    .mat-1x2 { grid-template-columns: repeat(2, 16px); }

    .op { font-size: 16px; color: #94a3b8; font-weight: 700; }

    /* Dimensions tracking section */
    .dim-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
    }

    .dim-tag {
      display: inline-flex;
      align-items: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 2px 6px;
    }

    .inner-match {
      background: #dcfce7;
      color: #15803d;
      border-radius: 4px;
      padding: 0 3px;
    }

    .inner-clash {
      background: #fee2e2;
      color: #b91c1c;
      border-radius: 4px;
      padding: 0 3px;
    }

    .outer-dim {
      color: #0284c7;
    }

    /* Result pill badge */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 20px;
      padding: 3px 10px;
      margin-top: 8px;
    }

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

    .badge-invalid {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    .connector-svg {
      width: 130px;
      height: 22px;
      margin-top: -2px;
      margin-bottom: -2px;
    }
  </style>
</head>
<body>

  
  <div class="case-row">
    <div class="math-expression">
      
      <div class="mat mat-2x2">
        <span>a</span><span>b</span>
        <span>c</span><span>d</span>
      </div>

      <span class="op">×</span>

      
      <div class="mat mat-2x1">
        <span>x</span>
        <span>y</span>
      </div>

      <span class="op">=</span>

      
      <div class="mat mat-2x1" style="background:#f0fdf4;">
        <span style="color:#15803d;">x'</span>
        <span style="color:#15803d;">y'</span>
      </div>
    </div>

    
    <div class="dim-row">
      <div class="dim-tag">
        <span class="outer-dim">2</span>&thinsp;×&thinsp;<span class="inner-match">2</span>
      </div>
      <div class="dim-tag">
        <span class="inner-match">2</span>&thinsp;×&thinsp;<span class="outer-dim">1</span>
      </div>
      <span class="op" style="font-size:12px;">→</span>
      <div class="dim-tag" style="border-color:#86efac; background:#f0fdf4;">
        <span class="outer-dim">2</span>&thinsp;×&thinsp;<span class="outer-dim">1</span>
      </div>
    </div>

    
    <svg class="connector-svg" viewBox="0 0 130 22">
      <path d="M 44 4 Q 65 18 86 4" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
      <circle cx="65" cy="14" r="2.5" fill="#22c55e"/>
    </svg>

    <div class="status-badge badge-valid">
      ✓ Match: Valid Multiplication
    </div>
  </div>

  
  <div class="case-row">
    <div class="math-expression">
      
      <div class="mat mat-2x2">
        <span>a</span><span>b</span>
        <span>c</span><span>d</span>
      </div>

      <span class="op">×</span>

      
      <div class="mat mat-1x2">
        <span>x</span><span>y</span>
      </div>

      <span class="op">=</span>

      
      <span style="color:#b91c1c; font-size:18px; font-weight:800;">✕</span>
    </div>

    
    <div class="dim-row">
      <div class="dim-tag">
        <span>2</span>&thinsp;×&thinsp;<span class="inner-clash">2</span>
      </div>
      <div class="dim-tag">
        <span class="inner-clash">1</span>&thinsp;×&thinsp;<span>2</span>
      </div>
    </div>

    
    <svg class="connector-svg" viewBox="0 0 130 22">
      <path d="M 44 4 Q 65 18 86 4" fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="3,2" stroke-linecap="round"/>
      <line x1="61" y1="10" x2="69" y2="18" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
      <line x1="69" y1="10" x2="61" y2="18" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
    </svg>

    <div class="status-badge badge-invalid">
      ✕ Mismatch: 2 ≠ 1 (Invalid)
    </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">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .panels-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    .panel-card {
      flex: 1 1 240px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Grid SVG */
    .grid-svg {
      width: 100%;
      max-width: 220px;
      height: auto;
      display: block;
    }

    /* Matrix Styling */
    .matrix-view {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      justify-content: center;
    }

    .matrix-bracket-group {
      display: flex;
      align-items: center;
      position: relative;
    }

    .bracket {
      font-size: 88px;
      font-weight: 200;
      line-height: 1;
      color: #64748b;
      user-select: none;
    }

    .matrix-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 0 4px;
    }

    .matrix-cell {
      font-size: 26px;
      font-weight: 700;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: background-color 0.25s ease, transform 0.25s ease;
      cursor: pointer;
    }

    .cell-x {
      color: #2563eb;
      background: #eff6ff;
      border: 1.5px solid #bfdbfe;
    }
    .cell-y {
      color: #16a34a;
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }

    .labels-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
    }

    .label-row {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 38px;
      cursor: pointer;
    }

    .label-x { color: #2563eb; }
    .label-y { color: #16a34a; }

    /* Interactive highlights */
    .highlight-x .hl-x {
      stroke-width: 3.5px !important;
      filter: drop-shadow(0 0 3px rgba(37,99,235,0.4));
    }
    .highlight-y .hl-y {
      stroke-width: 3.5px !important;
      filter: drop-shadow(0 0 3px rgba(22,163,74,0.4));
    }

    .active-cell {
      transform: scale(1.08);
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Step indicator buttons */
    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .btn-tab {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-tab.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="panels-container" id="mainPanels">
    
    <div class="panel-card">
      <svg class="grid-svg" viewBox="-15 -15 210 210" aria-label="Vector (3, 4) on coordinate plane">
        <defs>
          <marker id="arr-v" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
            <polygon points="0,1 7,4 0,7" fill="#6366f1" />
          </marker>
          <marker id="arr-x" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto">
            <polygon points="0,1 6,3.5 0,6" fill="#2563eb" />
          </marker>
          <marker id="arr-y" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto">
            <polygon points="0,1 6,3.5 0,6" fill="#16a34a" />
          </marker>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1.5">
          <line x1="0" y1="0" x2="180" y2="0" />
          <line x1="0" y1="40" x2="180" y2="40" />
          <line x1="0" y1="80" x2="180" y2="80" />
          <line x1="0" y1="120" x2="180" y2="120" />
          <line x1="0" y1="160" x2="180" y2="160" />

          <line x1="0" y1="0" x2="0" y2="180" />
          <line x1="40" y1="0" x2="40" y2="180" />
          <line x1="80" y1="0" x2="80" y2="180" />
          <line x1="120" y1="0" x2="120" y2="180" />
          <line x1="160" y1="0" x2="160" y2="180" />
        </g>

        
        
        <line x1="20" y1="160" x2="175" y2="160" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="20" y1="160" x2="20" y2="5" stroke="#94a3b8" stroke-width="1.5" />

        
        <text x="20" y="174" font-size="10" fill="#64748b" text-anchor="middle">0</text>
        <text x="55" y="174" font-size="10" fill="#64748b" text-anchor="middle">1</text>
        <text x="90" y="174" font-size="10" fill="#64748b" text-anchor="middle">2</text>
        <text x="125" y="174" font-size="10" fill="#2563eb" font-weight="bold" text-anchor="middle">3</text>
        <text x="160" y="174" font-size="10" fill="#64748b" text-anchor="middle">4</text>

        <text x="10" y="129" font-size="10" fill="#64748b" text-anchor="middle">1</text>
        <text x="10" y="94" font-size="10" fill="#64748b" text-anchor="middle">2</text>
        <text x="10" y="59" font-size="10" fill="#64748b" text-anchor="middle">3</text>
        <text x="10" y="24" font-size="10" fill="#16a34a" font-weight="bold" text-anchor="middle">4</text>

        
        <line id="stepX" class="hl-x" x1="20" y1="160" x2="120" y2="160" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="3 2" marker-end="url(#arr-x)" />
        <text id="txtX" class="hl-x" x="72" y="152" font-size="12" font-weight="bold" fill="#2563eb" text-anchor="middle">+3</text>

        
        <line id="stepY" class="hl-y" x1="125" y1="160" x2="125" y2="25" stroke="#16a34a" stroke-width="2.5" stroke-dasharray="3 2" marker-end="url(#arr-y)" />
        <text id="txtY" class="hl-y" x="140" y="95" font-size="12" font-weight="bold" fill="#16a34a" text-anchor="middle">+4</text>

        
        <line x1="20" y1="160" x2="121" y2="25" stroke="#6366f1" stroke-width="3" marker-end="url(#arr-v)" />

        
        <circle cx="125" cy="20" r="4" fill="#6366f1" />
      </svg>
    </div>

    
    <div class="panel-card">
      <div class="matrix-view">
        <div class="matrix-bracket-group">
          <span class="bracket">[</span>
          <div class="matrix-col">
            <div id="cellX" class="matrix-cell cell-x">3</div>
            <div id="cellY" class="matrix-cell cell-y">4</div>
          </div>
          <span class="bracket">]</span>
        </div>

        <div class="labels-col">
          <div id="lblX" class="label-row label-x">
            <span>← x-component<br><small style="color:#64748b;font-weight:normal">(horizontal)</small></span>
          </div>
          <div id="lblY" class="label-row label-y">
            <span>← y-component<br><small style="color:#64748b;font-weight:normal">(vertical)</small></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-tab active" id="btnBoth">Both</button>
    <button class="btn-tab" id="btnX">x-component (+3)</button>
    <button class="btn-tab" id="btnY">y-component (+4)</button>
  </div>

  <script>
    const panels = document.getElementById('mainPanels');
    const cellX = document.getElementById('cellX');
    const cellY = document.getElementById('cellY');
    const lblX = document.getElementById('lblX');
    const lblY = document.getElementById('lblY');

    const btnBoth = document.getElementById('btnBoth');
    const btnX = document.getElementById('btnX');
    const btnY = document.getElementById('btnY');

    function setMode(mode) {
      panels.classList.remove('highlight-x', 'highlight-y');
      cellX.classList.remove('active-cell');
      cellY.classList.remove('active-cell');
      btnBoth.classList.remove('active');
      btnX.classList.remove('active');
      btnY.classList.remove('active');

      if (mode === 'x') {
        panels.classList.add('highlight-x');
        cellX.classList.add('active-cell');
        btnX.classList.add('active');
      } else if (mode === 'y') {
        panels.classList.add('highlight-y');
        cellY.classList.add('active-cell');
        btnY.classList.add('active');
      } else {
        panels.classList.add('highlight-x', 'highlight-y');
        btnBoth.classList.add('active');
      }
    }

    btnBoth.onclick = () => setMode('both');
    btnX.onclick = () => setMode('x');
    btnY.onclick = () => setMode('y');

    cellX.onclick = () => setMode('x');
    lblX.onclick = () => setMode('x');
    cellY.onclick = () => setMode('y');
    lblY.onclick = () => setMode('y');

    setMode('both');
  </script>
</body>
</html>

HSN.VM.C.11

Aligned learning resources

Related diagrams