Skip to main content

May The Force Be With You | Introducing Our Hand Tracking Library

· 2 min read
Zastrich
Zastrich
Creator of TheForce

Greetings, Padawans and Jedi Masters of the web!

We are thrilled to announce the official launch of TheForce, a powerful and intuitive hand tracking library designed to bring the magic of gesture control to your web applications. Just as the Force guides the actions of a Jedi, our library empowers your users to interact with digital interfaces using the most natural tool: their hands.

Built upon the robust foundation of Google's MediaPipe, TheForce offers real-time, high-accuracy hand tracking, transforming subtle movements into precise commands. Whether you're building immersive games, accessible interfaces, or innovative kiosks, TheForce provides the tools to create truly engaging experiences.

What can you do with TheForce?​

  • Virtual Mouse Control: Navigate web pages, click buttons, and interact with elements using only your hand.
  • Custom Gestures: Define and implement your own unique hand gestures to trigger specific actions within your application.
  • Enhanced Accessibility: Provide alternative input methods for users who may find traditional mouse and keyboard interactions challenging.

Get Started Today!​

Ready to harness the power of TheForce in your projects? Dive into our comprehensive documentation:

Install our packages via npm:

  • Core Package: npm install @theforce/core
  • React Integration: npm install @theforce/react
  • Vue Integration: npm install @theforce/vue
  • Angular Integration: npm install @theforce/angular

We believe that TheForce will revolutionize how users interact with web applications, making digital experiences more intuitive, accessible, and fun. Join us on this exciting journey!

May the Force be with your development!

Important Note on Mediapipe Dependency:​

For TheForce to function correctly, you must include the Mediapipe library from a CDN in your project's index.html (or equivalent entry point). This is a runtime dependency required by @theforce/core.

Please add the following script tags to your HTML file's <head> or before your main application script:

<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>