Dados utilizados
- Quadros da câmera do usuário, processados no navegador.
- Dados representativos no painel técnico, sinalizados na própria tela.
Case de projeto
NeuroFX Studio
Estúdio no navegador que troca e ajusta efeitos visuais em Canvas conforme os gestos lidos pela câmera.
Problema
Controlar efeitos visuais costuma exigir mouse, teclado ou mesa de controle.
Gestos precisam virar parâmetros contínuos, não só comandos.
Solução
Arquitetura resumida
- Quadros da câmera do usuário, processados no navegador.
- Dados representativos no painel técnico, sinalizados na própria tela.
Decisões técnicas
- MediaPipe Hand Landmarker em modo vídeo, com até duas mãos e carregamento dinâmico.
- Heurísticas geométricas reconhecem pinça, mão aberta, punho, swipe, empurrão e duas mãos.
- Cada gesto escolhe um entre seis efeitos em Canvas, e a pinça controla a intensidade.
Resultado
- Gestos reconhecidos
- 6
- Repositório privado / useGestureRecognition.ts / commit f15848f
- Testes em Vitest
- 8
- Repositório privado / tests/neurofx.test.tsx / commit f15848f
O projeto transforma gestos em parâmetros visuais contínuos, com processamento local.
- Canvas 2D
- Visão computacional no navegador
- Mapeamento gesto-parâmetro
- Estado com Zustand
Aprendizados e limitações
- O painel técnico usa dados representativos, não medições de sessão.
- A confiança do gesto de empurrão é um valor fixo.
- O WASM do MediaPipe vem de CDN na versão mais recente, diferente da versão fixada no pacote.
- Swipe, empurrão e duas mãos não têm testes.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
NeuroFX Studio é um estúdio no navegador em que os gestos da mão escolhem e ajustam efeitos visuais em Canvas.
O MediaPipe Hand Landmarker roda em modo vídeo, com até duas mãos; heurísticas geométricas reconhecem seis gestos.
Cada gesto escolhe um de seis efeitos, a pinça controla a intensidade, e o estúdio mede FPS e latência ao vivo.
O painel técnico mostra dados representativos, sinalizados na tela; o repositório é privado.
Next.js e React com MediaPipe Tasks Vision, efeitos em Canvas 2D, estado em Zustand, gráficos em Recharts e testes em Vitest.
Funcionalidades e destaques
- Seis efeitos visuais em Canvas.
- Troca de efeito pelo gesto.
- Intensidade controlada pela pinça.
- Esqueleto da mão em modo de depuração.
- Telemetria de FPS e latência no estúdio.
- Reconhece seis gestos com heurísticas geométricas sobre os pontos da mão.
- Liga cada gesto a um efeito e a pinça à intensidade.
- Mede FPS e latência ao vivo durante a sessão.
- Processa a câmera só no navegador.
Arquitetura técnica e dados
Arquitetura técnica
Como o case foi pensado como produto
Estúdio no navegador que troca e ajusta efeitos visuais em Canvas conforme os gestos lidos pela câmera.
MediaPipe Tasks VisionIACanvas APIPlataforma webNext.jsFrameworkReactFrameworkTypeScriptLinguagemRechartsVisualizaçãoZustandFrameworkVitestFramework
Principais componentes
- Seis efeitos visuais em Canvas.
- Troca de efeito pelo gesto.
- Intensidade controlada pela pinça.
- Esqueleto da mão em modo de depuração.
- Telemetria de FPS e latência no estúdio.
Decisões técnicas
- Canvas 2D
- Visão computacional no navegador
- Mapeamento gesto-parâmetro
- Estado com Zustand
Trade-offs
- O painel técnico usa dados representativos, não medições de sessão.
- A confiança do gesto de empurrão é um valor fixo.
- O WASM do MediaPipe vem de CDN na versão mais recente, diferente da versão fixada no pacote.
- Swipe, empurrão e duas mãos não têm testes.
Como executar
- O repositório é privado; os passos abaixo valem para quem tem acesso.
- npm install
- npm run dev
- npm run test
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoSmart Ranch Vision AI
Painel em React para gestão de rebanho: indicadores, alertas, missões de campo e playbooks sobre dados de exemplo.
Ver case completo