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