# Labareda

Chamas sobem da base da página, o calor faz o conteúdo ondular e faíscas laranja voam para cima.

> Labareda é um componente experimental do THM Componentes que põe fogo num bloco de HTML real: chamas sobem da base, o calor faz o conteúdo ondular, faíscas voam e uma fumaça leve vela o alto. Tudo roda num shader WebGL2, e o conteúdo continua funcionando por baixo. Serve para peças de campanha e demos de impacto.

- Categoria: Efeitos especiais
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Experimental: usa uma API de navegador ainda em teste, com alternativa automática quando ela não existe
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/labareda/

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

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

## Componentes relacionados

- [Crisol](https://vibecode.thmtecnologia.com/componentes/crisol/): Seu HTML de verdade passa por um efeito gráfico da placa de vídeo, como ondas de água, e segue clicável.
- [Remanso](https://vibecode.thmtecnologia.com/componentes/remanso/): O conteúdo da página parece estar sob uma lâmina d'água e solta ondas por onde o mouse passa.
- [Anáglifo](https://vibecode.thmtecnologia.com/componentes/anaglifo/): Ao mover o mouse sobre a página, o vermelho e o azul se descolam do conteúdo, como uma imagem 3D vista sem os óculos.
- [Brasa](https://vibecode.thmtecnologia.com/componentes/brasa/): A foto se desfaz em poeira de baixo para cima, com uma borda laranja que brilha como papel queimando.
- [Varal](https://vibecode.thmtecnologia.com/componentes/varal/): O conteúdo da página se dobra e ondula devagar, como um pano leve balançando com a brisa.

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