# A-Frame Super Hands Component

This is the examples page for the super-hands A-Frame component package for super-easy hand controller interactivity in A-Frame WebVR experiences.

Hand controls with physics

Mouse cursor based version for desktop

- Grabbed boxes lock position and rotation to controller
- `color-randomizer` changes the color of entities dropped inside of the color changer box
- Boxes can be stretched with two hands to change size, updating their physics bodies

Example of super-hands interactivity with roomscale tracked controllers and `aframe-physics-system`. Also showcases creating a simple custom reaction component.

        AFRAME.registerComponent('color-randomizer', {
          play: function() {
            this.el.addEventListener('drag-drop', function(evt) {
              evt.detail.dropped.setAttribute('material', 'color',
                '#'+(Math.random()*0xFFFFFF<<0).toString(16))
               // notify super-hands that the gesture was accepted
              evt.preventDefault()
            })
          }
        })

Credit for random color generator code: Mohsen via StackOverflow

Gaze and laser pointer controls without physics

Mouse cursor based version for desktop

- Grabbed entities move by controller position and rotation
- Drag-drop targets and their hovering entity appear in wireframe
- Entities change to spheres upon completing drag-drop interaction via the `event-set` component listening for the 'drag-drop' event

`super-hands` can also be use with other types of input including 3DOF controllers, mouse, and touch. In these cases, a raycasting can be used intead of collision detection. The confugration below works with the A-Frame `raycaster` component.

    super-hands="colliderEvent: raycaster-intersection;
                 colliderEventProperty: els;
                 colliderEndEvent: raycaster-intersection-cleared;
                 colliderEndEventProperty: clearedEls"

This scene also shows the fallback movement that occurs when physics is not available.

## Quick guide to adding making something grabbable with physics on your site