OverlayNew
People-per-square-metre grid
A square metre drawn as a grid with as many dots as a tracked density, written as people per square metre; they turn warm past a limit.
- Version
- 1.0.0
- Added
- 23 October 2026
- Films
- Not used in a film yet
Parameters
| Name | Type | Default | Range | What it does |
|---|---|---|---|---|
| density (Can change over time) | number | 4 | 0 to 60 per m² | how many dots fill the square metre, i.e. people per square metre; fractions fade the last dot in (tracked)Can change over time |
| limit (Can change over time) | number | 0 | 0 to 60 per m² | a density past which the dots turn the warning colour; 0 for none (tracked)Can change over time |
| label | text | CROWD | – to 24 | a small word at the top right; empty for none |
| unit | text | per m² | – to 12 | written after the number |
| decimals | integer | 0 | 0 to 3 | decimal places of the number |
| at | vec2 | 0.66, 0.5 | 0, 0 to 1, 1 | where the panel’s top left sits: across and down the frame; it is kept on the frame |
| size | number | 0.26 | 0.15 to 0.45 | the square’s side, a share of the frame’s height |
| ink | color | #f3f0e8 | – | words, numbers, ticks and outlines |
| accent | color | #4fb8e8 | – | the live value, the fill, what is highlighted |
| font | choice | sans | sans, serif, mono | the face of the number and its word |
| warn | color | #ff6b4a | – | the dots past the limit |
| backing | number | 0.35 | 0 to 1 | how dark the panel behind it is; 0 for none (then the words and the dots get a heavy shadow) |
| reveal | number | 0.8 | 0 to 5 s | how long the panel takes to draw in; 0 shows it at once |
Use it in a film
film.js
elements: { 'density-grid': { density: 4, limit: 0 } }Use it from your agent
Ask your agent to put it in a film. It finds the element by name.