OverlayNew
Level gauge with named marks
A bar that fills to a value on a ruled scale, linear or log, with named marks it lights as it passes them.
- 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 | 42 | -1000000000000 to 1000000000000 | the value it 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 bottom of the scale (over 0 on a log scale) |
| max | number | 100 | -1000000000000 to 1000000000000 | the top of the scale |
| scale | choice | linear | linear, log | linear, or log for a value that spans powers of ten |
| marks | text | 0 Freezing; 37 Body; 100 Boiling | – to 200 | named marks: a value then a name, separated by semicolons |
| label | text | WATER | – to 40 | a word over the gauge; empty for none |
| unit | text | °C | – 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⁴ |
| orientation | choice | vertical | vertical, horizontal | the bar stands up or lies along the bottom |
| at | vec2 | 0.92, 0.84 | 0 to 1 | the scale's low end: across and down the frame |
| length | number | 0.5 | 0.15 to 0.8 | the scale's length, a share of the frame's height |
| size | number | 0.028 | 0.015 to 0.06 | the height of its words and numbers, a share of the frame's height |
| thickness | number | 0.022 | 0.006 to 0.06 | the bar's width, a share of the frame's height |
| ink | color | #f3f0e8 | – | ticks, words and numbers |
| accent | color | #4fb8e8 | – | the fill and the marks it has passed |
| 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: { 'level-gauge': { value: 42, min: 0 } }Use it from your agent
Ask your agent to put it in a film. It finds the element by name.