# Labareda

Flames rise from the bottom of the page, heat makes the content ripple and orange sparks fly upward.

> Labareda is an experimental THM Componentes component that sets a block of real HTML on fire: flames rise from the bottom, heat makes the content ripple, sparks drift up and light smoke veils the top. It all runs in a WebGL2 shader while the content keeps working underneath. It suits campaign pieces and high-impact demos.

- Category: Special effects
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Experimental: uses a browser API still in testing, with an automatic fallback when it is missing
- Technology: Vue 3, TypeScript, Tailwind CSS v4, WebGL
- Interaction: None: the effect runs on its own
- URL: https://vibecode.thmtecnologia.com/en/components/labareda/

## What it looks like

It is like looking at the page through the hot air above a campfire. At the bottom, red, orange and yellow flames rise and flicker, taller in the center than at the sides. Above them, the content itself ripples like a mirage over summer asphalt, with the strongest distortion near the fire. Orange sparks rise as small dots and fade along the way, and light smoke veils the top. Everything moves continuously, with no mouse needed. Heat strength, flame scale and speed are adjustable.

## You may be looking for this if you asked for something like

- “a fire effect burning across my web page”
- “text catching fire with smoke and sparks”
- “heat distortion warping the content like a mirage”
- “something bold for a product launch campaign page”
- “flames rising from the bottom of the layout, like a movie poster”
- “an embers and sparks effect over HTML”

## Also known as

fire shader, flame effect, heat distortion, heat haze effect, WebGL fire, burning page effect

## When to use

- Experimental campaign pieces, such as flash sales or launches
- Prototypes for game, music or event pages with a fiery theme
- Concept demos that show what shaders can do over HTML

## When to avoid

- Client production work: it relies on an experimental browser API, as the prompt itself warns
- Content that needs calm reading, since the bottom keeps rippling
- Pages that already run other WebGL effects

## How to ask your AI

```text
Build a campaign page prototype with a WebGL2 fire effect over live HTML: flames at the bottom, heat distortion and sparks, paused off screen, a still frame for reduced motion and plain HTML as the fallback.
```

With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.

## Questions about Labareda

### Does Labareda respect reduced motion settings?

Yes. The shared renderer behind Labareda reads the system reduced motion preference and pauses the animation, leaving the flames frozen in one frame. It also pauses off screen and when the tab is hidden. The THM Componentes prompt still asks your AI for a static version in that case.

### Can I use Labareda on a client website?

The THM Componentes prompt advises against it: Labareda relies on an experimental browser API and belongs in prototypes, never in client production. When the API is missing, it uses a capture of the content as an automatic fallback, which works for presenting the idea but does not replace a stable site.

### Does Labareda keep the content clickable?

Yes. Labareda draws the fire on a canvas on top that does not catch clicks, and keeps the original content on the page for interaction and screen readers. It does not react to the mouse: the flames move on their own, and strength, scale and speed are set through props.

## Related components

- [Crisol](https://vibecode.thmtecnologia.com/en/components/crisol/): Your real HTML runs through a graphics card effect, like ripples on water, and stays clickable.
- [Remanso](https://vibecode.thmtecnologia.com/en/components/remanso/): Your page content looks like it sits under a thin layer of water and ripples wherever the mouse goes.
- [Anáglifo](https://vibecode.thmtecnologia.com/en/components/anaglifo/): As the mouse moves over the page, red and blue peel away from the content, like a 3D image seen without the glasses.
- [Brasa](https://vibecode.thmtecnologia.com/en/components/brasa/): The photo crumbles into dust from the bottom up, with an orange edge that glows like burning paper.
- [Varal](https://vibecode.thmtecnologia.com/en/components/varal/): Your page content folds and sways slowly, like a light piece of cloth in a breeze.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).