Super Hands

Super Hands is an open-source A-Frame component library that adds gesture-based interactions — hover, grab, stretch, and drag-drop — using tracked controllers, touch, or mouse input. It takes collision and button events from devices and converts them into gesture events emitted to target entities, making interactivity consistent across desktop, mobile, and VR headsets. The package is distributed on npm as super-hands.

What makes Super Hands stand out?

Super Hands differentiates itself by extracting gesture interpretation into a reusable core while keeping reactions modular, so the same interaction patterns work across input devices.

• Unified gesture API — A single super-hands core component interprets collisions and button presses into hover, grab, stretch, and drag-drop gesture events, so developers don't wire device-specific events.
• Reaction components included — Built-in hoverable, clickable, grabbable, stretchable, draggable, and droppable components let you add common behavior by adding a component attribute to any entity.
• Device coverage — Works with 6DOF tracked controllers (Vive, Oculus Touch, Windows MR), 3DOF (GearVR, Daydream), gaze interaction, and mouse/touch fallbacks for desktop and mobile.
• Physics integration — grabbable and stretchable support aframe-physics-system and Ammo.js physics, using constraints for two-handed grabs and rescaling physics body shapes.
• Global event handlers — Super Hands triggers standard HTML mouse events like onmouseover, onmousedown, onclick, and ondrop on entities, enabling reaction without custom components.
• Collider flexibility — Works with raycaster, aframe-extras sphere-collider, and physics colliders by allowing configurable collision event names.
• Version compatibility table — The README lists which super-hands versions pair with specific A-Frame and aframe-extras releases, including a workaround for A-Frame 1.5.0's built-in grabbable component.

Who should use Super Hands?

Super Hands is built for anyone creating interactive 3D scenes in A-Frame who wants to avoid rewriting controller event logic for each VR platform.

• A-Frame developers building VR or WebXR scenes need a device-agnostic way to add hover, grab, and drag interactions without writing per-controller event handling.
• Web developers prototyping 3D product configurators can use grabbable and stretchable to let users pick up, rotate, and resize objects in a browser.
• VR game makers can use droppable and draggable for inventory or quest-style interactions, and build on the custom event acceptance/rejection system for complex UI.

What can you do with Super Hands?

The gesture set covers the most common 3D interactions, giving you building blocks for a wide range of applications.

• Training simulators: Add grabbable to tools and droppable to target zones so trainees can physically pick up and place objects in VR.
• Interactive presentations: Use hoverable and clickable on 3D slides or hotspots to create gaze-based navigation for Cardboard or mobile viewers.
• Data visualization: Allow users to grab, stretch, and drop 3D chart elements with two-handed controllers for exploration.

How does Super Hands work?

Super Hands acts as a gesture interpreter: it listens for collision events and button presses, converts them into semantic gesture events, and dispatches those events to the appropriate target entities. Start with a controller entity that includes a collision detection component such as sphere-collider or raycaster, then place super-hands on the same entity. Entities respond by including reaction components (hoverable, grabbable, etc.) or by listening for the gesture events — for example, calling preventDefault() on a gesture event to reject it and let the gesture pass through to another entity.

FAQ

Is Super Hands free?

Yes, Super Hands is an open-source npm package released under a permissive license and can be used in commercial and personal projects without any paid tiers.

How do I install Super Hands?

For browser use, include super-hands.min.js from unpkg after A-Frame and aframe-extras, then add the super-hands component to your controller entities. For npm projects, run npm install super-hands and require it after A-Frame.

Does Super Hands work with A-Frame 1.5.0 and above?

Yes, but there is a conflict with A-Frame's built-in grabbable component. The README instructs you to delete that component with delete AFRAME.components["grabbable"] before loading super-hands, and to pair it with aframe-extras 7.5.x or later.

Can I use Super Hands with physics?

Yes. grabbable uses physics constraints when aframe-physics-system is present, and stretchable rescales physics body shapes for box and sphere colliders on the 'local' physics driver. Version 3.0.6 added support for Ammo.js physics.

What devices does Super Hands support?

With the right collider, Super Hands supports desktop mouse, mobile magic-window, Cardboard with a button, 3DOF controllers like Daydream and GearVR, and 6DOF tracked controllers like Vive, Oculus Touch, and Windows Mixed Reality.