The oven knob

Dials, Physics, SVGGSAP, CanvasAdvancedCompressed weight: Demo 17 KBGSAP 28 KBFreeDownload the zip

The mode knob of an oven in cobalt enamel: a bakelite pointer knob in a brass ring, with the symbols printed round it. It turns and clicks from mode to mode: it gives a little in its notch, then a spring throws it into the next one, the mark latches on to the ring and the symbol jumps. Behind the glass the oven does what the mode says: the lamp comes on, the fan spins up and blurs, the elements heat from dull red to orange, their colour worked out with Planck's law, and their light falls round the inside while the hot air makes the view shimmer.

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 oven knob</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/encode-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the mode knob of an oven in cobalt enamel: a bakelite pointer knob that clicks from mode to mode, and above
         it the oven itself, seen through the door, waking the elements, the fan and the lamp of the mode it is
         turned to. The window and the printing round the knob are drawn by the script -->
    <div class="wrap">
      <section class="oven" aria-label="Oven" data-oven data-autoclic>
        <div class="oven__window" aria-hidden="true">
          <canvas class="oven__cavity" data-cavity></canvas>
        </div>
        <div class="oven__controls">
          <div class="dial" role="slider" tabindex="0" aria-label="Oven mode" aria-valuemin="0" aria-valuemax="6" aria-describedby="oven-line" data-dial>
            <svg class="dial__print" viewBox="-76 -76 152 152" aria-hidden="true" data-print></svg>
            <div class="dial__hub" aria-hidden="true" data-hub>
              <span class="dial__ring"></span>
              <span class="dial__shade"></span>
              <svg class="dial__knob" viewBox="-40 -40 80 80" data-knob></svg>
            </div>
          </div>
          <div class="read">
            <p class="read__name" aria-hidden="true" data-name><span></span></p>
            <p class="read__line" id="oven-line" data-line></p>
          </div>
        </div>
        <p class="sr" aria-live="polite" data-live></p>
      </section>
    </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.

19 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 oven knob” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background the front of an oven in cobalt enamel, 360 pixels wide: at the top the door's window, black glass with the oven inside seen in perspective (the walls, the rack on its runners, the fan at the back inside the ring element, the top element, the grill and the bottom element, the lamp in a corner); below, the knob, a black bakelite pointer knob in a brass ring, with the symbols of the seven modes printed in white round it as on a real oven: Off, the bulb for the light, the snowflake for defrosting, the fan in its ring for fan baking, the oven with top and bottom heat for baking, the grill and the pizza. On the right the mode's name, large, and a line saying what the oven does. When the page opens the knob is on Off and a hand turns it to Bake: it clicks on Light (the lamp comes on), Defrost (the fan starts), Fan bake, and stops on Bake, where the top and bottom elements heat up and glow orange. It turns by taking it and going round, with a finger or the mouse: in its notch it gives a little, then halfway a spring throws it into the next notch, where it settles with a small bounce; the mark under the new symbol reaches out to the brass ring, the symbol jumps a little outwards and back, and the new name comes in from the side the knob is turning to. A tap on a symbol turns the knob there, clicking on every mode on the way; the wheel and the keys work too. Inside the oven every mode does its part: the lamp comes on at once, the fan speeds up in half a second and blurs, and slows down more gently; the elements take a moment to heat up and turn dull red, then orange (the grill, hotter, nearly yellow), and when they are turned off they fade with a red tail. Their light colours the walls, the rack and the fan, and the symbol of the chosen mode lights up in the same colour. When the air is hot the view shimmers a little, as over a road in summer.

How it works

An aim that jumps, and a spring

The hand does not set the knob's angle: it turns a pretend angle h (going round, the difference between two atan2 readings round the middle, brought between −180 and 180, is added up, and near the middle it is not used). The knob aims at the nearest notch, n·PITCH, plus CREEP times how far the hand has turned past it: so in its notch it gives a little. Halfway between two notches the aim jumps by PITCH·(1 − CREEP), and a spring, x'' = −k(x − aim) − 2ζ√k·x' with CLICK = [k, ζ], throws the knob over: with ζ = 0.5 it gets there in 50 milliseconds, overshoots by six degrees and settles in a quarter of a second. The mode changes exactly halfway, as the knob clicks. Past the first and the last notch the aim gives 5 degrees at most, as against a stop.

Finger, wheel, keys and symbols

The dial is a role slider with aria-valuemin 0, aria-valuemax 6, aria-valuenow and aria-valuetext with the mode's name, and the line that explains it in aria-describedby. Arrows, Page Up and Down (three modes), Home and End put the aim on the right notch; the wheel adds up its moves and asks for a notch every 50 pixels. A tap on a symbol, anywhere in its slice of the ring, from the brass to a little past the dial, turns the aim there with a power2.out tween: fast at first, so the first click comes at once, and every mode on the way clicks. When the knob is let go, or the turn is over, an aria-live region says the name and the line.

The light map

The inside of the oven is a box seen from an eye a little below the middle. Once only, for every point of a 152 by 80 grid a ray goes from the eye through the glass to the wall it hits, and for each of the five sources (four elements and the lamp) weight·cos/d² is added up along the source: five maps. Every frame they are mixed with the light each source gives off at that moment, plus a share of bounced light that drops in the corners, and become pixels through a soft shoulder (1 − e^(−x)) and the gamma, from a table read by the square root of the light so the dark has no steps. The rack, the fan and each element take the light of their points the same way.

The colour of hot metal

Each element has a temperature that goes towards its working heat (985–1060 K) or towards the room, taking HEAT[0] to warm up and HEAT[1] to cool down. Its colour comes from Planck's law at 610, 549 and 465 nanometres, divided by the red at 1000 K: it climbs so steeply that below 700 K nothing shows, at 900 it is dull red and at 1000 orange, and the soft shoulder takes the hotter grill towards yellow instead of burning it white; the light the grill sends to the walls is held at 42%, so the oven stays in one range in every mode. The tube is drawn in pieces, thicker in front and thinner at the back, with the glow as a soft shadow (shadowBlur times the scale, since it does not follow the transform) added on, a hotter line down the middle and a glint of the lamp on top.

The fan and the hot air

The fan has inertia: it speeds up in half a second and slows down in a second and a half. Its six blades are drawn blurred, repeated up to 22 times over the angle they turn through in one frame, as the eye sees them; the nut in the middle is a hexagon. The air warms after the elements, and while it is hot the window is drawn again in thin rows slid sideways on two rising sine waves, HAZE pixels high: first the still picture, then the rows over it, so no gap is ever left at the edge.

The knob with the light standing still

The knob is an SVG: a round body with a radial gradient and, on top, the pointer, which turns. The light comes from the top left and has to stay there: the pointer's shadow is the same shape moved by a fixed step and then turned (translate before rotate), clipped by the body; the pointer's gradients are in userSpaceOnUse and every frame they turn back with gradientTransform rotate(−a), so the lit edge stays on the left. At every click the mark under the symbol reaches out to the brass with elastic.out, the symbol jumps outwards along its radius and back, and its parts (the top and bottom lines, the zigzag, the ring) take the colour of the element they stand for.

Values to change

Name	File	Default	What it changes
`START`	script.js	`4`	The mode when the page opens: 0 is Off, 1 Light, 2 Defrost, 3 Fan bake, 4 Bake, 5 Grill, 6 Pizza.
`PITCH`	script.js	`45`	The degrees between two positions of the knob.
`CREEP`	script.js	`0.3`	How much the knob gives before it clicks over, as a share of the hand's turn (0 = it does not give).
`CLICK`	script.js	`[2400, 0.5]`	The spring that throws the knob into its notch: how stiff, and how damped (1 = no bounce).
`HEAT`	script.js	`[0.5, 2.6]`	The seconds an element takes to heat up and to cool down.
`FAN`	script.js	`4.5`	The fan's speed, in turns a second.
`HAZE`	script.js	`0.6`	How far the hot air bends the view, in pixels (0 = not at all).

Try them in the Playground

When to use it

For an appliance's panel in a home app, the configurator of an oven or a kitchen, the site of an appliance brand, and in general for a choice between a few named modes, where each mode changes how something you can see behaves.

On phones

The oven is 360 pixels wide and narrows with the screen (at 390 it is 358 wide): every size follows its width through container units (cqw). A finger turns the knob going round without scrolling the page, since touch-action none is only on the dial; a tap on a symbol turns the knob there, and each symbol answers anywhere in its slice of the ring, so it is a big target. The hover state is only there with a mouse.

With reduced motion

The knob goes straight to its notch, with no give, no spring and no bounce, and the symbols do not jump; the name changes with a fade. Inside the oven the light and the elements only change with a fade, the fan stays still with its blur and the hot air does not shimmer. When the page opens the knob is already on its mode and the oven fades in.

Pitfalls

A tone table read linearly put steps in the dark, its first step already at 20 out of 255: it is read by the square root of the light, and the dark inside gets all its values.
The rows slid by the hot air left a dark gap at the edge of the opening: the still picture is drawn first, then the slid rows over it.
A fan at 11 turns a second, blurred over 1/45 of a second, became a flat disc that did not look like it was turning: it turns at 4.5 and the blur is one frame's, so the blades are seen going round.
Cold steel took the colour of the warm light and looked like copper: metal reflects the light but greys it, and its colour is mixed 65% with its luminance.
A tap on a symbol with power2.inOut made the first click a quarter of a second later, and the tap seemed lost: with power2.out the click comes at once.
The symbols were 22-pixel targets: each one answers anywhere in its slice of the ring, and the dial takes the finger a little past its edge, through a ::before.
The grill, hotter, gave off five times the light of the other elements, and the cold steel parts near it turned white as if they were on: its light on the walls is held back, and a tube takes its light as the mean of eight points along its whole length, not at a single point that can sit right next to the grill.
The name sliding out sideways was cut in half by the line's overflow hidden: the line no longer clips, there is the gap between the columns.

Libraries

GSAP 3.15.0, Encode Sans (font variabile) 5.3.0.

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

Testing

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