Hand Tracking UI

<div class="fx-0048-root">
  <div class="xr-hand-tracking">
    <button type="button" class="xr-hand-btn" aria-pressed="false">Select</button>
    <button type="button" class="xr-hand-btn" aria-pressed="false">Grab</button>
    <button type="button" class="xr-hand-btn" aria-pressed="false">Point</button>
    <div class="xr-hand-cursor" aria-hidden="true"></div>
  </div>
</div>

.fx-0048-root,
.fx-0048-root *,
.fx-0048-root *::before,
.fx-0048-root *::after {
  box-sizing: border-box
}

.fx-0048-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

/* Site design system variables this code depends on (values from css/style.css — adapt freely). */
.fx-0048-root {
  --text-secondary: #a1a1aa;
}

.xr-hand-tracking {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Touch: a sideways drag moves the ring, a vertical swipe still scrolls the page */
  touch-action: pan-y;
}

.xr-hand-cursor {
  width: 24px;
  height: 24px;
  border: 2px solid #6366f1;
  border-radius: 50%;
  position: absolute;
  /* Starting position: below the row of buttons, not covering one */
  left: calc(50% - 12px);
  top: calc(50% + 34px);
  pointer-events: none;
  transition: transform 0.1s ease;
}

.xr-hand-cursor::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
}

.xr-hand-btn {
  font-family: inherit;
  padding: 10px 20px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 8px;
}

.xr-hand-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  transform: scale(1.05);
}

.xr-hand-btn.active {
  background: rgba(99, 102, 241, 0.4);
  border-color: #6366f1;
}

.xr-hand-btn:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Reduced motion: the ring still follows the pointer, but it no longer squeezes and the buttons no longer grow */
@media (prefers-reduced-motion: reduce) {
  .fx-0048-root .xr-hand-cursor {
    transform: none !important;
    transition: none;
  }

  .fx-0048-root .xr-hand-btn {
    transition: none;
  }

  .fx-0048-root .xr-hand-btn:hover {
    transform: none;
  }
}

(function() {
  // Hand Tracking UI — the ring follows the mouse, the finger or the keyboard focus (fx-0048)
  // One instance per .fx-0048-root: several copies on one page each have their own ring.
  document.querySelectorAll('.fx-0048-root').forEach(function(root) {
    var container = root.querySelector('.xr-hand-tracking');
    var cursor = root.querySelector('.xr-hand-cursor');
    if (!container || !cursor) return;
    var buttons = container.querySelectorAll('.xr-hand-btn');

    // x, y: coordinates in the window (pointer, or center of the focused button)
    function moveTo(x, y) {
      var rect = container.getBoundingClientRect();
      cursor.style.left = (x - rect.left - 12) + 'px';
      cursor.style.top = (y - rect.top - 12) + 'px';
    }

    function follow(e) {
      moveTo(e.clientX, e.clientY);
    }

    container.addEventListener('pointermove', follow);
    container.addEventListener('pointerdown', follow);

    // Keyboard: the ring jumps onto the button that gets the focus (Tab), Enter or Space presses it
    container.addEventListener('focusin', function(e) {
      var btn = e.target.closest('.xr-hand-btn');
      if (!btn || !btn.matches(':focus-visible')) return;
      var r = btn.getBoundingClientRect();
      moveTo(r.left + r.width / 2, r.top + r.height / 2);
    });

    buttons.forEach(function(btn) {
      btn.addEventListener('click', function() {
        buttons.forEach(function(b) {
          b.classList.remove('active');
          b.setAttribute('aria-pressed', 'false');
        });
        btn.classList.add('active');
        btn.setAttribute('aria-pressed', 'true');
        cursor.style.transform = 'scale(0.8)';
        setTimeout(function() {
          cursor.style.transform = 'scale(1)';
        }, 200);
      });
    });
  });
})();