O que é e como funciona na prática
Confete que explode é um efeito visual onde pequenos fragmentos coloridos se espalham radialmente a partir de um ponto específico da tela, simulantopressão e dispersão. No desenvolvimento web, isso geralmente é implementado com canvas 2D ou WebGL, usando um motor de partículas simples. O resultado visual é rápido e leve quando bem feito, mas é mais complicado do que parece deixar funcionando em todos os navegadores sem surpresas. A lógica básica envolve definir um ponto de origem, criar dezenas ou centenas de partículas com propriedades individuais de posição, velocidade, aceleração, rotação, escala e opacidade, e então atualizar cada frame aplicando gravidade, arrasto e eventualmente turbulência. Cada partícula é desenhada como um retângulo ou polígono simples, com cores variadas e rotação aleatória. O ciclo de vida de cada partícula termina quando sua opacidade chega a zero ou ela sai da área visível, e então ela é reciclada ou destruída.
Como fazer um confete que explode funcionar corretamente
Eu já passei por um problema específico que ninguém comenta: quando você dispara o efeito em telas com scroll ativo, especialmente em mobile, a posição do clique vem em coordenadas da viewport mas o canvas às vezes não está alinhado corretamente com a posição visual dos elementos, principalmente se o site usa position: fixed ou transformações CSS. A solução prática foi calcular a posição relativa do canvas dentro do documento usando getBoundingClientRect() e subtrair o scrollY e scrollX antes de atribuir o ponto de explosão. Sem isso, o confete explode no lugar errado e parece um bug aleatório que você passa horas tentando debugar. O código básico funciona assim: você captura o evento de clique, converte as coordenadas para o espaço do canvas, inicia o loop de animação com requestAnimationFrame, e em cada frame atualiza todas as partículas. Um loop típico tem entre 80 e 200 partículas, dependendo da densidade desejada. A duração total de uma explosão completa gira em torno de 1,5 a 3 segundos.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Um detalhe importante que os tutoriais iniciantes ignoram: você precisa limitar a taxa de renovação das partículas. Se o usuário clicar cinco vezes seguidas rapidamente, todas as explosões se sobrepõem e o canvas pode travar. O workaround é manter um contador de explosões ativas e descartar novas entradas se já houver mais de duas simultâneas, ou adicionar um cooldown de 300ms entre disparos. Isso reduz visual clutter e mantém a performance estável.
Implementação técnica e alternativas
Para quem quer algo pronto, existem bibliotecas como canvas-confetti que resolve a maioria dos casos comuns. A configuração padrão leva cerca de 10 linhas de código e funciona bem em desktop. No entanto, a biblioteca tem limitações sérias: ela não suporta facilmente formas customizadas de confete, não permite controle fino da gravidade ou do arrasto, e a versão gratuita não expõe APIs para detectar quando todas as partículas terminaram, o que é útil se você precisa encadear animações ou liberar um próximo elemento da interface após a explosão. Se você precisa de algo mais elaborado, como confetes que formam um texto antes de explodir, ou que reagem ao movimento do mouse durante a trajetória, precisar construir do zero. Nesse caso, usar uma classe Particula com métodos update() e draw() separados é o padrão mais limpo. Armazene as partículas em um array, remova as inativas a cada frame e adicione novas conforme necessário. O custo computacional de 150 partículas em um canvas 2D é praticamente zero em qualquer dispositivo pós-2018, mas em dispositivos muito antigos ou em abas com GPU suspensa, a taxa de quadros pode cair para valores irritantes.
Outro ponto que merece atenção: o uso de mix-blend-mode: screen ou overlay no canvas pode dar um efeito visual muito melhor, mas isso quebra em alguns navegadores mais antigos e em impressões. Se o projeto precisa funcionar em cenários corporativos ou educacionais com hardware antigo, mantenha o blend mode padrão e confie apenas na transparência Alpha das partículas para o efeito de sobreposição. O efeito de confete que explode é basicamente um sistema de partículas com física simplificada. Não tem mágica. A qualidade do resultado depende de três coisas: enough particles, correct coordinate transforms, and proper lifecycle management. Fazer esses três itens direito resolve 90% dos problemas. O resto é ajuste fino de aparência que não afeta a funcionalidade.
