Show HN: Microgestures – Hand-tracking for WebXR with tap and swipe gestures

3 hours ago 1

Microgestures is a Meta’s OpenXR hand-tracking extension, available on Quest 2/Pro/3/3S and supported only in Quest Browser, that exposes five boolean inputs per hand—a thumb tap plus four D-pad-like swipes along the index finger—for low-effort navigation, selection, and scrolling without big arm movements.

The five boolean input states per hand are the following: swipe-left, swipe-right, swipe-forward, swipe-backward, tap-thumb. Additionally, the left hand exposes a menu gesture activated by a pinch.

The image below shows how to perform each microgesture:

To enable microgestures, the online controllers repository must be disabled until the oculus-hand profile becomes available through the WebXR controller profiles repository. With the online repository disabled, the profile will be loaded locally, allowing applications to access the Oculus hand input definitions.

Then you can use the Microgestures component by passing gesture callbacks via props.

💡

You don’t need to manage event listeners yourself—Reactylon subscribes on mount and cleans up on unmount, preventing dangling handlers or memory leaks.

The following example displays the microgesture you just performed on screen.

🥽

To experience the following example, an XR headset is required.

<> <Microgestures onMenu={() => setMicrogesture('menu')} onTapThumb={() => setMicrogesture('tap-thumb')} onSwipeLeft={() => setMicrogesture('swipe-left')} onSwipeRight={() => setMicrogesture('swipe-right')} onSwipeForward={() => setMicrogesture('swipe-forward')} onSwipeBackward={() => setMicrogesture('swipe-backward')} /> <plane name='plane' position={new Vector3(0, 1, 2)} /> <advancedDynamicTexture kind='createForMesh' createForMesh={{ mesh: 'plane' }}> <textBlock name='microgesture' text={microgesture} color='white' fontSize={100} /> </advancedDynamicTexture> </>