Wobblesam Fixement · Demo

Move your pointer. They're watching.

Each letter reads where the pointer is and sets its own Gaze Horizontal (GAZX) and Gaze Vertical (GAZY) to look at it. A few lines of JavaScript and two CSS custom properties do the work.

A a B b C c D d E e G g O o P p Q q U u 0 6 8 9

Source

Take it with you.

Three files. Put the font (WobblesamFixement-VF.woff2) beside them and open index.html, after adding links to style.css and script.js.

HTML · index.html

<div class="gaze-grid" aria-label="Letters that watch the pointer">
  <span>A</span>
  <span>a</span>
  <span>B</span>
  <span>b</span>
  <span>C</span>
  <span>c</span>
  <span>D</span>
  <span>d</span>
  <span>E</span>
  <span>e</span>
  <span>G</span>
  <span>g</span>
  <span>O</span>
  <span>o</span>
  <span>P</span>
  <span>p</span>
  <span>Q</span>
  <span>q</span>
  <span>U</span>
  <span>u</span>
  <span>0</span>
  <span>6</span>
  <span>8</span>
  <span>9</span>
</div>

CSS · style.css

/* Download Wobblesam Fixement and put the variable font next to this file. */
@font-face {
  font-family: 'Wobblesam Fixement VF';
  src: url('WobblesamFixement-VF.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

.gaze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  font-family: 'Wobblesam Fixement VF', sans-serif;
  font-size: 4rem;
  line-height: 1;
  text-align: center;
}

/* script.js sets --gaze-x and --gaze-y on each letter, -100 to 100. */
.gaze-grid span {
  --gaze-x: 0;
  --gaze-y: 0;
  font-variation-settings: 'wght' 400, 'GAZX' var(--gaze-x), 'GAZY' var(--gaze-y);
}

JS · script.js

// Aim every letter's pupils at the pointer through the GAZX and GAZY axes.
(() => {
  const grid = document.querySelector('.gaze-grid');
  if (!grid) return;
  const letters = [...grid.querySelectorAll('span')];
  let pointer = null;
  let frame = 0;

  function aim() {
    frame = 0;
    for (const letter of letters) {
      let x = 0;
      let y = 0;
      if (pointer) {
        const box = letter.getBoundingClientRect();
        const dx = pointer.x - (box.left + box.width / 2);
        const dy = box.top + box.height / 2 - pointer.y; // GAZY is positive up
        const edge = Math.max(Math.abs(dx), Math.abs(dy));
        if (edge > 0) {
          // Full reach once the pointer is a letter's height away. The font
          // maps the square of axis values onto a disc, so the direction is
          // scaled to the square's edge, not to unit length.
          const reach = Math.min(1, Math.hypot(dx, dy) / box.height);
          x = (dx / edge) * reach * 100;
          y = (dy / edge) * reach * 100;
        }
      }
      letter.style.setProperty('--gaze-x', x.toFixed(1));
      letter.style.setProperty('--gaze-y', y.toFixed(1));
    }
  }

  function schedule() {
    if (!frame) frame = requestAnimationFrame(aim);
  }

  function onMove(event) {
    // Stop listening once the grid is gone from the page.
    if (!grid.isConnected) {
      window.removeEventListener('pointermove', onMove);
      document.removeEventListener('pointerleave', onLeave);
      return;
    }
    pointer = { x: event.clientX, y: event.clientY };
    schedule();
  }

  // Look straight ahead again when the pointer leaves the window.
  function onLeave() {
    pointer = null;
    schedule();
  }

  window.addEventListener('pointermove', onMove);
  document.addEventListener('pointerleave', onLeave);
})();