Voltar para projetos

Case de projeto

Corredor Neon: Mão Cibernética

Infinite runner cyberpunk com visualização da mão em tempo real e atmosfera neon.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • React
  • TypeScript
  • Vite
  • Three.js
  • @react-three/fiber
  • Zustand
  • MediaPipe Tasks Vision
Abrir vídeo
Capa do projeto Corredor Neon: Mão Cibernética
Capa do projeto

Problema

Converter gestos (pular, deslizar, esquerda/direita) em comandos confiáveis.

Renderizar cena 3D com iluminação e pós-efeitos sem perder performance.

Solução

Arquitetura resumida
  • Frames da câmera e landmarks do MediaPipe Tasks Vision.
  • Posição da mão para detecção de gestos e movimentos.
  • Estado do jogo (velocidade, obstáculos, colisões).
Decisões técnicas
  1. Detecção local de mão com MediaPipe Tasks Vision no navegador.
  2. Serviço de gestos para mapear pulo, deslize e movimento lateral.
  3. Cena 3D com Three.js + R3F e iluminação estilizada.

Resultado

Entreguei um runner cyberpunk jogável com controle por gestos.

  • Integração MediaPipe + React para controle em tempo real.
  • Three.js com R3F aplicado a jogos web.
  • Gerenciamento de estado com Zustand.
  • Design de interação por gestos e HUD responsivo.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Projeto autoral para criar um runner 3D controlado por gestos, com resposta rápida e estética neon.

React + TypeScript + Vite com Three.js/R3F, Zustand e MediaPipe Tasks Vision para um runner 3D controlado por gestos.

Mantive visual 3D estilizado com performance estável.

Estruturei uma base extensível para novas mecânicas.

Problema

  • Visualizar a mão como esqueleto cibernético em tempo real.
  • Manter HUD legível e responsivo em diferentes tamanhos de tela.
Funcionalidades e destaques
  • Controle por gestos (pular, deslizar, esquerda/direita).
  • Mão renderizada como esqueleto cibernético em tempo real.
  • Cena 3D com iluminação e pós-efeitos neon.
  • HUD responsivo com sobreposição limpa.
  • Processamento local sem envio de dados.
  • Experiência imersiva com estética cyberpunk.
  • Controle por gestos com baixa latência.
  • Arquitetura modular com serviços e store dedicados.
  • Base pronta para novos níveis e desafios.
Arquitetura técnica e dados
  • Zustand para estado global e HUD reativo.

Arquitetura técnica

Como o case foi pensado como produto

Infinite runner cyberpunk com visualização da mão em tempo real e atmosfera neon.

ReactFrameworkTypeScriptLinguagemViteFrameworkThree.jsVisualização@react-three/fiberVisualizaçãoZustandFrameworkMediaPipe Tasks VisionIA

Dados utilizados

  • Frames da câmera e landmarks do MediaPipe Tasks Vision.
  • Posição da mão para detecção de gestos e movimentos.
  • Estado do jogo (velocidade, obstáculos, colisões).
  • Eventos do HUD e feedback visual durante o gameplay.

Principais componentes

  • Controle por gestos (pular, deslizar, esquerda/direita).
  • Mão renderizada como esqueleto cibernético em tempo real.
  • Cena 3D com iluminação e pós-efeitos neon.
  • HUD responsivo com sobreposição limpa.
  • Processamento local sem envio de dados.

Decisões técnicas

  • Integração MediaPipe + React para controle em tempo real.
  • Three.js com R3F aplicado a jogos web.
  • Gerenciamento de estado com Zustand.
  • Design de interação por gestos e HUD responsivo.
Como executar
  1. Pré-requisitos: Node.js 18+.
  2. Clone o repositório.
  3. Instale dependências: npm install.
  4. Opcional: configure APP_API_KEY em .env.local.
  5. Baixe o modelo e coloque em public/models/hand_landmarker.task.
  6. Execute: npm run dev.
  7. Abra o navegador e permita o acesso à câmera.
Mídia adicional
Runner neon com controle por gestos e mão cibernética em cena.
Créditos

Desenvolvido por Matheus Siqueira.

Próximo projetoAd Performance Intelligence

Dashboard de BI em Next.js que compara Google Ads e Meta Ads com dados simulados: KPIs, funil e ROAS.

Ver case completo