Voltar para projetos

Case de projeto

Capa da Invisibilidade

Chroma key por matiz que troca um tecido colorido pelo fundo, processado pixel a pixel em Canvas no navegador.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • Canvas API
  • React
  • TypeScript
  • Vite
  • Fastify
  • Zod
Abrir demoVer repositório (abre em nova aba)
Estúdio da capa da invisibilidade com a área de vídeo e o painel arcano, antes da captura do fundo.
capa-da-invisibilidade.vercel.app / Página inicial

Problema

Separar um tecido do resto da imagem exige uma máscara estável a cada quadro.

Processar pixel a pixel no navegador pesa se não houver limite de quadros.

Solução

Arquitetura resumida
  • Quadros da câmera do usuário, processados no navegador.
Decisões técnicas
  1. Captura de 640×480 e fundo registrado depois de 3 s.
  2. Máscara por matiz em HSL com borda suave e mistura alpha, via getImageData e putImageData.
  3. Limite e amostragem de FPS no próprio laço de quadros.

Resultado

Um estudo de processamento por pixel em tempo real, sem dependência de visão computacional.

  • Processamento de imagem em Canvas
  • Laço de quadros
  • Cor em HSL

Aprendizados e limitações

  • A interface publicada não tem os controles finos de calibração; os limiares são fixos.
  • O backend não está publicado.
  • O sugeridor de cores é heurístico, por palavras-chave.
  • Não há testes do frontend.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Efeito de capa da invisibilidade no navegador: os pixels de um tecido de cor escolhida são trocados pelo fundo capturado antes.

O fundo é capturado com atraso de 3 s; depois, cada quadro passa por uma máscara de matiz em HSL, com borda suave e mistura alpha, pixel a pixel em Canvas 2D.

Um conta-gotas escolhe a cor do tecido e um sugeridor por palavras-chave indica cores complementares para o ambiente.

A ideia é um exercício clássico; esta versão é TypeScript sem biblioteca de visão, e começou de um template antes de evoluir em 19 commits.

React, Vite e TypeScript com Canvas 2D; um backend Fastify com Zod existe no repositório, mas não está publicado.

Funcionalidades e destaques
  • Captura do fundo com contagem.
  • Conta-gotas com espelhamento.
  • Sugestão de cores por palavra-chave.
  • Score de qualidade da cena.
  • Atalhos de teclado.
  • Processa a máscara pixel a pixel em Canvas 2D, sem biblioteca de visão.
  • Suaviza a borda da máscara com mistura alpha.
  • Limita o FPS para manter o laço estável.
Arquitetura técnica e dados

Arquitetura técnica

Como o case foi pensado como produto

Chroma key por matiz que troca um tecido colorido pelo fundo, processado pixel a pixel em Canvas no navegador.

Canvas APIPlataforma webReactFrameworkTypeScriptLinguagemViteFrameworkFastifyFrameworkZodFramework

Dados utilizados

  • Quadros da câmera do usuário, processados no navegador.

Principais componentes

  • Captura do fundo com contagem.
  • Conta-gotas com espelhamento.
  • Sugestão de cores por palavra-chave.
  • Score de qualidade da cena.
  • Atalhos de teclado.

Decisões técnicas

  • Processamento de imagem em Canvas
  • Laço de quadros
  • Cor em HSL

Trade-offs

  • A interface publicada não tem os controles finos de calibração; os limiares são fixos.
  • O backend não está publicado.
  • O sugeridor de cores é heurístico, por palavras-chave.
  • Não há testes do frontend.
Como executar
  1. npm install && npm run dev (porta 3000)
  2. Backend opcional: cd backend && npm install && cp .env.example .env && npm run dev
  3. npm run test:backend
Mídia adicional
Vídeo de demonstração do projeto.
Créditos

Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech

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