# Folia Uma explosão de papeizinhos coloridos sobe e cai na tela quando a pessoa conclui uma compra, um cadastro ou uma meta. > Folia é um componente do THM Componentes que solta uma explosão de confete colorido na tela, desenhada em canvas. O componente dispara ao aparecer, por comando no código ou pelo botão que já vem junto, e permite ajustar quantidade, ângulo, abertura, velocidade e cores. Serve para celebrar compra concluída, cadastro finalizado ou conquista. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, canvas-confetti - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/folia/ ## Como ele é É o momento da festa em que alguém estoura um tubo de papel picado. Pequenos quadrados e círculos em azul, roxo, rosa, verde, amarelo, laranja e magenta saem de um ponto, sobem num leque, giram no ar e caem com gravidade até sumir. Na demo, um botão no meio de um card dispara 120 pedaços de uma vez a partir do centro. O botão que acompanha o componente faz o confete sair do próprio botão clicado. Quantidade, direção, abertura do leque, velocidade, gravidade, vento lateral, tamanho e formas são ajustáveis. ## Você pode estar procurando isto se pediu algo assim - “chuva de confete quando a pessoa conclui a compra” - “comemorar quando o cliente termina o cadastro” - “efeito de festa ao clicar no botão” - “papel picado caindo na tela quando bate a meta” - “animação de celebração na página de obrigado” - “botão que solta confete ao ser clicado” - “algo tipo fogos de artifício quando o usuário ganha um prêmio” ## Também chamado de confete, confetti animation, chuva de confete, efeito de celebração, celebration effect, confetti cannon, papel picado animado ## Quando usar - Página de obrigado depois de uma compra ou assinatura - Fim de cadastro, de onboarding ou de um formulário longo - Conquistas, metas batidas e níveis em apps com gamificação - Botão de resgate de cupom ou de prêmio ## Quando evitar - Ações frequentes e rotineiras, em que a festa vira ruído - Momentos delicados, como cancelamento, cobrança ou erro - Disparos automáticos ao carregar a página, que surpreendem quem é sensível a movimento ## Como pedir para a sua IA ```text Adicione uma chuva de confete na página de obrigado depois da compra, saindo do centro com as cores da marca, carregada só no navegador e desligada para quem prefere menos movimento. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Folia ### Folia respeita quem prefere menos movimento? Não por padrão. Folia usa uma biblioteca que tem a opção de não disparar para quem ativa a redução de movimento, mas ela vem desligada. O prompt do THM Componentes pede à IA uma versão estática para esse caso, e ligar essa opção nas configurações do disparo resolve. ### Como uso Folia em Nuxt com SSR? Folia só cria o disparo no navegador, depois que o componente é montado. O prompt do THM Componentes pede para instalar a dependência canvas-confetti, carregar o componente sob demanda e, no Nuxt, colocar o componente dentro de ClientOnly com uma alternativa estática. ### Dá para fazer o confete sair do botão clicado? Dá. Folia vem com um botão próprio que lê a posição dele na tela e faz a explosão partir dali, útil em botões de resgatar cupom ou concluir pedido. Por ser um botão nativo, funciona também pelo teclado. Também dá para disparar pelo código, com quantidade, ângulo e cores diferentes a cada vez. ## Componentes relacionados - [Garimpo](https://vibecode.thmtecnologia.com/componentes/garimpo/): Um cartão coberto por uma camada colorida que a pessoa raspa com o mouse ou o dedo para descobrir o prêmio. - [Chispa](https://vibecode.thmtecnologia.com/componentes/chispa/): Pontinhos de luz que piscam e sobem devagar, como purpurina no ar, atrás de um título ou de toda a seção. - [Bólido](https://vibecode.thmtecnologia.com/componentes/bolido/): Pequenos riscos com cauda atravessam o card na diagonal, como estrelas cadentes, cada um no seu ritmo. - [Respingo](https://vibecode.thmtecnologia.com/componentes/respingo/): Botão que solta um círculo de cor a partir do ponto exato do clique, que cresce e some em menos de um segundo. - [Baralho](https://vibecode.thmtecnologia.com/componentes/baralho/): Avisos que surgem no canto da tela, empilhados como cartas, e somem sozinhos ou com um arraste para o lado. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.