displays keystroke in browser, good for recording product demos

show-keystrokes.js

(() => {
  // Remove existing instance
  const existing = document.getElementById('__keystroke_hud__');
  if (existing) existing.remove();

  // HUD container
  const hud = document.createElement('div');
  hud.id = '__keystroke_hud__';
  hud.style.cssText = `
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    padding: 32px 48px;
    background: rgba(0,0,0,0.88);
    color: #ffffff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, monospace;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 18px;
    box-shadow:
      0 30px 80px rgba(0,0,0,0.6),
      inset 0 0 0 2px rgba(255,255,255,0.08);
    z-index: 9999999;
    pointer-events: none;
    opacity: 0;
    transition:
      opacity 120ms ease,
      transform 120ms ease;
    text-align: center;
    white-space: nowrap;
  `;

  document.body.appendChild(hud);

  let hideTimer = null;

  const prettyKey = (e) => {
    const parts = [];
    if (e.ctrlKey) parts.push('CTRL');
    if (e.altKey) parts.push('ALT');
    if (e.shiftKey) parts.push('SHIFT');
    if (e.metaKey) parts.push('META');

    let key = e.key;
    if (key === ' ') key = 'SPACE';
    if (key === 'Escape') key = 'ESC';
    if (key === 'Enter') key = 'ENTER';
    if (key === 'Backspace') key = '⌫';
    if (key.length === 1) key = key.toUpperCase();

    parts.push(key);
    return parts.join('  +  ');
  };

  window.addEventListener('keydown', (e) => {
    hud.textContent = prettyKey(e);

    hud.style.opacity = '1';
    hud.style.transform = 'translate(-50%, -50%) scale(1.05)';

    clearTimeout(hideTimer);
    hideTimer = setTimeout(() => {
      hud.style.opacity = '0';
      hud.style.transform = 'translate(-50%, -50%) scale(0.98)';
    }, 900);
  });
})();