The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The chili heat slider
The spice level of an order chosen on a chili pepper: pulled by its tip it grows longer, ripens from green to deep red, then sweats, catches fire and trembles. Its body is a jelly of weights and springs that bulges and stretches, and the figure gets bolder and wider with the heat.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The chili heat slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- how hot a taqueria makes your order, chosen on a chili pepper: the stalk is held at the left end and the
pepper itself is the slider's fill. Pulled out it grows longer, ripens from green to red, starts sweating and
at the top catches fire. The pepper, the flames, the sweat and the rail are drawn by the script on the canvas;
the grip only carries the keyboard's ring -->
<div class="heat" data-heat>
<div class="heat__head">
<span class="heat__label" id="heat-label">Spice level</span>
<span class="heat__value" aria-hidden="true"><span class="heat__number" data-number>3</span><span class="heat__of" data-of>/10</span></span>
</div>
<div class="heat__track" role="slider" tabindex="0" aria-labelledby="heat-label" aria-orientation="horizontal" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" aria-valuetext="Mild, 3 of 10" data-track data-autoclic>
<canvas class="heat__canvas" aria-hidden="true" data-canvas></canvas>
<span class="heat__grip" aria-hidden="true" data-grip></span>
</div>
<!-- the three words of the scale: each one sits in the middle of its heats, and a press on it goes there -->
<div class="heat__scale" aria-hidden="true" data-scale>
<span class="heat__word" data-word>Mild</span>
<span class="heat__word" data-word>Hot</span>
<span class="heat__word heat__word--top" data-word>Diablo</span>
</div>
</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.
37 values to change
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 chili heat slider” from Animorio and fit it into my siteWhat it does
On a white background the words Spice level and on the right the heat figure, 3 out of 10, in green. Below, on a sand-coloured rail, a shiny green chili with its curled stalk and lobed cap, held at the left: its tip is the knob. Under the rail ten marks, the ones reached in the pepper’s colour, and the three words Mild, Hot and Diablo, the chosen one in black and wider. When the page opens the pepper sprouts small from its stalk and grows out to 3, swelling a little at every mark. Pulled by its tip (or pressed on the rail, where the tip runs) it grows longer and thinner, while its colour goes from green to yellow, orange, red and a deep red, and the tip hooks up. Pulled fast it stretches near the hand and bulges near the stalk, and the bulge runs along the pepper and back; the body bows with the speed and swings when it stops. Let go, the tip goes to the nearest mark with a little bounce. From 4 the pepper sweats: pale blue drops swell on the skin, slide round it and fall. From 6 it catches fire from the tip backwards: red, orange and yellow tongues of flame that flicker, lean against the way it moves and throw off little flames that rise and go out; the hotter, the taller and longer the fire. From 8 it trembles and the sweat flies off. The figure at the top grows bolder, wider and darker with the heat, up to a blood-red 10. Going back down the fire dies slowly and the last drops finish falling.
How it works
A jelly of weights
The pepper is a row of 17 weights along the rail: the first is fixed under the cap, the last is the tip, and each is tied to its neighbours by a spring with the stiffness and damping of JELLY. The thickness at each point comes from how close the weights are there: squeezed between its neighbours the body swells, stretched it thins. So a quick pull stretches it near the hand and bulges it near the stalk, and the bulge runs back and forth until it dies out.
The tip and the hand
While it is held the tip goes where the hand goes, past the two ends only a little and less and less. Let go, the SPRING spring takes it to the nearest mark, loosely held, so it goes past and comes back. The springs are worked out on GSAP’s ticker in steps of 1/240 of a second, and when everything is still the drawing stops.
The drawing
Every frame the script redraws the pepper on the canvas: the spine of the weights, bowed and with the tip hooked up the more the hotter it is, and the outline at the distance of the thickness, closed with soft curves. The colour ripens through five :root colours and the tip is always a little riper than the rest; on top, a shade that makes it round, a crease and the wet shine.
The sweat
From SWEAT_FROM drops are born on the skin, tied to a point of the pepper: they swell, then slide round the body faster and faster and fall from the bottom with gravity, stretched the way they go. From SHAKE_FROM they also fly off the top, and the whole pepper trembles on two quick waves that never line up.
The fire
From FIRE_FROM the tongues of flame stand every 16 pixels counted from the tip, so they stay put when the pepper grows. Each has a height that flickers on two waves of its own and leans against the speed; three layers on the same tongues, red, orange and yellow, drawn behind the pepper, which hides their feet. The fire comes up fast and dies down slowly, and little flames break off the points, rise and go out.
The figure, the keys and the preview
The figure at the top moves on Anybody’s weight and width axes with the heat. The arrows move by KEYS[0], with Shift or the Page keys by KEYS[1], Home and End go to the ends, and a word below goes to the middle of its marks. A click from a script (detail 0, the preview’s) is a pretend hand: from mild it pulls the pepper all the way out, from hot it pushes it back to 2.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
START_AT | script.js | 3 | The heat when the page opens. |
LEVELS | script.js | 10 | How many heats there are, from 1. |
ZONES | script.js | [3, 7] | The last heat of the first word (Mild) and the last of the second (Hot). |
SWEAT_FROM | script.js | 4 | From this heat on the pepper sweats. |
FIRE_FROM | script.js | 6 | From this heat on it catches fire. |
SHAKE_FROM | script.js | 8 | From this heat on it trembles and the sweat flies off. |
FLAMES | script.js | 56 | How tall the flames get at the top heat, in pixels. |
SPRING | script.js | [520, 0.3] | The spring that carries the tip when nobody holds it: how stiff, and how much it is held back. |
JELLY | script.js | [2600, 7] | The springs inside the pepper: how stiff (the faster a bulge runs), and how much they are held back. |
KEYS | script.js | [1, 3] | How far an arrow key moves the heat, and with Shift or the Page keys. |
When to use it
For the heat of a dish in a restaurant or a delivery app, the strength of a sauce in an online shop, or any choice from mild to extreme where the value should make people smile and a little afraid.
On phones
The slider takes the width of the screen minus a margin, and the longest pepper reaches the end of the rail. A finger drags it sideways while the page still scrolls up and down (touch-action: pan-y); a tap on the rail brings the tip there. Fire, sweat and springs are the same.
With reduced motion
No springs, no entrance, no trembling: the tip is at once where it is taken. The colour and the figure still change, and from 4 up the pepper has a few still drops on its skin and from 6 a still fire, drawn once.
Pitfalls
- With the keys the tip glides towards the new mark: if the figure followed the tip, a quick second press would start from the mark in passing and be lost. Until the tip arrives, the chosen mark counts.
- A quick tap far from the tip ended before the tip arrived, and the value stayed the old one: on release, the value comes from where the hand was, not from where the tip had got to.
- Near the tip, where the pepper is very thin, the flames showed their round feet under the skin: each tongue’s base is at most two and a half times the thickness there, and the tongues start 22 pixels from the tip.
- The tallest flames went past the canvas and were cut straight: every tongue stops 6 pixels from the top edge.
- Tongues counted from one end of the fire to the other changed place and flicker at every pixel of growth: counted from the tip, they stay where they are.
- With the jelly too loose a key press made a huge bulb by the stalk: the jelly thickness stays between 0.78 and 1.3 times the one at rest.
Libraries
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Testing
Tested on 13 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.
