moat-wobble
An election-night needle that never quite settles. The element's text is the scale; a needle rides underneath it and drifts, with noise added to make it more exciting. It moves slowly on the left and gets more chaotic the further right it goes. It hovers at value, now and then lurches dangerously close to max, and now and then settles down to settle.
<moat-wobble text="▲">NOTHING IS · · · · · SOME STUFF IS · · · · EVERYTHING IS</moat-wobble>
Attributes
Positions run from 0 (the left end of the text) to 1 (the right end).
text— the needle glyph (default:▲).value— where the needle hovers (default:0.82).settle— where it calms down to (default:0.62).max— how close to the edge it gets (default:0.98).
Readers without JavaScript see the scale alone. With prefers-reduced-motion, the needle sits still at value.