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

    /* Top Title Badge */
    .title-badge {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }
    .title-badge span.accent {
      color: #2563eb;
    }

    /* Scene Area */
    .scene {
      position: relative;
      width: 100%;
      max-width: 480px;
      flex: 1;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    /* Overhead Camera */
    .camera-hub {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      margin-top: 4px;
    }
    .camera-bubble {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #2563eb;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .camera-bubble:hover {
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
    }
    .camera-tag {
      margin-top: 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #2563eb;
      background: #eff6ff;
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid #bfdbfe;
    }

    /* SVG Sightlines Layer */
    .sightlines-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .beam-area {
      fill: url(#beamGrad);
      opacity: 0.18;
      transition: opacity 0.3s ease;
    }

    .sightline {
      stroke: #3b82f6;
      stroke-width: 2.5;
      stroke-dasharray: 6, 6;
      animation: dash 1.4s linear infinite;
      transition: stroke 0.3s ease, opacity 0.3s ease, stroke-width 0.3s ease;
    }
    @keyframes dash {
      to {
        stroke-dashoffset: -24;
      }
    }

    /* Inactive sightline dimming */
    .sightline.dimmed {
      opacity: 0.15;
      stroke: #94a3b8;
    }
    .sightline.highlighted {
      stroke: #1d4ed8;
      stroke-width: 3.5;
      opacity: 1;
    }

    /* Characters Grid */
    .characters-row {
      position: relative;
      z-index: 10;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      padding-bottom: 4px;
    }

    .char-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }
    .char-card.active {
      border-color: #2563eb;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    }
    .char-card.dimmed {
      opacity: 0.45;
    }

    .char-avatar {
      font-size: 28px;
      line-height: 1;
      margin-bottom: 6px;
    }
    .char-name {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
    }
    .char-detail {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
      font-weight: 500;
    }

    /* Stage Pill for Leo */
    .badge-sub {
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      background: #f1f5f9;
      color: #475569;
      margin-top: 3px;
      text-transform: uppercase;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 6px;
      margin-top: 6px;
      z-index: 10;
    }
    .btn-scope {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-scope.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
  </style>
</head>
<body>

  
  <div class="title-badge">
    <span>Third-Person:</span>
    <span class="accent">Wide Scope</span>
  </div>

  
  <div class="scene" id="sceneContainer">
    
    
    <div class="camera-hub" id="cameraHub" title="Overhead Narrator View">
      <div class="camera-bubble">📹</div>
      <div class="camera-tag">Narrator</div>
    </div>

    
    <svg class="sightlines-svg" id="sightlinesSvg" viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="beamGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.05" />
        </linearGradient>
      </defs>
      
      
      <polygon id="visionCone" class="beam-area" points="50,16 16,84 84,84" />

      
      <line id="lineLeo" class="sightline" x1="50" y1="16" x2="18" y2="76" />
      <line id="lineMaya" class="sightline" x1="50" y1="16" x2="50" y2="76" />
      <line id="lineClark" class="sightline" x1="50" y1="16" x2="82" y2="76" />
    </svg>

    
    <div class="characters-row">
      
      <div class="char-card active" data-id="leo">
        <div class="char-avatar">😰</div>
        <div class="char-name">Leo</div>
        <div class="char-detail">Sweating</div>
        <div class="badge-sub">Stage</div>
      </div>

      
      <div class="char-card active" data-id="maya">
        <div class="char-avatar">😊</div>
        <div class="char-name">Maya</div>
        <div class="char-detail">Smiling</div>
        <div class="badge-sub">Row 1</div>
      </div>

      
      <div class="char-card active" data-id="clark">
        <div class="char-avatar">⏱️</div>
        <div class="char-name">Mr. Clark</div>
        <div class="char-detail">Timing</div>
        <div class="badge-sub">Back</div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn-scope active" id="btnAll">Sees All 3</button>
    <button class="btn-scope" id="btnLeo">Leo</button>
    <button class="btn-scope" id="btnMaya">Maya</button>
    <button class="btn-scope" id="btnClark">Mr. Clark</button>
  </div>

  <script>
    const cards = document.querySelectorAll('.char-card');
    const lines = {
      leo: document.getElementById('lineLeo'),
      maya: document.getElementById('lineMaya'),
      clark: document.getElementById('lineClark')
    };
    const cone = document.getElementById('visionCone');
    const buttons = {
      all: document.getElementById('btnAll'),
      leo: document.getElementById('btnLeo'),
      maya: document.getElementById('btnMaya'),
      clark: document.getElementById('btnClark')
    };

    function setFocus(target) {
      // Update buttons
      Object.keys(buttons).forEach(k => {
        buttons[k].classList.toggle('active', k === target);
      });

      if (target === 'all') {
        cone.style.opacity = '0.18';
        cards.forEach(c => {
          c.classList.remove('dimmed');
          c.classList.add('active');
        });
        Object.values(lines).forEach(l => {
          l.className.baseVal = 'sightline';
        });
      } else {
        cone.style.opacity = '0.04';
        cards.forEach(c => {
          const match = c.dataset.id === target;
          c.classList.toggle('active', match);
          c.classList.toggle('dimmed', !match);
        });
        Object.entries(lines).forEach(([id, line]) => {
          if (id === target) {
            line.className.baseVal = 'sightline highlighted';
          } else {
            line.className.baseVal = 'sightline dimmed';
          }
        });
      }
    }

    // Card Clicks
    cards.forEach(card => {
      card.addEventListener('click', () => {
        const id = card.dataset.id;
        const currentActiveBtn = document.querySelector('.btn-scope.active');
        if (currentActiveBtn && currentActiveBtn.id === 'btn' + id.charAt(0).toUpperCase() + id.slice(1)) {
          setFocus('all');
        } else {
          setFocus(id);
        }
      });
    });

    // Camera Hub Click
    document.getElementById('cameraHub').addEventListener('click', () => setFocus('all'));

    // Buttons
    buttons.all.addEventListener('click', () => setFocus('all'));
    buttons.leo.addEventListener('click', () => setFocus('leo'));
    buttons.maya.addEventListener('click', () => setFocus('maya'));
    buttons.clark.addEventListener('click', () => setFocus('clark'));
  </script>
</body>
</html>

Comparing the Effects of First- and Third-Person Point of View

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Segmented Controls */
    .controls {
      display: flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
      gap: 2px;
      margin-bottom: 8px;
    }

    .btn-toggle {
      border: none;
      background: transparent;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    /* Side-by-side Grid */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
      align-items: stretch;
    }

    /* POV Columns */
    .pov-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      border-radius: 12px;
      background: #f8fafc;
      transition: opacity 0.3s ease, border-color 0.3s ease;
      border: 2px solid transparent;
    }

    .pov-col.first {
      --accent: #2563eb;
      --accent-bg: #eff6ff;
    }

    .pov-col.third {
      --accent: #059669;
      --accent-bg: #ecfdf5;
    }

    .pov-col.dimmed {
      opacity: 0.3;
    }

    .pov-col.highlighted {
      border-color: var(--accent);
      background: var(--accent-bg);
    }

    /* Header Chips */
    .header-group {
      text-align: center;
      margin-bottom: 8px;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .pronoun-badge {
      display: inline-block;
      margin-top: 4px;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 99px;
      background: #ffffff;
      color: var(--accent);
      border: 1px solid currentColor;
    }

    /* Visual Lens Display */
    .lens-graphic {
      width: 100%;
      height: 100px;
      margin: 4px 0 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      max-width: 160px;
    }

    /* Metric Bars */
    .metric-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
    }

    .metric-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .metric-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
    }

    .meter-track {
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
    }

    .meter-fill {
      height: 100%;
      border-radius: 4px;
      background: var(--accent);
      transition: width 0.4s ease;
    }

    @media (max-width: 480px) {
      .title { font-size: 13px; }
      .pronoun-badge { font-size: 10px; }
      .lens-graphic { height: 80px; }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-toggle active" data-view="both">Both Lenses</button>
    <button class="btn-toggle" data-view="first">🔬 1st Person</button>
    <button class="btn-toggle" data-view="third">🔭 3rd Person</button>
  </div>

  
  <div class="grid">
    
    
    <div class="pov-col first" id="col-first">
      <div class="header-group">
        <div class="title">🔬 Microscope</div>
        <div class="pronoun-badge">I · Me · We</div>
      </div>

      <div class="lens-graphic">
        <svg viewBox="0 0 160 100">
          <circle cx="80" cy="50" r="42" fill="#dbeafe" stroke="#2563eb" stroke-width="3" stroke-dasharray="4 2"/>
          <circle cx="80" cy="50" r="32" fill="#bfdbfe"/>
          
          <circle cx="80" cy="40" r="10" fill="#1d4ed8"/>
          <path d="M66 65 C66 52 94 52 94 65 Z" fill="#1d4ed8"/>
          
          <circle cx="80" cy="52" r="4" fill="#fbbf24"/>
          
          <line x1="80" y1="12" x2="80" y2="24" stroke="#2563eb" stroke-width="2"/>
          <line x1="80" y1="76" x2="80" y2="88" stroke="#2563eb" stroke-width="2"/>
          <line x1="42" y1="50" x2="54" y2="50" stroke="#2563eb" stroke-width="2"/>
          <line x1="106" y1="50" x2="118" y2="50" stroke="#2563eb" stroke-width="2"/>
        </svg>
      </div>

      <div class="metric-container">
        <div class="metric-row">
          <div class="metric-labels">
            <span>Intimacy</span>
            <span>Deep (100%)</span>
          </div>
          <div class="meter-track">
            <div class="meter-fill" style="width: 100%;"></div>
          </div>
        </div>

        <div class="metric-row">
          <div class="metric-labels">
            <span>Field of View</span>
            <span>Narrow (20%)</span>
          </div>
          <div class="meter-track">
            <div class="meter-fill" style="width: 20%;"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="pov-col third" id="col-third">
      <div class="header-group">
        <div class="title">🔭 Telescope</div>
        <div class="pronoun-badge">He · She · They</div>
      </div>

      <div class="lens-graphic">
        <svg viewBox="0 0 160 100">
          <rect x="15" y="15" width="130" height="70" rx="8" fill="#d1fae5" stroke="#059669" stroke-width="2"/>
          
          <line x1="15" y1="65" x2="145" y2="65" stroke="#a7f3d0" stroke-width="2"/>
          
          
          <circle cx="40" cy="46" r="6" fill="#047857"/>
          <path d="M32 65 C32 55 48 55 48 65 Z" fill="#047857"/>
          
          
          <circle cx="80" cy="42" r="7" fill="#047857"/>
          <path d="M70 65 C70 52 90 52 90 65 Z" fill="#047857"/>
          
          
          <circle cx="120" cy="48" r="5" fill="#047857"/>
          <path d="M113 65 C113 56 127 56 127 65 Z" fill="#047857"/>

          
          <path d="M20 20 L80 40 L140 20" fill="none" stroke="#059669" stroke-width="1.5" stroke-dasharray="3 3"/>
        </svg>
      </div>

      <div class="metric-container">
        <div class="metric-row">
          <div class="metric-labels">
            <span>Intimacy</span>
            <span>Flexible (50%)</span>
          </div>
          <div class="meter-track">
            <div class="meter-fill" style="width: 50%;"></div>
          </div>
        </div>

        <div class="metric-row">
          <div class="metric-labels">
            <span>Field of View</span>
            <span>Wide (100%)</span>
          </div>
          <div class="meter-track">
            <div class="meter-fill" style="width: 100%;"></div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <script>
    const buttons = document.querySelectorAll('.btn-toggle');
    const colFirst = document.getElementById('col-first');
    const colThird = document.getElementById('col-third');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const view = btn.dataset.view;
        if (view === 'both') {
          colFirst.classList.remove('dimmed', 'highlighted');
          colThird.classList.remove('dimmed', 'highlighted');
        } else if (view === 'first') {
          colFirst.classList.add('highlighted');
          colFirst.classList.remove('dimmed');
          colThird.classList.add('dimmed');
          colThird.classList.remove('highlighted');
        } else if (view === 'third') {
          colThird.classList.add('highlighted');
          colThird.classList.remove('dimmed');
          colFirst.classList.add('dimmed');
          colFirst.classList.remove('highlighted');
        }
      });
    });
  </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;
      user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 10px;
    }
    .header-tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #1e2945;
      background: #e2e8f0;
      padding: 5px 12px;
      border-radius: 20px;
      text-align: center;
    }
    .header-sub {
      font-size: 12px;
      color: #3b82f6;
      font-weight: 600;
      margin-top: 3px;
      text-align: center;
    }
    .stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 240px;
      margin: 6px 0;
      background: #0f172a;
      border-radius: 16px;
      overflow: hidden;
    }
    .svg-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .thought-bubble {
      position: absolute;
      top: 14px;
      left: 12px;
      max-width: 190px;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 10px;
      border-radius: 12px;
      font-size: 11.5px;
      line-height: 1.35;
      font-style: italic;
      font-weight: 600;
      box-shadow: 0 0 16px rgba(59, 130, 246, 0.45), 0 4px 6px rgba(0,0,0,0.2);
      border: 2px solid #3b82f6;
      z-index: 10;
      transition: opacity 0.3s ease;
    }
    .thought-bubble::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 28px;
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 8px solid #3b82f6;
    }
    .thought-label {
      position: absolute;
      top: -9px;
      left: 8px;
      background: #3b82f6;
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 1px 6px;
      border-radius: 6px;
      font-style: normal;
      letter-spacing: 0.3px;
    }
    .character-node {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 5;
    }
    .char-boy {
      top: 108px;
      left: 36px;
    }
    .char-maya {
      top: 108px;
      right: 32px;
      transition: opacity 0.4s ease;
    }
    .avatar-wrap {
      position: relative;
      font-size: 38px;
      line-height: 1;
    }
    .backpack {
      position: absolute;
      bottom: 2px;
      left: -6px;
      font-size: 16px;
    }
    .sketchbook {
      position: absolute;
      bottom: 0px;
      right: -8px;
      font-size: 18px;
    }
    .char-tag {
      font-size: 10.5px;
      font-weight: 700;
      margin-top: 4px;
      padding: 2px 7px;
      border-radius: 6px;
      color: #fff;
    }
    .tag-boy { background: #3b82f6; }
    .tag-maya { background: #64748b; }
    
    .blind-banner {
      position: absolute;
      bottom: 12px;
      right: 12px;
      background: rgba(15, 23, 42, 0.88);
      border: 1px solid #475569;
      color: #94a3b8;
      font-size: 10.5px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      z-index: 8;
      transition: all 0.3s ease;
    }
    .vision-banner {
      position: absolute;
      bottom: 12px;
      left: 140px;
      background: rgba(59, 130, 246, 0.2);
      border: 1px solid rgba(59, 130, 246, 0.5);
      color: #93c5fd;
      font-size: 10.5px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      z-index: 8;
    }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 460px;
    }
    .toggle-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #1e2945;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .toggle-btn.active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    }
  </style>
</head>
<body>

  <div>
    <div class="header-tag">First-Person Point of View</div>
    <div class="header-sub">High Intimacy (Inside One Mind) • Limited View</div>
  </div>

  <div class="stage" id="stage">
    <svg class="svg-layer" viewBox="0 0 460 240" preserveAspectRatio="none">
      <defs>
        
        <linearGradient id="beamGrad" x1="0%" y1="50%" x2="100%" y2="50%">
          <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.8" />
          <stop offset="60%" stop-color="#60a5fa" stop-opacity="0.3" />
          <stop offset="100%" stop-color="#93c5fd" stop-opacity="0.02" />
        </linearGradient>
        
        <pattern id="blindHatch" width="8" height="8" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="8" stroke="#334155" stroke-width="1.5" />
        </pattern>
      </defs>

      
      <rect id="blindRect" x="250" y="0" width="210" height="240" fill="url(#blindHatch)" opacity="0.65" />
      <line id="blindLine" x1="250" y1="0" x2="250" y2="240" stroke="#475569" stroke-width="1.5" stroke-dasharray="4 4" />

      
      <polygon id="visionCone" points="65,125 250,55 250,195" fill="url(#beamGrad)" />
      
      
      <line x1="65" y1="125" x2="250" y2="55" stroke="#60a5fa" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.8" />
      <line x1="65" y1="125" x2="250" y2="195" stroke="#60a5fa" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.8" />
      
      
      <circle cx="65" cy="125" r="4" fill="#60a5fa" />
      <circle cx="65" cy="125" r="8" fill="none" stroke="#60a5fa" stroke-width="1.5" opacity="0.5" />
    </svg>

    
    <div class="thought-bubble" id="thoughtBubble">
      <span class="thought-label">Inner Thoughts</span>
      “My heart pounded. Did Maya take my sketchbook?”
    </div>

    
    <div class="character-node char-boy">
      <div class="avatar-wrap">
        👦
        <span class="backpack">🎒</span>
      </div>
      <span class="char-tag tag-boy">"I" (Narrator)</span>
    </div>

    
    <div class="character-node char-maya" id="mayaChar">
      <div class="avatar-wrap">
        👧
        <span class="sketchbook">📖</span>
      </div>
      <span class="char-tag tag-maya" id="mayaTag">Maya</span>
    </div>

    <div class="vision-banner">👁️ Visible Field</div>
    <div class="blind-banner" id="blindBanner">🔒 Hidden from "I"</div>
  </div>

  
  <div class="controls">
    <button class="toggle-btn active" id="btnFirstPerson">
      <span>👤</span> What Narrator Knows
    </button>
    <button class="toggle-btn" id="btnOmniscient">
      <span>🌐</span> Full Outside Reality
    </button>
  </div>

  <script>
    const btnFirstPerson = document.getElementById('btnFirstPerson');
    const btnOmniscient = document.getElementById('btnOmniscient');
    const mayaChar = document.getElementById('mayaChar');
    const blindRect = document.getElementById('blindRect');
    const blindBanner = document.getElementById('blindBanner');
    const thoughtBubble = document.getElementById('thoughtBubble');

    function setMode(mode) {
      if (mode === 'first') {
        btnFirstPerson.classList.add('active');
        btnOmniscient.classList.remove('active');
        mayaChar.style.opacity = '0.15';
        blindRect.style.opacity = '0.75';
        blindBanner.textContent = '🔒 Hidden from "I"';
        blindBanner.style.borderColor = '#475569';
        blindBanner.style.color = '#94a3b8';
        thoughtBubble.style.opacity = '1';
        thoughtBubble.style.transform = 'scale(1)';
      } else {
        btnOmniscient.classList.add('active');
        btnFirstPerson.classList.remove('active');
        mayaChar.style.opacity = '1';
        blindRect.style.opacity = '0.15';
        blindBanner.textContent = '💡 Maya has the book!';
        blindBanner.style.borderColor = '#3b82f6';
        blindBanner.style.color = '#93c5fd';
      }
    }

    btnFirstPerson.addEventListener('click', () => setMode('first'));
    btnOmniscient.addEventListener('click', () => setMode('omni'));

    // Start in First Person POV
    setMode('first');
  </script>
</body>
</html>

OGE.5.RL.5

Aligned learning resources

Related diagrams