Fire, computed live.
Livefire™ does not play back a flame. It burns one. Every frame the browser works out where the fire is, how hot it is, which way it is moving and what it looks like, and draws that. Nothing is pre-rendered, nothing is stored, nothing repeats.
It never repeats
There is no loop to spot and no seam to hide. Leave it on for an hour and it will not have shown the same frame twice. A video loop gives itself away in twenty seconds.
It behaves like fire
It starts inert and grows into a fire over a few seconds, as fuel arrives and catches. Flames lean, tear, pinch off and rejoin. Pockets flare up on their own and die back. None of it is scripted; it comes out of the burning itself.
It throws embers
Sparks lift off the actual tips of the flames, wherever they happen to be at that moment, and cool to dark flakes as they climb. They are not sprinkled on from a random spot.
The air moves
Above the flames the picture shimmers the way air does over a fire. It follows the heat that is really there, so it is strongest over the hottest flame and still over cold ground.
It lights the room
Put a chrome object in front of it and the flames are reflected in it, live, as they move. Hold the left mouse button on the fire above and watch the orb.
Zero assets
No video file, no image, no sprite sheet, no texture, no font. One script and one canvas tag. It weighs less than a single still photograph of a fire.
Against what is out there.
Every fire you have seen on a web page is one of four things. Here is what each of them does and does not do.
| Video loop | Noise shader | Sprite particles | Fluid toy | Livefire | |
|---|---|---|---|---|---|
| Never repeats | ✗ | ✗ | ✗ | ✓ | ✓ |
| Looks like real fire | ✓1 | ✗ | ✗ | ✗ | ✓ |
| Flares and dies on its own | ✗ | ✗ | ✗ | ✗ | ✓ |
| Embers from the flame tips | ✗ | ✗ | ✗ | ✗ | ✓ |
| Heat shimmer over the flames | ✗ | ✗ | ✗ | ✗ | ✓ |
| Reflected live in objects | ✗ | ✗ | ✗ | ✗ | ✓ |
| Fits any screen, stays sharp | ✗ | ✓ | ✓ | ✓ | ✓ |
| Tunable while it runs | ✗ | ✗ | ✗ | ✗ | ✓ |
| No files to download | ✗ | ✓ | ✗ | ✓ | ✓ |
| Reduced-motion aware | ✗ | ✗ | ✗ | ✗ | ✓ |
1 Until it loops. Noise shader: the scrolling-blob fire on every shader demo site. Sprite particles: flame-shaped images thrown upward, the game-engine default. Fluid toy: the drag-to-smear ink demo recoloured as fire.
Twenty knobs. All of them live.
Every control changes the fire that is already burning. Nothing restarts, nothing fades out and back in. Above the knobs, the panel reports what the fire is doing in real units: flame temperature, flame height, rise speed, burning rate and heat release, measured from the simulation as it runs, and the state of any point you hover.
Fuel and fire
Fuel feed is how fast fuel arrives at the bed and Burn rate how fast it is consumed once lit; the balance between them sets how much is burning. Kindling is how many seconds the fire takes to grow from inert to full when it is lit or relit. Height is how far the flames reach. Centre gap clears the middle of the screen so a title can sit in front of a fire on each side. Expansion is how much each flame swells as it burns.
Motion
Lift is how fast flames rise. Turbulence is how much they tear and twist on the way up. Swirl is how tightly they curl. Gust pushes the base sideways. Flicker is how restless the bed is. Exposure is the camera: the fire is rendered in high dynamic range, from dull red tips to a core a hundred times brighter, and this sets how much of that range the screen shows. Shadows, Highlights and Contrast grade that frame the way a colourist would, before it is mapped to the screen. Max fps caps the frame rate and Timestep sets the integration step; the fire runs in real time either way.
Texture and air
Detail adds fine structure inside each flame. Shimmer is the heat haze above it. Air ripple gives the whole picture a slow, liquid movement, or none.
Switches and colour
Breathing lets the fire ebb and surge on its own slow rhythm; off, it burns at full all the time. Embers, Chrome object and Pause do what they say. Eight flame colours are built in, from the natural soot flame to the colours metal salts give a fire (sodium, lithium, strontium, copper, boron, potassium) and the blue of methanol, and a colour picker takes any colour at all. Grid sets how finely the fire is computed: Auto picks by screen size, the higher settings are for strong GPUs and large screens.
What you get.
- Units
- The bed has a real width in metres (6 m by default, 1 m deep) and burns gasoline. Temperatures are in °C, speeds in m/s, burning in kg/s, heat release in MW, time in simulated seconds. Temperatures, speeds and flame height are measured from the running simulation. Heat release comes from the measured flame height through the standard line-fire correlation, and burning rate and fuel feed follow from gasoline's heat of combustion.
- Delivery
- One JavaScript module and one canvas tag. Drop it in any page, any framework, any CMS. No build step on your side.
- Dependencies
- three.js, loaded from a CDN or bundled with your site. Nothing else.
- Weight
- About 150 KB for the module. No images, no video, no sprite sheets, no fonts. Zero asset requests.
- Runs on
- Every current desktop and mobile browser with WebGL, which is all of them. Phones get the same fire at a load they can carry.
- Performance
- Watches its own frame rate and steps resolution down and back up to stay smooth on whatever it lands on. Stops drawing when scrolled out of view or when the tab is hidden, so it costs nothing while unseen.
- Layout
- Fills whatever box it is given, any size, any aspect ratio, and re-lays itself out on resize. Full-width fire, or fire on both sides of a clear centre for a headline.
- Accessibility
- Viewers who have asked their system for reduced motion get a single developed still frame of the fire instead of the animation.
- Tuning
- Twenty live parameters, four switches, eight flame colours plus a free colour picker, and five grid sizes, settable from the page at any time. Every parameter is bounded to the range in which the fire still looks like fire. Custom colourways and presets on request.
- Source
- Delivered as a protected, obfuscated module. Source code is not part of any licence.
Commercial licence.
Livefire™ is proprietary software, available under a commercial licence from Metere Industries, Inc. A licence covers one site or product, the tuned preset you want, and integration help. Custom colourways, custom layouts and exclusive variants are available.
Copyright © Metere Industries, Inc. All Rights Reserved. No part of Livefire™ may be copied, modified, reverse engineered or redistributed without a written licence.
Tell us where it is going, how big it will be on the page, and what it should feel like. You will get a price and a tuned demo link back.