Clock
<Clock> -- play, pause and scrub the page's shared clock.
There is one clock per page, so this control is not tied to any particular figure: put it anywhere and it governs every animated figure on the page at once. That is the point. A reader who pauses to look at something should not still be moved past by the figure beside it, and two figures about the same parameter should not drift apart.
Several of these on one page are all views of the same clock and stay in step with each other, which is the same property seen from the other side.
loop says what the end of a cycle does -- cycle (default), reflect or none -- and rate multiplies the speed; both are the page clock's, so whichever control set them last wins. Holding the play button opens the same speed-and-loop panel every other play button has.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
period | number | 0 | Seconds per cycle. |
compact | string | "false" | Hide the scrubber, leaving just the play button. |
label | string | "" | |
loop | Loop | "" | loop | What the end of a cycle does: cycle (default), reflect or none.reflects |
rate | number | rate | Speed, as a multiplier on real time.reflects |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <notatio-clock> in any HTML. Attributes are kebab-case and always strings; the props table above names each one's attribute where it differs from its prop.