Hand controls

Add it

Declare it in prototir.json at the root of your ZIP. Prototir checks the version at upload and adds it to the page's import map, with what it brings along.

{
  "modules": [
    "prefab-hand-controls@0.1.2"
  ],
  "permissions": [
    "camera"
  ]
}

Then import it by name, from 'prefab-hand-controls', as you would from npm.

Smallest example

import { createHandControls } from 'prefab-hand-controls';

const hand = await createHandControls({
  onMove({ x, y }) {
    cursor.style.left = `${x * 100}%`;
    cursor.style.top = `${y * 100}%`;
  },
  onPinch({ down }) {
    down ? grab() : release();
  }
});

API

createHandControls(options)

onMove({ x, y })

Index fingertip position, 0..1 of the view, smoothed.

onPinch({ x, y, down })

Thumb-to-index pinch, fired only when it starts or ends.

pinchThreshold = 0.07, numHands = 1, mirror = true

Pinch distance, hands to track, and whether to mirror like a selfie view.

smoothing = 0.5

0 is raw, closer to 1 is steadier but lags. Only the reported position is smoothed; pinch detection uses raw landmarks.

delegate = 'CPU', showPreview = true, video, mount

'GPU' is faster where WebGL is available. showPreview draws the camera image; video passes getUserMedia constraints.

The returned object

video, stream, landmarker

The camera element, stream and MediaPipe landmarker.

destroy()

Stops the camera and the model.

Good to know

• The hand model ships with the module, so detection makes no external network calls.

Versions

Every version stays available, so a prototype keeps working exactly as published. Declare the one you tested with.

• prefab-hand-controls@0.1.2
• prefab-hand-controls@0.1.1
• prefab-hand-controls@0.1.0