Method draw

app/src/utils/browserStreamCapture.ts:42–122

()

    let frame = 0;

    const draw = () => {
      frame++;
      ctx.clearRect(0, 0, W, H);

      const ACCENT = '#6366f1'; // single color for everything
      const BG = '#eef2ff';     // indigo-50 — tinted to match

      // Background
      ctx.fillStyle = BG;
      ctx.fillRect(0, 0, W, H);

      const cx = W / 2, cy = H / 2 - 10;

      // Pulse rings — crisp, same accent at low opacity
      for (let i = 0; i < 2; i++) {
        const phase = (frame / 100 + i * 0.5) % 1;
        const radius = 70 + phase * 90;
        const alpha = (1 - phase) * 0.12;
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(99, 102, 241, ${alpha})`;
        ctx.lineWidth = 1.5;
        ctx.stroke();
      }

      // Person figure — same accent color
      ctx.fillStyle = ACCENT;

      // Head
      ctx.beginPath();
      ctx.arc(cx, cy - 38, 28, 0, Math.PI * 2);
      ctx.fill();

      // Body
      const bw = 52, bh = 62, bx = cx - bw / 2, by = cy - 6;
      const r = 14;
      ctx.beginPath();
      ctx.moveTo(bx + r, by);
      ctx.lineTo(bx + bw - r, by);
      ctx.quadraticCurveTo(bx + bw, by, bx + bw, by + r);
      ctx.lineTo(bx + bw, by + bh - r);
      ctx.quadraticCurveTo(bx + bw, by + bh, bx + bw - r, by + bh);
      ctx.lineTo(bx + r, by + bh);
      ctx.quadraticCurveTo(bx, by + bh, bx, by + bh - r);
      ctx.lineTo(bx, by + r);
      ctx.quadraticCurveTo(bx, by, bx + r, by);
      ctx.fill();

      // "a person" label above with arrow pointing down
      const labelY = cy - 105;
      ctx.fillStyle = ACCENT;
      ctx.font = 'italic 600 13px -apple-system, BlinkMacSystemFont, sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('a person', cx, labelY);

      const arrowTipY = cy - 70;
      ctx.strokeStyle = ACCENT;