E aí, pessoal do TabNews, tudo supimpa!?

Hoje quero apresentar um projeto que venho desenvolvendo: o TheForce, uma biblioteca de rastreamento de mãos que permite controlar aplicações web por meio de gestos. A ideia é oferecer uma forma mais acessível e intuitiva de interagir com a web, utilizando a tecnologia do MediaPipe para detecção de mãos em tempo real.

O que é o TheForce?

O TheForce é uma biblioteca modular que oferece uma API fácil de usar para integrar o rastreamento de mãos em seus projetos. Com ele, você pode transformar os movimentos das mãos em um cursor virtual, acionar eventos de clique por meio de gestos de "hover" (passar o mouse sobre) e muito mais. O único requisito, é dar permissão de uso da câmera, e pronto, um cursor virtual aparece na tela e pode ser controlado com o PODER da sua mão. MAGIC!

A biblioteca é dividida em um pacote principal (@theforce/core) e integrações para os frameworks mais populares:
@theforce/react: Hooks e componentes para React.
@theforce/vue: Composables e componentes para Vue.
@theforce/angular: Serviços e diretivas para Angular.

Tecnologias Utilizadas

Para construir o TheForce, utilizei uma série de tecnologias modernas do ecossistema JavaScript/TypeScript:

MediaPipe: A base de tudo, fornecendo o modelo de rastreamento de mãos de alta performance.
TypeScript: Para garantir um código mais robusto e escalável.
Turborepo: Para gerenciar o monorepo do projeto, otimizando o build e o desenvolvimento dos pacotes.
Jest: Para a suíte de testes, garantindo a qualidade e a estabilidade da biblioteca.
Docusaurus: Para a criação da documentação, que você pode acessar em theforce.code200.com.br.
Changeset: Para automatizar o versionamento e a publicação dos pacotes, facilitando a manutenção do changelog.

Como Funciona?

O TheForce utiliza a câmera do seu dispositivo para capturar o vídeo, que é processado pelo MediaPipe para identificar os pontos de referência das mãos (como pontas dos dedos e articulações). A partir daí, a biblioteca traduz esses pontos em coordenadas na tela, simulando um cursor de mouse e detectando quando a mão "passa sobre" elementos interativos.

Veja em Ação!

Confira um case de demonstração do TheForce:
https://theforce-cases.code200.com.br/lovable-showcase-example/

Inteiramente feito com o Lovable.app, só inclui no prompt o link da documentação e o lovable desenvolveu desse jeito que você está vendo aí.

Como Começar?

Para começar a usar o TheForce, basta instalar o pacote correspondente ao seu framework:

Javascript Puro

npm install @theforce/core

Para React

npm install @theforce/core @theforce/react

Para Vue

npm install @theforce/core @theforce/vue

Para Angular (WIP)

npm install @theforce/core @theforce/angular

A documentação completa, com exemplos de uso para cada framework, está disponível em theforce.code200.com.br

Ainda estou com problemas no build do mediapipe como dependência, então a recomendação é usar como peerDependecy no momento, ou seja, carrega do CDN que é mais seguro

Contribua!

O TheForce é um projeto de código aberto e adoraria contar com a sua contribuição! Se você tem ideias para novas funcionalidades, melhorias ou correções de bugs, fique à vontade para abrir uma issue ou um pull request no repositório do GitHub.

Espero que gostem do projeto! Que a Força esteja com vocês!