
OverlayNew
Scale bar that rescales with the zoom
A map-style scale bar in nice 1-2-5 lengths, labelled in m, km, AU or light years, that keeps honest as the view zooms.
- Version
- 1.0.0
- Added
- 23 October 2026
- Films
- Not used in a film yet
Parameters
| Name | Type | Default | Range | What it does |
|---|---|---|---|---|
| metresPerFrame (Can change over time) | number | 2000 | 1e-12 to 1e+30 m | how many metres the frame's width spans; the bar follows it (a track or a follower of the counter)Can change over time |
| unit | choice | auto | auto, nm, um, mm, cm, m, km, Mm, AU, ly, pc, ft, mi | the unit it is written in; auto picks cm, m, km, AU or ly to suit the zoom |
| length | number | 0.24 | 0.08 to 0.6 | the longest the bar gets, a share of the frame's width |
| label | text | – | – to 40 | a word over the bar, such as the thing it measures; empty for none |
| showFrame | bool | false | – | also write how wide the whole frame is, under the bar |
| style | choice | checker | checker, line | a banded map bar, or a plain ruled line |
| align | choice | left | left, right | the bar grows right from its zero, or left |
| format | choice | grouped | grouped, plain, compact, scientific | how numbers are written: 12,500 / 12500 / 12.5k / 1.25×10⁴ |
| at | vec2 | 0.05, 0.9 | 0 to 1 | the bar's zero, across and down the frame; a bar near an edge slides in |
| size | number | 0.042 | 0.035 to 0.09 | the height of the length written over the bar, a share of the frame's height |
| thickness | number | 0.016 | 0.006 to 0.04 | the bar's height, a share of the frame's height |
| ink | color | #f3f0e8 | – | its words, numbers, ticks and outlines |
| accent | color | #4fb8e8 | – | the bar's bands |
| font | choice | sans | sans, serif, mono | the face of its words and numbers |
| backing | number | 0.45 | 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: { 'scale-bar': { metresPerFrame: 2000, unit: 'auto' } }Sources
Use it from your agent
Ask your agent to put it in a film. It finds the element by name.