Magic Hands 🙌🏼

Magic Hands is a digital toy to play with hand movement and computer graphics.

It is a remix of human crafted fluid simulation and machine crafted hand detection, by Forest in the Tree.

You can play with it at: https://magichands.forestinthetree.com/

You can read about it on the blog post.

Development

Installation

1. Use correct node version using asdf (or similar):

   1. asdf https://asdf-vm.com/#/core-manage-asdf
   2. asdf-nodejs https://github.com/asdf-vm/asdf-nodejs

2. Install dependencies: npm install

3. Run server: npm start

4. Open http://localhost:3000

Updating Mediapipe files

The files need to be served in the public folder, so when they are updated in npm, they also need to be copied over. To do this, run

npm run copy:mediapipe-wasm

Debugging

To show the debug panel for hand detection, add ?debug=true to the URL.

Technology stack

Magic Hands is built using the following tech:

• WebGL Fluid simulation - visuals
• MediaPipe studio gesture recognition - hand and gesture recognition
• Astro - web framework
• SolidJS - user interface components
• PicoCSS - minimal CSS framework
• Sass - CSS
• Vercel - deployment platform
• The Web Platform - plain old HTML/JavaScript/CSS etc. - no magic there

License

Magic Hands is open source under the GNU Affero General Public License Version 3 (AGPLv3) or any later version.

If you contribute to the project, you agree that your contributions will also be licensed under the AGPL v3 License.

If you have any queries, feel free to email licenses@forestinthetree.com.