Como ele é
É como olhar a página através do ar quente de uma fogueira. Na parte de baixo, chamas em vermelho, laranja e amarelo sobem e tremulam, mais altas no centro do que nas laterais. Acima delas, o próprio conteúdo ondula como miragem de asfalto no verão, com a distorção mais forte perto do fogo. Faíscas laranja sobem em pequenos pontos e somem pelo caminho, e uma fumaça leve vela a parte de cima. Tudo se move sem parar, sem depender do mouse. Intensidade do calor, escala das chamas e velocidade são ajustáveis.
Você pode estar procurando isto se pediu algo assim
- efeito de fogo queimando a página do site
- texto pegando fogo com fumaça e faíscas
- calor distorcendo o conteúdo tipo miragem
- algo de impacto para a página de uma campanha de lançamento
- chamas subindo por baixo do layout, estilo cartaz de filme
- efeito de brasa e faísca em cima do HTML
Também chamado de
- fire shader
- efeito de fogo
- heat distortion
- distorção de calor
- fogo em WebGL
- HTML em canvas
- flame effect
Quando usar
- Peças experimentais de campanha, como promoções relâmpago ou lançamentos
- Protótipos de páginas de jogos, música ou eventos com tema quente
- Demos de conceito para mostrar o que shaders fazem sobre HTML
Quando evitar
- Produção de cliente: depende de API experimental do navegador, como o próprio prompt alerta
- Conteúdo que precisa ser lido com calma, porque a base ondula sem parar
- Páginas que já têm outros efeitos em WebGL
Como pedir para a sua IA
Crie um protótipo de página de campanha com efeito de fogo em WebGL2 sobre o HTML ao vivo: chamas na base, distorção de calor e faíscas, com pausa fora da tela, quadro estático para movimento reduzido e HTML normal como alternativa.
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 Labareda
Labareda respeita quem prefere menos movimento?
Sim. O renderizador compartilhado de Labareda lê a preferência de movimento reduzido do sistema e pausa a animação, deixando as chamas congeladas num quadro. Ele também pausa fora da tela e com a aba oculta. O prompt do THM Componentes ainda pede à IA uma versão estática para esse caso.
Posso usar Labareda no site de um cliente?
O prompt do THM Componentes desaconselha: Labareda depende de uma API experimental do navegador e deve ficar em protótipos, nunca em produção de cliente. Quando a API falta, o componente usa uma captura do conteúdo como alternativa automática, o que serve para apresentar a ideia, mas não substitui um site estável.
Labareda deixa o conteúdo clicável?
Deixa. Labareda desenha o fogo num canvas por cima, que não captura cliques, e mantém o conteúdo original na página para interação e leitores de tela. O componente não reage ao mouse: as chamas se movem sozinhas, e a intensidade, a escala e a velocidade se ajustam por props.
