The fireplace switch

Toggles, Physics, TransitionsCanvas, GSAPAdvancedCompressed weight: Demo 14 KBGSAP 28 KBFreeDownload the zip

The Fireplace tile of a smart home app, and the switch is the gas fireplace: a slot of black glass set into the wall. Turned on, the gas catches behind the knob and the flame runs after it along the burner, then rises into a real fire, a fluid worked out on every frame in Planck’s colours, that warms the knob and the wall. Turned off, the knob sweeps back through the fire and the flames die down behind it.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The fireplace switch</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/wix-madefor-text@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tile of a gas fireplace in a smart home app, and the switch is the fireplace: a slot of black glass set
         into the wall. Turned on, the knob draws the flame out of the burner behind it and the gas catches all the
         way along; turned off, the knob sweeps back through the fire and the flames die down behind it -->
    <div class="tile" data-tile>
      <span class="tile__warmth" aria-hidden="true" data-warmth></span>
      <span class="tile__text">
        <label class="tile__name" for="fire-switch" data-label>Fireplace</label>
        <span class="tile__room" id="fire-room">Living room</span>
      </span>
      <button class="fire" id="fire-switch" type="button" role="switch" aria-checked="false" aria-describedby="fire-room" data-switch data-autoclic>
        <span class="fire__box" aria-hidden="true"></span>
        <canvas class="fire__flames" aria-hidden="true" data-flames></canvas>
        <canvas class="fire__flames fire__was" aria-hidden="true" data-was></canvas>
        <span class="fire__glass" aria-hidden="true"></span>
        <span class="fire__knob" aria-hidden="true" data-knob>
          <span class="fire__puck" data-puck>
            <span class="fire__lit fire__lit--left" data-lit-left></span>
            <span class="fire__lit fire__lit--right" data-lit-right></span>
          </span>
        </span>
      </button>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

21 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The fireplace switch” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background a light grey pill tile with the words Fireplace and under them Living room, and on the right the switch: a slot of black glass set into the wall, with a long reflection on the glass, a thin burner at the bottom, a glass floor under it, and a big white knob. Turned on, the knob runs to the other end and bounces a little; as soon as it leaves, the gas catches behind it: a line of small flames comes out from under the knob and runs along the burner after it, every jet flaring up a moment as it catches, and in less than a second the flames rise into a real fire, yellow at the heart, orange at the edges and blue at the foot, that licks, curls and never sits still. The fire shows faintly in the glass floor, warms the side of the knob that faces it orange and throws a warm light on the wall round the slot. Turned off, the knob sweeps back through the fire and shuts every jet it passes: behind it the flames sink, turn small and red and go out, while the last of the hot air rises away and the light on the wall goes out. The knob can be dragged too, with a finger or the mouse: the fire burns as far as it goes. Under the mouse the knob leans towards the other side; pressed, it widens. A click on the words turns it on and off as well.

How it works

A real switch

It is a button with role switch and aria-checked, with its own label for (Fireplace) and aria-describedby on the room: Enter and Space turn it on and off, so does a click on the words. Inside are the back of the slot with the burner and the floor, the canvas of the fire, the glass in front (inner shadow and reflection) and the knob, with two orange layers on its sides that the script lights as much as the fire lights them. The tile has a warm layer of its own, the light on the wall.

The air is a fluid

The slot above the burner is a grid of cells a pixel and a half wide, with a velocity, a temperature and some unburnt gas (Jos Stam’s stable fluids). Every frame: the gas burns and heats the air, hot air rises (a push that grows with the temperature, held back by the still air round it), vorticity confinement puts back the swirl the grid smooths away, the velocity is carried along itself, and a single pressure projection, Gauss-Seidel started from the last frame’s pressure, makes it free of divergence. The walls are closed at the sides and open at the top and at the bottom, where the gas and the air come in.

The burner

Every column is a jet: the gas comes in as a stream through the bottom edge, as rich as a noise of its own says, flickering, and pushed upwards. A front runs along the burner behind the knob at FRONT pixels a second and opens the jets it reaches; a jet that has just caught gets a spark of heat at its foot and pushes harder for a moment, so the lighting can be seen running. The knob shuts every jet it passes on the way back, and the gas left burns away in a few tenths of a second.

Sharp flames

The gas and the heat are carried with MacCormack: forwards, then back, and half the difference put back, held between the four cells it came from. The plain carry flattened the fire into a curtain; this way the tongues stay apart and end in points. A drop of viscosity on the velocity removes the zigzag from one row to the next that the sharp carry would have turned into stripes.

Planck’s colours

At the start a table of 256 temperatures: Planck’s law integrated against the CIE 1931 colour matching functions (in the gaussian form of Wyman, Sloan and Shirley), taken to linear sRGB. The soot glows where the gas burns and is hot, with the colour of a black body at the temperature of the air; the exposure is done channel by channel, so the red fills up first and the heart of the fire goes from orange to yellow as it does to the eye. The blue is the gas still burning cool, only at the foot. The picture is made at two pixels a cell and laid down enlarged; under the burner the same picture upside down, faint and reddened, is the reflection in the glass.

Light, knob, rest

The light of every column of the fire, weighed by its distance, lights the left or right side of the knob and the light on the wall, always in the colour of the black body. The knob is a mass on a spring with walls (SPRING, BOUNCE) and pushes the air gently as it runs; dragged past 5 pixels it captures the pointer, and let go, a fast flick decides by its direction, otherwise the half it is in. Once the fire is out and the knob still, the simulation goes to sleep and draws nothing more.

Values to change

Name	File	Default	What it changes
`FRONT`	script.js	`520`	How fast the gas catches along the burner behind the knob, in pixels a second.
`GAS`	script.js	`1`	How much gas the burner lets through: how tall the flames burn (0.7 low, 1.3 high).
`HOT`	script.js	`1900`	The hottest the flames get, in kelvin: lower a deeper red, higher a whiter yellow.
`BLUE`	script.js	`1`	How much blue shows at the foot of the flames, where the gas burns.
`SWIRL`	script.js	`12`	How much the flames curl and lick: the swirl put back into the air.
`GLOW`	script.js	`0.75`	How much the fire lights the knob and the wall round the slot.
`MIRROR`	script.js	`0.32`	How much the flames show in the glass floor under them (0, none).
`SPRING`	script.js	`170`	How hard the spring pulls the knob to its end of the slot.
`BOUNCE`	script.js	`0.3`	How much of its speed the knob keeps bouncing off the end (0, no bounce).
`PEEK`	script.js	`4`	How far the knob leans towards the other side under the mouse, in pixels.

Try them in the Playground

When to use it

For the switch of something that makes fire or heat: a gas or electric fireplace, a stove, a patio heater, a garden fire pit, in a smart home or hotel app. The fire says by itself what the switch turns on, and the light on the wall says it is warming the room. In a list of devices it is best used for one only, next to plain switches.

On phones

The tile is 380 pixels wide and narrows to the screen (358 at 390 pixels), the switch stays 184 by 56. A tap turns it on and off; a finger dragged sideways takes the knob along and the fire burns as far as it goes, while up and down the page still scrolls (touch-action: pan-y). No leaning under the mouse, which a finger does not have. The fire costs a couple of milliseconds a frame while it burns, and nothing when it is off.

With reduced motion

The fire is a still picture, worked out a little at a time while the page opens: no flame changes its shape. Turned on it warms up where it stands, from dark red to yellow, in a little over a third of a second, and turned off it cools down the same way, like a fire dying down; the knob fades out at one end and back in at the other, and the light on the knob and on the wall fades in and out. Pressed, it does not widen and cannot be dragged; clicks and keys work as always.

Pitfalls

With the bottom of the slot closed the heat stayed spread over the burner and never rose: a hot layer as wide as the grid is in balance with the pressure, because no air can come in from below. The bottom is open: the gas and the air come in through it, and the flames rise.
With no friction hot air sped up forever and the gas reached the top unburnt, a blue curtain: now the still air round the flames holds them back, the gas burns in a few pixels and the heat cools fast while it is very hot.
With the hot air glowing the fire was a blurred orange curtain, and with the plain carry the tongues ran together: the soot glows where the gas burns, and gas and heat are carried with MacCormack, held between the cells they came from.
Gas put into the bottom row once a frame came out in horizontal stripes: the sharp carry kept every frame’s puff apart. Now it comes in as a stream through the bottom edge, and a drop of viscosity removes the zigzag of the velocity from one row to the next.
The black body’s colour, normalised and multiplied by the brightness, never got to yellow: the flames were brown. Exposing channel by channel fills the red first and then the green, as the eye does.
The knob treated as a solid that wipes out the fire left a vertical cut in the flames as it passed: now it only pushes the air, gently, and the fire behind it stays hidden. The yellow reflection in the dark glass turned olive green: it is reddened with a source-atop layer. In the reduced motion, fading the picture did the same; now the fire cools down where it stands.
The simulation never went to sleep: the jets under the knob, off, counted as open. Only those where there really is a burner count. Two projections started from zero cost 3.7 milliseconds a frame: a single one, starting from the last pressure, costs about 2.4 with the drawing.

Libraries

GSAP 3.15.0, Wix Madefor Text (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 14 KB; the libraries: GSAP 28 KB.

Testing

Tested on 6 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.