Under the hood

Reads navigator/screen/Intl signals client-side and hashes a small canvas render. No network, no storage — purely demonstrative.

'use client';

import * as React from 'react';

function canvasHash(): string {
  try {
    const c = document.createElement('canvas');
    c.width = 240;
    c.height = 60;
    const ctx = c.getContext('2d');
    if (!ctx) return 'n/a';
    ctx.textBaseline = 'top';
    ctx.font = "16px 'Helvetica Neue', Arial";
    ctx.fillStyle = '#c2453a';
    ctx.fillRect(2, 2, 120, 24);
    ctx.fillStyle = '#14110b';
    ctx.fillText('kaspirius ✦ 0123', 8, 6);
    const data = c.toDataURL();
    let h = 0;
    for (let i = 0; i < data.length; i++) h = (h * 31 + data.charCodeAt(i)) >>> 0;
    return h.toString(16).padStart(8, '0');
  } catch {
    return 'blocked';
  }
}

export function FingerprintGame() {
  const [rows, setRows] = React.useState<[string, string][]>([]);

  React.useEffect(() => {
    const n = navigator as Navigator & { deviceMemory?: number };
    const r: [string, string][] = [
      ['User agent', navigator.userAgent],
      ['Platform', navigator.platform || '—'],
      ['Languages', (navigator.languages ?? [navigator.language]).join(', ')],
      ['Screen', `${screen.width}×${screen.height} @ ${window.devicePixelRatio}x`],
      ['Viewport', `${window.innerWidth}×${window.innerHeight}`],
      ['Color depth', `${screen.colorDepth}-bit`],
      ['Timezone', Intl.DateTimeFormat().resolvedOptions().timeZone],
      ['CPU cores', String(navigator.hardwareConcurrency ?? '—')],
      ['Device memory', n.deviceMemory ? `${n.deviceMemory} GB` : '—'],
      ['Touch points', String(navigator.maxTouchPoints ?? 0)],
      ['Cookies enabled', String(navigator.cookieEnabled)],
      ['Reduced motion', String(matchMedia('(prefers-reduced-motion: reduce)').matches)],
      ['Canvas hash', canvasHash()],
    ];
    setRows(r);
  }, []);

  return (
    <div className="w-full max-w-xl">
      <p className="mb-5 text-center text-sm leading-relaxed opacity-70">
        Everything below was read from your browser just now. None of it left this page — it is all
        client-side, shown to make the point that it&apos;s readable.
      </p>
      <dl className="grid grid-cols-[10rem_1fr] gap-x-5 gap-y-2 font-mono text-[13px]">
        {rows.length === 0 ? (
          <div className="opacity-50">reading…</div>
        ) : (
          rows.map(([k, v]) => (
            <React.Fragment key={k}>
              <dt className="opacity-55">{k}</dt>
              <dd className="break-words">{v}</dd>
            </React.Fragment>
          ))
        )}
      </dl>
    </div>
  );
}