Dashboard motion: round dashboards page up and down, the ring eases to a notch or a reading, the slider tile to a value set elsewhere; reduced motion honoured by every tween; motion spec in the docs

docs/interface/dashboards.md

@@ -277,7 +277,7 @@ look's muted text colour.
 | Any other type | its rectangular body, without a card, from y = c − 64 to c + S/(2√2), x = c ± S/(2√2) (Knob: 53–307 × 116–307) |
 | Page dots | one per face, from two faces: dots 6 across on targets 16 apart (closer when more than 128 wide would be needed), centred at y = S − 12; the current one in the text colour, the others muted at half opacity |
 | Dashboard name | a pill centred at (c, c), 36 high: the icon 16 and the title at 15, medium, at most 220 wide, on the frosted surface; for 1000 ms |
-| Paging | a new face slides in 48 from the side it was paged towards and fades in; the old one leaves the other way |
+| Paging | faces slide sideways, dashboards up and down; see [Motion](#motion) |
 | Locked | controls do nothing and read as disabled; the ring at 0.45 opacity |
 
 Paint follows the look: Fluksio draws a muted track, a primary value and a
@@ -285,6 +285,52 @@ handle of the ground colour ringed in primary; Material a tonal track and a
 primary handle; Glass a translucent track, a glowing value and a white handle.
 A Switch or Button face wears the look's own button.
 
+## Motion
+
+How a dashboard moves, for devices that draw it natively. Distances are canvas
+pixels. Each look moves at its own spring; a device without springs runs the
+spring's closed form for the duration given and then sets the end value, or
+uses the cubic-bezier that stands in for it.
+
+| Look | Spring (stiffness, damping, mass) | ζ, ω₀ | Duration (within 1 %) | Overshoot | Cubic-bezier stand-in |
+|---|---|---|---|---|---|
+| Fluksio | 420, 34, 1 | 0.830, 20.49 s⁻¹ | 210 ms | 0.9 % | (0.26, 0.12, 0.25, 1.01) over 250 ms, at most 1.5 % off |
+| Material | 550, 38, 1 | 0.810, 23.45 s⁻¹ | 270 ms | 1.3 % | (0.20, 0.11, 0.27, 1.19) over 260 ms, at most 1.7 % off |
+| Glass | 320, 22, 0.8 | 0.688, 20.00 s⁻¹ | 330 ms | 5.1 % | (0.26, 0.20, 0.20, 1.33) over 320 ms, at most 1.7 % off |
+
+From rest, a spring's progress is p(t) = 1 − e^(−ζω₀t)·(cos ω_d t +
+(ζω₀/ω_d)·sin ω_d t), with ω_d = ω₀·√(1 − ζ²). "Spring" below is the
+dashboard's look's.
+
+| What | Moves | From → to | Timing | Input during it |
+|---|---|---|---|---|
+| Face paging (round) | the new face and the old | new: x +48 (next) or −48 (previous), opacity 0 → x 0, opacity 1; old: x 0, opacity 1 → x −48 (next) or +48, opacity 0. Both at once | spring | another page retargets: each face heads for its new end from where it is |
+| Dashboard paging (round panel) | the new dashboard's face and the old | the same on y: the next rises from +48, the previous comes down from −48. One opened by its address only fades | spring | as faces |
+| Page dot | the current dot and the last | muted at 0.5 opacity ↔ text colour at 1 | 200 ms, cubic-bezier(0.4, 0, 0.2, 1) | retargets |
+| Dashboard name | the pill | opacity 0 → 1, held 1000 ms, 1 → 0 | in 200 ms, out 150 ms, cubic-bezier(0.4, 0, 0.2, 1) | — |
+| Ring value set by a notch, a key or the engine | the value arc's end, the handle (slider, selector, colour) | from where it is drawn to the new fraction of the sweep | spring | each notch retargets from where it is, at the speed it has |
+| Ring value set by a drag | the same | follows the pointer exactly | none | — |
+| Hue across red | the colour handle | a change of more than half the sweep jumps to the other end | none | — |
+| Slider's reading on the ring, gauge on the ring | the reading's mark; the value arc | from where it is drawn to the new fraction | spring | retargets |
+| Numbers on the ring | centre reading, gap line | switch at once, with the notch | none | — |
+| Value face, Value and Gauge tiles | the number | counts to the new value, written to its precision | spring | retargets |
+| Slider tile set elsewhere | the fill's end, the handle, the reading's mark | from where it is drawn to the new fraction | spring | a drag or a key moves it at once |
+| Gauge and Bar tiles | the value arc, each bar's fill | from where it is drawn to the new fraction | spring | retargets |
+| Dashboard change (rectangular panel) | every tile | the old dashboard goes at once; each new tile opacity 0 → 1, y +8 → 0 | spring | — |
+| Rail | the current entry's marker | slides to the new entry | spring | retargets |
+
+With reduced motion asked for, nothing travels: pages and dashboards only
+cross-fade (opacity at the spring), and every value is drawn at its new place
+at once. The dot and the name pill, which only change colour or opacity, keep
+their timing.
+
+A device may simplify where its hardware is slow, keeping the direction and
+the end state: a page may slide without the fade, fade without the slide, or
+cut; a retarget may restart the curve from where it is without carrying the
+speed; a counting number may switch; and the value arc may be redrawn each
+frame as an arc to the eased angle, which is what the browser's reveal
+amounts to.
+
 ## Showing one
 
 Open `/view/{name}` for a dashboard-only view with your normal session.