André Ricardo

RevelaPlay

RevelaPlay
|Projeto - artigo - Arquitetura - Desenvolvimento de Software - SaaS

Como transformei o chá revelação em um minigame web sem downloads. Conheça os bastidores de engenharia com Canvas 2D, Web Audio API e arquitetura serverless.

Sexta-feira à noite, grupo da família apitando. Mais um vídeo de chá revelação enviado por parentes que moram a centenas de quilômetros de distância:

  1. Você clica no vídeo do WhatsApp;

  2. Vê alguém cortando um bolo ou estourando um balão;

  3. Avança a barra de progresso direto para o final para ver a cor;

  4. Digita “Parabéns! Que venha com muita saúde!” e fecha o app.

Toda a emoção, o suspense e a expectativa daquele momento condensados em 5 segundos de atenção dispersa.

Ali me fiz uma pergunta de engenharia e produto: e se a revelação não fosse um vídeo passivo, mas um jogo interativo onde cada pessoa da família — do sobrinho de 7 anos à vovó de 70 — precisasse quebrar os blocos no celular para descobrir o segredo em tempo real?

Foi dessa inquietação que nasceu o RevelaPlay. Mas transformar essa ideia em um produto real colocou à prova diversos desafios de arquitetura, performance e ergonomia mobile.

Abaixo, compartilho os principais problemas que encontrei pelo caminho e como resolvi cada um deles.

1. O dilema da engine: por que abandonei Unity e Phaser

O primeiro impulso de qualquer desenvolvedor ao pensar em um jogo é abrir a gaveta de engines conhecidas: Unity WebGL ou Phaser.js.

No entanto, no nosso caso, a fricção zero era o requisito número 1 de produto. Se o convidado recebesse um link no WhatsApp e precisasse:

  • Baixar um aplicativo na loja;

  • Esperar um bundle de 25 MB carregar em uma rede 4G instável;

  • Criar login com senha;

…mais de 80% das pessoas desistiriam antes de ver a primeira tela.

A solução

Decidi construir o jogo em HTML5 Canvas 2D nativo e Vanilla JavaScript, sem frameworks pesados.

  • Bundle de jogo: Menos de 40 KB de JavaScript puro.

  • Tempo de carregamento: Menos de 400 milissegundos.

  • Taxa de quadros: 60 FPS cravados até em smartphones Android de entrada, desenhados via requestAnimationFrame com cálculo delta-time para que a física nunca sofra distorção independente do refresh rate da tela (60Hz, 90Hz ou 120Hz).

2. O pesadelo do áudio no mobile: síntese procedural via Web Audio API

Quem já desenvolveu jogos para a web conhece a dor: o ecossistema do iOS Safari bloqueia a reprodução de áudio se não houver interação prévia do usuário. Além disso, carregar dezenas de arquivos .mp3 ou .wav por requisições HTTP adiciona latência, descompasso no suspense e falhas em redes instáveis.

Em vez de empacotar arquivos de som, usei a Web Audio API para gerar os efeitos de chiptune (16-bit) e a fanfarra proceduralmente em tempo de execução:

// Exemplo real do motor de áudio: síntese em onda quadrada pura (sem baixar arquivos de áudio)
function tocarPuloRetro() {
  const ctx = getAudioContext();
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();

  osc.type = 'square'; // Timbre clássico de 8/16-bit
  osc.frequency.setValueAtTime(150, ctx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(600, ctx.currentTime + 0.12);

  gain.gain.setValueAtTime(0.3, ctx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.12);

  osc.connect(gain);
  gain.connect(ctx.destination);

  osc.start();
  osc.stop(ctx.currentTime + 0.12);
}

O pulo, o quebrar de blocos, o som tenso de batimento cardíaco antes do clímax e a fanfarra de vitória são sintetizados matematicamente com osciladores (square, triangle) e curvas exponenciais de ganho.

Resultado: Peso dos arquivos de áudio = 0 KB, latência zero e compatibilidade imediata após o primeiro toque do jogador na tela.

3. O design do suspense em código: anti-spoiler e a reviravolta dos gêmeos

Em um chá revelação, a pior falha de produto possível é o spoiler acidental.

Se a palavra a ser revelada for “MENINO” ou “MENINA”:

  • As 5 primeiras letras são idênticas: M - E - N - I - N.

  • Apenas a 6ª letra (O ou A) define o sexo.

Se o jogo pintasse as letras de azul ou rosa desde o início, a surpresa estragaria no segundo bloco. Para criar tensão dramática:

  1. Alternância neutra 50/50: As letras iniciais alternam entre tons pastéis de azul e rosa aleatoriamente a cada partida, sem qualquer correlação com o sexo real do bebê.

  2. O sexto bloco enigmático: O último bloco renderiza uma interrogação dourada pulsante (?). O jogo congela por frações de segundo, a tela pisca em branco duas vezes (flash climax), entra a batida de suspense e só então a letra final se transforma com confetes.

  3. A surpresa dos múltiplos (Gêmeos / Trigêmeos): Para pais esperando gêmeos de sexos opostos (Casal), um bloco simples de “O” ou “A” não faria sentido. O motor do jogo executa uma reviravolta: ao bater no 6º bloco, a tela treme com um som de “erro/glitch”, a letra vira um ⁉️ vermelho, um aviso de suspense congela a tela por 3 segundos anunciando a gestação múltipla e depois revela a celebração de cada bebê em linhas separadas com ícones dedicados (🚗 Menino, 🎀 Menina).

4. Arquitetura de borda: escala viral sem custos de infraestrutura

Uma plataforma dessas tem um padrão de tráfego atípico: longos períodos calmos seguidos por picos repentinos quando um código é disparado em um grupo de WhatsApp com centenas de familiares ao mesmo tempo.

Eu não queria ter que gerenciar instâncias EC2, clusters Kubernetes nem pagar servidores ociosos.

Optei por uma arquitetura moderna e econômica:

[ Usuário no WhatsApp ]
        │
        ▼ (HTTPS / HTTP3)
[ Cloudflare Pages + Edge Network ] ──> Cache estático global (<50ms)
        │
        ├──> Edge Functions (Segurança, cabeçalhos CSP/HSTS e roteamento limpo)
        │
        ▼ (RPCs Seguras com Row Level Security)
[ Supabase / PostgreSQL 17 ] ──> Rate-limit por Hash de IP (SHA-256)
                                 Attribution: Origem dos cliques
                                 Persistência isolada sem expor tabelas brutas

  • Cloudflare Pages: Entrega todo o frontend diretamente de datacenters distribuídos no mundo todo (borda), com HTTPS forçado e cache ultraveloz.

  • PostgreSQL 17 com Supabase RLS: Em vez de expor consultas diretas de banco no frontend, toda a lógica de escrita e leitura roda dentro de Stored Procedures (RPCs) autenticadas.

  • Proteção contra abuso sem captcha intrusivo: Implementei limitação de taxa baseada em hash anônimo de IP (SHA-256), impedindo spam de criação sem que o usuário final precise ficar clicando em semáforos ou faixas de pedestre.

  • Keep-alive automatizado via GitHub Actions: Para contornar o auto-pause do tier gratuito do Supabase após períodos sem requisições, configurei um workflow agendado que executa um ping health-check periódico na borda, mantendo a base sempre aquecida e pronta para picos repentinos.

5. Ergonomia e visualização mobile: detalhes que fazem a diferença

Mais de 95% do público acessa pelo celular. Isso me obrigou a desenhar regras rigorosas de interface:

  1. Touch Controls Dinâmicos: Se o usuário joga em pé (retrato), os botões virtuais ficam centralizados e elevados para respeitar a barra de navegação do iPhone (Home Indicator). Se gira para paisagem, os controles migram para as laterais, virando manetes estilo gamepad para os dois polegares.

  2. Posicionamento de CTAs nas vitrines: Ao exibir os cards dos jogos no site (Super Encanador e Cobrinha Mágica), os botões de ação e pílulas de teste foram obrigatoriamente alinhados à direita, pois o canto inferior esquerdo é a zona crítica onde os personagens e controles nascem. Posicionar no centro ou à esquerda tapava os personagens e estragava a visualização.

  3. Métricas sem invadir privacidade (Zero PII): Toda a telemetria (início de jogo, duração da partida e conversão de compartilhamento) foi desenhada com Google Analytics 4 desacoplado, sem nunca coletar nomes de bebês, mensagens ou e-mails no payload de rastreamento.

O que esse projeto me ensinou sobre engenharia de software

Construir o RevelaPlay me lembrou de uma lição valiosa que às vezes o mercado de tecnologia esquece:

Engenharia de software não é sobre empilhar a biblioteca mais hypada do momento. É sobre entender a dor humana, estabelecer as restrições corretas de produto e desenhar a solução mais simples, performática e elegante possível.

Eliminar 99% da fricção técnica foi o que transformou um vídeo ignorado de WhatsApp em uma experiência interativa, onde avós e amigos se sentem jogando dentro de uma fase de videogame para descobrir a chegada de uma nova vida.

💡 Quer experimentar como ficou?
O projeto está no ar: revelaplay.com.br (você pode testar a demonstração do Encanador e da Cobrinha sem precisar cadastrar nada).