OverlayNew
Dial gauge with needle and redline
A round dial with a needle, ticks and numbers on an arc, linear or log, and a redline that turns the arc to the warning colour.
- Version
- 1.0.0
- Added
- 23 October 2026
- Films
- Not used in a film yet
Parameters
| Name | Type | Default | Range | What it does |
|---|---|---|---|---|
| value (Can change over time) | number | 120 | -1000000000000 to 1000000000000 | the value the needle shows; give a follower of the counter, (v) => v, to make it move with the filmCan change over time |
| min | number | 0 | -1000000000000 to 1000000000000 | the start of the scale (over 0 on a log scale) |
| max | number | 240 | -1000000000000 to 1000000000000 | the end of the scale; a value past it pegs the needle at the end stop |
| scale | choice | linear | linear, log | linear, or log for a value that spans powers of ten |
| limit | number | 200 | -1000000000000 to 1000000000000 | from this value the arc turns to the warning colour; at or past max for no redline |
| sweep | number | 240 | 120 to 300 deg | how far round the arc runs; a car dial is about 240 |
| divisions | integer | 6 | 3 to 10 | the most steps between numbers the arc has (the step is rounded up to 1, 2, 5 or 10) |
| label | text | SPEED | – to 40 | a word under the value; empty for none |
| unit | text | km/h | – to 12 | written after the value |
| decimals | integer | 0 | 0 to 4 | decimal places of the value |
| format | choice | grouped | grouped, plain, compact, scientific | how numbers are written: 12,500 / 12500 / 12.5k / 1.25×10⁴ |
| at | vec2 | 0.84, 0.66 | 0 to 1 | the dial centre: across and down the frame; a dial near an edge slides in |
| radius | number | 0.16 | 0.06 to 0.34 | the arc’s radius, a share of the frame’s height |
| size | number | 0.032 | 0.015 to 0.06 | the height of its numbers and label, a share of the frame’s height |
| thickness | number | 0.018 | 0.006 to 0.05 | the arc band’s width, a share of the frame’s height |
| ink | color | #f3f0e8 | – | ticks, words and numbers |
| accent | color | #4fb8e8 | – | the live value and what has been reached |
| warn | color | #ff6b4a | – | danger: past a limit |
| font | choice | sans | sans, serif, mono | the face of its words and numbers |
| backing | number | 0.35 | 0 to 1 | how dark the soft panel behind it is; 0 for none |
| reveal | number | 0.8 | 0 to 5 s | how long it takes to draw in; 0 shows it at once |
Use it in a film
film.js
elements: { 'dial-gauge': { value: 120, min: 0 } }Use it from your agent
Ask your agent to put it in a film. It finds the element by name.