As Snapchat Web Lenses (lentes web do Snapchat) permitem pegar um jogo HTML5 comum, compactar a build em um zip e publicá-lo dentro do Snapchat como uma Lens. Jogos são o primeiro caso de uso, o recurso está em beta e, embora qualquer framework web possa ser usado, a Snap recomenda o PlayCanvas e o utiliza em toda a documentação. Você não precisa abrir o Lens Studio em momento nenhum.
O PlayCanvas anunciou o suporte em 23 de outubro de 2026, junto com quatro dos primeiros jogos já no ar. Este guia explica o que é uma Web Lens, os limites rígidos que sua build precisa cumprir, o que a Web Lens API oferece e um caminho prático em cinco passos, da build web até um jogo que os jogadores encontram pelo nome ou pelo Snapcode.
Snapchat Web Lenses em resumo
| O que é | Um app web empacotado em zip e publicado como Lens do Snapchat |
| Plataformas | Snapchat para iOS e Android |
| Tela | Tela cheia na vertical, 9:16 (horizontal não é suportado) |
| Engine | Qualquer framework web; PlayCanvas recomendado pela Snap |
| Tamanho do pacote | Zip de até 8 MB, index.html de até 1 MB na raiz do zip |
| Runtime | Suporta WebAssembly (inclusive multithread), Web Workers e eval() |
| Sandbox | Sem rede, câmera, microfone ou sensores de movimento |
| Recursos do Snapchat | Rankings, Bitmoji e armazenamento pela Web Lens API |
| Status | Beta; os detalhes podem mudar |
Por que isso importa para quem desenvolve jogos web
O Snapchat é usado por 971 milhões de pessoas por mês, segundo os resultados do segundo trimestre de 2026 da Snap, e a empresa informa que suas Game Lenses engajam mais de 175 milhões de pessoas por mês. As Web Lenses abrem esse público para desenvolvedores web sem página em loja de apps e sem instalação: o jogador abre o jogo do mesmo jeito que testa qualquer Lens.
Os primeiros números divulgados pelos desenvolvedores pioneiros dão uma ideia do que é possível:
| Jogo | Estúdio | Gênero | O que o desenvolvedor relatou |
|---|---|---|---|
| Bloom | NOWWA | Puzzle relaxante de jardim | Cerca de 260 segundos por sessão em média, quase 30% voltam no dia seguinte |
| Ball Smasher | MetaM | Arremessos de basquete de rua | Protótipo em horas, milhões de partidas em dias |
| Snake Showdown | Elanra Studios | Batalha de cobras | 7 milhões de partidas de 1,8 milhão de jogadores nas primeiras quatro semanas |
| Bitmoji Ski | Snap | Arcade de esqui | Feito em um dia, 6 milhões de impressões por dia |
Para monetizar, o programa Lens+ Payouts da Snap permite que criadores elegíveis (maiores de 18 anos, em países elegíveis) marquem uma Lens como exclusiva para assinantes Lens+ e Platinum e recebam uma parte da receita com base no engajamento. A Snap também está convidando desenvolvedores a apresentar propostas de jogos originais em Web Lens para receber financiamento de desenvolvimento, com prioridade para jogos construídos em torno de um loop social, como rankings.
As regras que sua build precisa seguir
A maioria dos uploads recusados vem de um punhado de erros de empacotamento, então aprenda isto antes de escrever qualquer linha do jogo.
- Só vertical. As Lenses rodam em tela cheia em 9:16. Pense a câmera, o HUD e os botões para uso com uma mão desde o início.
- Zip de até 8 MB. O limite vale para o upload compactado. Trate isso como teto, não como meta: um zip menor carrega mais rápido, e o tempo até começar a jogar é o que mais importa.
index.htmlna raiz, com até 1 MB. Compacte o conteúdo da pasta da build, e não a pasta em si. Deixe oindex.htmlcomo um ponto de entrada enxuto e não coloque dentro dele o bundle inteiro nem URLsdata:grandes.- Caminhos relativos em tudo. Use
./a/game.js, nunca/a/game.js, tanto no HTML quanto nas chamadasfetch()em tempo de execução. No Vite, definabase: './'. - Barras normais no zip. No Windows, o
Compress-Archivedo PowerShell grava barras invertidas e quebra os caminhos. Use “Compactar para arquivo ZIP” do Explorador de Arquivos,zip -rou um script Node com o pacotearchiver, e depois confira comunzip -l.
O sandbox: o que uma Web Lens não pode fazer
Uma Web Lens é autossuficiente. Ela não acessa a rede, não usa câmera nem microfone e não lê sensores de movimento, e o localStorage e o IndexedDB começam vazios a cada abertura. Na prática, isso significa:
- Todo script, modelo, textura, fonte e som precisa ir dentro do zip.
- Nada de chamadas de analytics, configuração remota ou backend de multiplayer online.
- O progresso precisa ser salvo com o recurso Storage da Web Lens API.
A Web Lens API: rankings, Bitmoji e armazenamento
A API da Snap (pacote npm @snap/web-lens-api) conecta seu jogo ao Snapchat. Você chama init() uma vez na inicialização e verifica isSupported() antes de usar cada recurso. Fora do Snapchat, no computador ou no servidor de desenvolvimento local, a API responde a partir de um stub embutido com dados de exemplo, então dá para desenvolver sem celular — só mantenha o jogo jogável caso algum recurso esteja indisponível.
| Recurso | O que faz | O que vale saber |
|---|---|---|
| Leaderboards (rankings) | Envia uma pontuação e abre o painel de ranking do próprio Snapchat | As pontuações precisam ser inteiras; use ordem crescente para provas contra o relógio; amigos podem receber uma notificação quando a pontuação deles é superada |
| Bitmoji | Carrega o Bitmoji do jogador como um GLB 3D com rig ou uma imagem 2D de cabeça e ombros | A URL expira em cerca de cinco minutos; os Bitmoji vêm sem animações; sempre inclua um personagem padrão |
| Storage (armazenamento) | Um pequeno armazenamento chave-valor ligado à conta do jogador | Cada valor é um JSON de até 32 KiB, com 100 KiB no total por Lens por jogador; salve quando o progresso mudar e quando a página ficar oculta |
Um bom ranking recompensa algo que o jogador quer melhorar — precisão, velocidade ou sobrevivência — e deixa a próxima tentativa a um toque de distância. O progresso salvo merece o mesmo cuidado: decida o que precisa sobreviver a uma sessão (melhor pontuação, fase desbloqueada) e o que pode zerar sem problema.
Da build web à Lens publicada em 5 passos
- Escolha um fluxo de trabalho. Ou o PlayCanvas Engine como um projeto JavaScript normal (ideal com um assistente de programação com IA), criado com
npm create playcanvas@latest my-lens -- --starter web-lens, ou o PlayCanvas Editor, que roda no navegador e pode se conectar a assistentes de IA pelo Editor MCP Server. O starter já vem com layout vertical, área segura, caminhos relativos, empacotamento e Web Lens API configurados. - Adicione as PlayCanvas Skills (opcional).
npx skills add playcanvas/skillsensina agentes de programação com IA compatíveis a montar cenas, animações, HUDs e efeitos no PlayCanvas. - Desenvolva pensando no celular. Mantenha o HUD dentro de
env(safe-area-inset-*), porque o Snapchat desenha o próprio botão de fechar perto do topo; escale o movimento pelo tempo decorrido (muitos celulares rodam a 120 Hz); inicie o áudio a partir de um gesto do usuário e pause quando a Lens ficar oculta. Importe as classes da engine pelo nome para o bundler conseguir descartar o código não usado, comprima as texturas e deixe os source maps de fora. - Integre a API. Envie as pontuações no game over, carregue um Bitmoji se quiser e salve o progresso com o Storage.
- Empacote, faça o upload e envie. Em um projeto criado com o starter,
npm run packagegera o zip e o confere com as regras da Snap. Depois, entre no My Lenses, crie uma Web Lens, faça o upload do zip e adicione um nome, um ícone PNG de 512 × 512 e um vídeo de prévia de 5 segundos em 720 × 1280. Depois da revisão, os jogadores podem encontrar o jogo pelo nome ou pelo Snapcode.
Prefere não programar nada? O Easy Lens, criador de Lenses com IA da Snap, agora consegue gerar jogos Web Lens com PlayCanvas a partir de um prompt de texto; ele está disponível para assinantes Lens+ no Easy Lens web.
Quais jogos combinam melhor com uma Web Lens?
| Combinam bem | Não combinam |
|---|---|
| Arcade, puzzle e jogos de bater pontuação com um polegar só | Jogos na horizontal ou de teclado e mouse |
| Sessões curtas com recomeço instantâneo | Sessões longas que dependem de servidor |
| Assets pequenos e comprimidos | Downloads grandes de assets em tempo de execução |
| Competição baseada em ranking | Multiplayer online em tempo real |
Comece com um projeto pequeno, em que o caminho da abertura até a jogatina seja curto. Teste em um celular de verdade os controles de toque, as bordas da tela, o áudio, a pausa e o recomeço (npx vite preview --host permite abrir a build no navegador do celular), e anote cada ajuste específico da plataforma para que as próximas atualizações não desfaçam nada.
Para os detalhes oficiais, leia a documentação de Web Lenses da Snap, os requisitos da plataforma e o anúncio do PlayCanvas.
Perguntas frequentes
O que é uma Snapchat Web Lens?
Uma Web Lens é um app web que roda dentro do Snapchat como uma Lens. Você cria com tecnologias web, compacta a build em zip e faz o upload pelo My Lenses, sem Lens Studio.
Preciso usar o PlayCanvas?
Não. Qualquer framework web pode ser usado, mas a Snap recomenda o PlayCanvas, e a documentação usa PlayCanvas com Vite.
Qual o tamanho máximo de um jogo Web Lens?
O zip compactado pode ter até 8 MB, e o index.html na raiz dele, até 1 MB. São limites da fase beta, então confira os requisitos atuais antes de fazer o upload.
Uma Web Lens pode usar a internet ou servidores multiplayer?
Não. Uma Web Lens não acessa a rede, então todos os assets precisam ir no pacote e backends de multiplayer online não são uma opção. Os rankings funcionam pela Web Lens API.
Como salvo o progresso do jogador?
Use o recurso Storage da Web Lens API. O armazenamento normal do navegador começa vazio toda vez que a Lens é aberta.
Dá para ganhar dinheiro com um jogo Web Lens?
Criadores elegíveis podem entrar no Lens+ Payouts, que divide a receita das Lenses marcadas como exclusivas para assinantes Lens+ e Platinum, e a Snap está aceitando propostas de jogos para financiar.
