Criatividade no TRAE: Desenvolvedor vietnamita cria simulador de Polaroid com revelação em tempo real

Source: Dev.to

Flashback é um aplicativo web que simula a experiência de usar uma câmera instantânea retrô (Polaroid).

O projeto foi desenvolvido pelos usuários vietnamitas do TRAE, The Vibe Coders (Mai Nguyen & Son Le), ambos desenvolvedores backend. Durante a experiência TRA​E Vietnam Vibe Coding em 22/11, eles criaram este aplicativo usando o TRA​E SOLO. A câmera transforma uma webcam comum em uma Polaroid virtual, recriando todo o processo, desde o clique do obturador até a revelação da foto. Basta um dispositivo com câmera para capturar imagens com filtros vintage e acompanhar a “revelação” por meio de animações, evocando o charme da era do filme fotográfico.

“Temos um amigo que possui uma verdadeira Polaroid retrô, e adoramos o processo e a sensação de tirar fotos com ela. Mas a realidade é que essas câmeras não são baratas, e nós não podíamos comprar uma. Então decidimos fazer a nossa própria com código.”

Valores do Flashback

• Fotografia retrô sem barreiras – qualquer pessoa com câmera pode experimentar a Polaroid de forma gratuita.
• Interação realista – o usuário liga a câmera, enquadra e aperta o obturador, como se fosse uma câmera física.
• Processo de revelação fiel – a foto passa de uma tela preta para uma imagem clara em apenas 3 segundos, proporcionando a sensação ritualística da espera.
• Valor emocional – cada clique e revelação lenta tornam a foto mais memorável que filtros gerados automaticamente.
• Estética retrô preservada – diversos filtros dão às fotos a aparência de “fotos antigas”.

Recursos do TRAE utilizados

• Modo SOLO do TRAE IDE – desenvolvimento assistido por IA, ajudando a criar protótipos rapidamente, gerar código e resolver problemas durante o desenvolvimento.
• Deploy com um clique no Vercel – simplificação do fluxo de implantação, permitindo que o app fosse rapidamente publicado.

Arquitetura: tecnologia simples, experiência completa

Arquitetura do aplicativo

Flashback é uma aplicação de página única (SPA) totalmente front‑end, com uma stack leve:

• HTML + CSS + JavaScript – sem dependência de frameworks pesados, garantindo compatibilidade e carregamento rápido.
• Permissão de câmera – o usuário clica no botão de energia e autoriza o uso da câmera.
• Pré‑visualização em tempo real – o vídeo é exibido ao vivo, com o filtro selecionado aplicado.
• Captura da imagem – ao clicar no obturador, o quadro atual é capturado no canvas.
• Aplicação de filtro – a imagem recebe o filtro escolhido e é processada.
• Animação de revelação – a foto “salta” na tela com animação e gradualmente se revela.
• Coleção de fotos – o usuário pode arrastar a foto para um mural de recordações.

Demonstração

• Experiência online – Acesse a demo online
• Animação de ligar a câmera e pré‑visualização em tempo real.
• Quatro filtros retrô: Normal, Kodak Color, Matte Faded e Filme 8mm.
• Animação de “pulo” e revelação das fotos.
• Mural de fotos arrastáveis.
• Layout responsivo para dispositivos móveis.

Desafios e aprendizados

Desafios técnicos

1. Permissões de câmera entre navegadores

   • Desafio: Chrome, Firefox e Safari tratam permissões de mídia de formas diferentes, dificultando uma experiência uniforme.
   • Solução: Testes extensivos em diferentes navegadores e implementação de múltiplas soluções alternativas para compatibilidade.

2. Otimização de filtros em tempo real

   • Desafio: Aplicar filtros em tempo real sobre o vídeo mantendo 60 fps exige alto desempenho.
   • Solução: Testes mostraram que filtros CSS são mais eficientes que filtros Canvas para pré‑visualização; adotou‑se a solução CSS.

3. Implementação do recurso de arrastar e soltar

   • Desafio: Funcionar de forma fluida em desktop e mobile, lidando com múltiplos tipos de eventos e prevenindo comportamentos padrão do navegador.
   • Solução: Criação de um sistema de drag‑and‑drop customizado, unificando a lógica para diferentes dispositivos.

Desafios de design

4. Criar sensação autêntica de retrô

   • Desafio: Equilibrar estética retrô com hábitos de uso modernos.
   • Solução: Refinamento contínuo do design da câmera, animações e interações até atingir um equilíbrio adequado.

5. Adaptação de efeitos 3D responsivos

   • Desafio: Efeitos de paralaxe 3D precisam parecer naturais em telas de todos os tamanhos.
   • Solução: Ajuste dos parâmetros 3D conforme o tamanho da tela, garantindo boa experiência visual em qualquer dispositivo.

Principais aprendizados

• Experiência do usuário em primeiro lugar – mais importante que técnicas avançadas de processamento de imagem é transmitir nostalgia e interações suaves.
• Efeitos sonoros aumentam a imersão – simples efeitos sonoros elevam significativamente a sensação de realismo.

O Flashback Camera não é apenas um projeto de hobby; é um experimento de “nostalgia digital” e uma demonstração do potencial lúdico da web. A equipe The Vibe Coders usou tecnologias simples para criar uma experiência emocionalmente rica e cativante.

Esperamos que, no futuro, eles continuem trazendo mais projetos criativos “com calor humano” usando código.