OverlayNew
Day of tide curve
A day’s tide curve in a panel: two highs and two lows, a cursor at the hour with the water level, and a tracked range.
- Version
- 1.0.0
- Added
- 23 October 2026
- Films
- Not used in a film yet
Parameters
| Name | Type | Default | Range | What it does |
|---|---|---|---|---|
| range (Can change over time) | number | 2 | 0 to 15 m | the tide’s range, low water to high water, in metres; bigger tides give a taller curve (tracked)Can change over time |
| hour (Can change over time) | number | 9 | 0 to 24 h | the hour of the day the cursor marks, 0 to 24 (tracked)Can change over time |
| high | number | 3.5 | 0 to 12.4 h | the hour of the day’s first high water |
| scale | number | 4 | 1 to 20 m | the water level at the top of the strip in metres, so a bigger range shows taller |
| label | text | RANGE | – to 24 | a small word before the range at the top right; empty for none |
| at | vec2 | 0.6, 0.62 | 0, 0 to 1, 1 | where the panel’s top left sits: across and down the frame; it is kept on the frame |
| width | number | 0.36 | 0.15 to 0.8 | the panel’s width, a share of the frame’s width |
| height | number | 0.22 | 0.1 to 0.45 | the panel’s height, 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 |
| backing | number | 0.35 | 0 to 1 | how dark the panel behind it is; 0 for none (then the words and the line 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: { 'tide-curve': { range: 2, hour: 9 } }Use it from your agent
Ask your agent to put it in a film. It finds the element by name.