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
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.
