tactile-odometer 1.0.0

package/BigShoulders-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Big Shoulders Project Authors (https://github.com/xotypeco/big_shoulders)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2026 Ciprian Titire
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The numerals, big-shoulders-bold.woff2, are Big Shoulders Bold, copyright 2019
+The Big Shoulders Project Authors (https://github.com/xotypeco/big_shoulders),
+licensed under the SIL Open Font License 1.1; see BigShoulders-OFL.txt.

package/README.md

@@ -0,0 +1,176 @@
+# tactile-odometer
+
+A mechanical drum counter for the web that carries like the real thing.
+
+On a real odometer a drum only moves while the one to its right is carrying,
+so 1,099 → 1,100 rolls the last three drums over together, right at the end of
+the units' turn. Most animated counters move every digit on its own, so
+nothing carries. This one does.
+
+Vanilla ES module and CSS, no dependencies, no build step. MIT.
+
+**[Play with it →](https://tactile-ui.me/objects/odometer)**
+
+<!-- demo gif: 1,099 → 1,100, then +37 -->
+
+## Install
+
+```sh
+npm install tactile-odometer
+```
+
+Or straight from a CDN:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tactile-odometer/odometer.css">
+<script type="module">
+  import Odometer from 'https://cdn.jsdelivr.net/npm/tactile-odometer/odometer.mjs';
+</script>
+```
+
+## Use
+
+```html
+<div id="seats" style="width: 480px; height: 160px"></div>
+
+<script type="module">
+  // with a bundler; without one, use the CDN URLs above
+  import Odometer from 'tactile-odometer';
+  import 'tactile-odometer/odometer.css';
+
+  const seats = new Odometer(document.getElementById('seats'), { value: 1099 });
+
+  seats.setValue(1100);        // rolls, and carries
+  seats.setValue(4821.75);     // springs there; fast drums spin, slow ones roll
+  seats.count(1);              // a live tally, +1 a second (0 stops it)
+  seats.update({ finish: 'brass' });
+  seats.destroy();             // removes everything it added
+</script>
+```
+
+It works in React, Vue, Svelte or anything else that can hand it an element:
+create it in an effect or `onMount`, call `destroy()` on unmount.
+
+### Options
+
+| Option | Default | What it does |
+|---|---|---|
+| `value` | `0` | The number to start on |
+| `decimals` | `0` | Drums after the decimal point (0 to 6) |
+| `prefix`, `suffix` | `''` | Printed on the plate either side of the window: `$`, `km`, `seats left` |
+| `locale` | `'en-US'` | Group and decimal marks, grouping pattern and digit glyphs, from `Intl.NumberFormat` |
+| `grouping` | `true` | Fixed plates between drums: 1,099 rather than 1099 |
+| `digits` | `1` | Whole-number drums to reserve, so a growing number doesn't move the layout |
+| `zeros` | `false` | Print 001,099 like a car odometer, instead of blanks |
+| `finish` | `'ink'` | `ink`, `bone`, `steel` or `brass`, each in its own housing |
+| `red` | `'none'` | Signal-red drums: `last`, or all the `decimals` (the classic tenths) |
+| `bezel` | `'slot'` | One `slot` across the drums, `cells` like a tally counter, or `bare` to sit in a line of text |
+| `stiffness` | `140` | How hard the value is pulled to a new number |
+| `damping` | `0.85` | Below 1 it overshoots and winds back; 1 and above it arrives without passing |
+| `maxSpin` | `24` | Digits per second; past this a drum is drawn spinning at the cap, blurred, instead of strobing |
+| `count` | `0` | A live tally per second, in steps of the last drum; negative counts down |
+| `wear` | `0.35` | Drums a little off their detents, figures a little off register |
+| `light` | `315` | Where the lamp is, in degrees (0 is above, clockwise) |
+| `size` | `'fit'` | `'fit'` fills the host and follows it; a number is the numeral size in px |
+| `label` | `''` | Engraved into the plate under the window |
+| `sound` | `false` | A soft tick per step of the last drum (a whirr when it spins), once the page has had a click or key press |
+| `announce` | `true` | Announce the landed value to screen readers; `false` for an ambient tally |
+
+### Methods
+
+- `setValue(n, { instant })`: spring to a new value, or jump with `instant: true`
+- `count(rate)`: tally `rate` per second; `count(0)` stops
+- `update(options)`: change any option
+- `destroy()`: stop and remove everything
+- `value`, `state`: the target value, and `running` or `asleep`
+
+## How the carry works
+
+Only the last drum is driven. Every other drum moves only while the drum to
+its right passes 9 → 0. The first carry takes the last tenth of the units'
+step, and every carry above it turns in lock-step with the drum below, which is
+why the carries all roll together at the end.
+
+That rule is one pure function of a single continuous value:
+
+```js
+export function drumPositions(value, count, decimals = 0, carry = CARRY) {
+  const n = scaled(value, decimals);
+  const out = new Array(count);
+  if (count < 1) return out;
+  let below = n % 10;
+  out[0] = below;
+  for (let k = 1; k < count; k += 1) {
+    const w = k === 1 ? carry : 1;
+    const digit = Math.floor(n / 10 ** k) % 10;
+    below = digit + clamp((below - 10 + w) / w, 0, 1);
+    out[k] = below;
+  }
+  return out;
+}
+```
+
+The value itself is a spring, so the whole counter animates one number and
+every drum follows from this. `scaled()` removes float dust, so 10.1 at two
+decimals is 1010, not 1009.9999999999999.
+
+The rest:
+
+- **The light doesn't turn.** A drum is a cylinder on a horizontal axle, so
+  the light on it depends only on height in the window, not on how far it has
+  turned. One overlay per drum, computed once from the lamp; the numerals roll
+  through it.
+- **Real text.** The faces are DOM text on a ten-sided CSS 3D drum, so the
+  figures are crisp and properly foreshortened.
+- **The numerals** are Big Shoulders Bold, bundled, so the drums print the same
+  figures everywhere. The font loads `block` and the figures are re-centred on
+  it once it lands, so nothing jumps.
+
+## Accessibility and cost
+
+- The drums are `aria-hidden`. The number is a visually hidden text element,
+  announced politely once the value has landed: never every frame.
+- Reduced motion: the value changes instantly, nothing spins, no frame is
+  requested.
+- It costs nothing at rest. The loop runs only while a value is travelling,
+  sleeps once it lands, sleeps between the steps of a slow tally, and pauses
+  off screen and in a hidden tab. A tab that comes back after two seconds
+  can't blow up the spring.
+
+## Compared
+
+| | tactile-odometer | odometer.js (HubSpot) | NumberFlow |
+|---|---|---|---|
+| 1,099 → 1,100 | tens and hundreds carry together at the end of the units' turn | every digit column slides at once, over the same duration | each digit animates on its own |
+| Dependencies | none | none | one small one (`esm-env`), plus React, Vue and Svelte packages |
+| Screen readers | real text, announced once when it lands | not built in | described as accessible |
+| Reduced motion | instant change | not built in | respected by default |
+| Big jumps | fast drums blur at a spin cap, slow ones roll | each column slides through its ribbon | digits transition |
+
+The odometer.js column is from its source (`animateSlide` builds one ribbon
+per digit column and slides them together). The NumberFlow column is from its
+docs and npm, and from watching it; its docs don't describe the carry. If
+anything here is wrong, open an issue and I'll fix the table.
+
+## Tests
+
+```sh
+npm test
+```
+
+The pure parts (the carry, the spring, formatting, fitting, the light) are
+tested in Node with `node:test`.
+
+## Where it's from
+
+It's the free piece of [Tactile UI](https://tactile-ui.me), a library of
+interface objects that work like the hardware they're drawn from: a pin
+screen, a Chladni plate, a detent dial, a cassette. The rest are paid; this
+one is MIT, for everyone.
+
+Made by [Ciprian Titire](https://titi.re).
+
+## Licence
+
+MIT. The numerals, `big-shoulders-bold.woff2`, are under the SIL Open Font
+License 1.1; see `BigShoulders-OFL.txt`.

package/odometer.css

@@ -0,0 +1,398 @@
+/* Odometer — TACTILE UI.
+   The object sizes itself from its numeral size (--od-size, set by the
+   component: filling its host in fit mode, or from the `size` option). Every
+   length below is in em of that size, so the drum geometry scales as one
+   piece. Lamp-dependent values (--od-shade, --od-spec, --od-wall, …) are
+   written by the component from the `light` option. */
+
+/* The drums are printed in Big Shoulders Bold (SIL OFL 1.1, see
+   BigShoulders-OFL.txt beside this file): the same figures on every platform.
+   `block`: until the face is in, the drums show no figures rather than a
+   fallback that jumps when it arrives. */
+@font-face {
+  font-family: 'Odometer Figures';
+  src: url('./big-shoulders-bold.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: block;
+}
+
+.od {
+  --od-size: 72px;
+  --od-face: 1.12em;   /* one face: the chord between two numerals */
+  --od-r: 1.7235em;    /* ten faces: radius = face / (2 tan 18°) */
+  --od-win: 1.56em;    /* the window shows ±27° of the drum */
+  --od-w: 0.6em;       /* drum width: a condensed figure on a narrow drum */
+  /* Printed stock is never a flat fill: a fine static grain, blended over the drum colour. */
+  --od-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.5 0.3 0.2 0 0  0.5 0.3 0.2 0 0  0.5 0.3 0.2 0 0  0 0 0 0 0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+  /* Brushing: long fine streaks along the plate. */
+  --od-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.95' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.6 0.2 0.2 0 0.08  0.6 0.2 0.2 0 0.08  0.6 0.2 0.2 0 0.08  0 0 0 0 0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
+  position: relative;
+  display: inline-block;
+  width: max-content;
+  vertical-align: middle;
+  font-size: var(--od-size);
+  line-height: 1;
+  font-family: 'Odometer Figures', Bahnschrift, 'DIN Alternate', 'DIN Condensed', 'Barlow Semi Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
+  font-weight: 700;
+  font-stretch: 87.5%;
+  font-synthesis: none;
+  font-variant-numeric: lining-nums;
+  font-kerning: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The number, as text. Hidden from sight, read by everything else. */
+.od-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The housing: a machined plate the window is cut into. Window in the
+   middle column, a printed prefix and suffix either side, an engraved label
+   under the window. */
+.od-plate {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  align-items: center;
+  padding: 0.2em 0.2em;
+  border: 0.028em solid;
+  border-color: var(--od-raise);
+  border-radius: 0.11em;
+  color: var(--od-plate-ink);
+  background:
+    var(--od-plate-sheen),
+    var(--od-brushed),
+    var(--od-metal);
+  background-origin: border-box;
+  background-size: 100% 100%, 100% 100%, 600px 120px, auto;
+  background-blend-mode: normal, normal, overlay, normal;
+  box-shadow: var(--od-plate-shadow), inset 0 0 0 0.006em rgb(0 0 0 / 0.35);
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* Room at each end for a screw. */
+.od[data-bezel='slot'] .od-plate,
+.od[data-bezel='cells'] .od-plate { padding-inline: 0.42em; }
+.od-window { grid-column: 2; grid-row: 1; }
+
+/* The chamfers catch the lamp hardest at the corner nearest it (the plate's
+   edge) or farthest from it (the window's walls, which face back toward it):
+   a specular falloff laid over each side's own tone. The window's ring is
+   the plate's: an absolutely placed grid item takes the window's grid area as
+   its box, and the window itself clips its drums. */
+.od-plate::before,
+.od-plate::after {
+  content: '';
+  position: absolute;
+  z-index: 3;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  pointer-events: none;
+}
+.od-plate::before {
+  inset: -0.028em;
+  padding: 0.028em;
+  border-radius: inherit;
+  background: var(--od-raise-hot);
+}
+.od-plate::after {
+  grid-column: 2 / 3; /* an absolute item's auto end line would be the padding edge */
+  grid-row: 1 / 2;
+  inset: 0;
+  padding: 0.036em;
+  border-radius: 0.055em;
+  background: var(--od-recess-hot);
+}
+.od[data-bezel='bare'] .od-plate::before,
+.od[data-bezel='bare'] .od-plate::after,
+.od[data-bezel='cells'] .od-plate::after { display: none; }
+
+/* A countersunk screw: the sink cut into the plate, the domed head in it,
+   the slot across the head. */
+.od-screw {
+  position: absolute;
+  top: 50%;
+  width: 0.17em;
+  height: 0.17em;
+  margin-top: -0.085em;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--od-metal-dark) 70%, var(--od-metal));
+  box-shadow: var(--od-screw-sink);
+}
+.od-screw-l { left: calc(0.21em - 0.085em); }
+.od-screw-r { right: calc(0.21em - 0.085em); }
+.od-screw::before {
+  content: '';
+  position: absolute;
+  inset: 0.022em;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at var(--od-screw-hl), rgb(255 255 255 / 0.9) 0, rgb(255 255 255 / 0) 34%),
+    radial-gradient(circle at var(--od-screw-hl), var(--od-screw) 0, color-mix(in srgb, var(--od-screw) 55%, #000) 78%, color-mix(in srgb, var(--od-screw) 30%, #000) 100%);
+  box-shadow: var(--od-screw-shadow);
+}
+.od-screw::after {
+  content: '';
+  position: absolute;
+  left: 0.032em;
+  right: 0.032em;
+  top: 50%;
+  height: 0.024em;
+  margin-top: -0.012em;
+  border-radius: 0.01em;
+  background: rgb(0 0 0 / 0.78);
+  box-shadow: 0 0.005em 0 rgb(255 255 255 / 0.28);
+  transform: rotate(var(--od-slot, 30deg));
+}
+
+.od-prefix,
+.od-suffix {
+  color: var(--od-plate-ink);
+  text-shadow: var(--od-engrave);
+  white-space: nowrap;
+}
+.od-prefix {
+  grid-column: 1;
+  grid-row: 1;
+  position: relative;
+  top: var(--od-lift, 0);
+  font-size: 0.6em;
+  padding-inline: 0 0.2em;
+}
+.od-suffix {
+  grid-column: 3;
+  grid-row: 1;
+  align-self: end;
+  font-size: 0.24em;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding-inline: 0.55em 0;
+  margin-bottom: 0.9em;
+}
+.od-suffix.od-mark {
+  /* A symbol after the number (€, %) is set like the prefix, not as a label. */
+  position: relative;
+  top: var(--od-lift, 0);
+  align-self: center;
+  font-size: 0.6em;
+  letter-spacing: 0;
+  text-transform: none;
+  padding-inline: 0.2em 0;
+  margin-bottom: 0;
+}
+
+/* The engraved label strip: letters cut into the plate and filled with
+   paint, ruled out to the window's edges. */
+.od-label {
+  grid-column: 2;
+  grid-row: 2;
+  /* The window's width, never more: a label longer than the window must not
+     widen its column (that would open a gap inside the window). It overflows
+     both ways instead, centred. */
+  width: 0;
+  min-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.7em;
+  margin-top: 0.55em;
+  margin-bottom: -0.15em;
+  font-size: 0.2em;
+  font-weight: 700;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--od-plate-ink);
+  text-shadow: var(--od-engrave);
+}
+.od-label-t { margin-right: -0.3em; } /* the tracking after the last letter is not space */
+.od-label::before,
+.od-label::after {
+  content: '';
+  flex: 1 1 0;
+  min-width: 1em;
+  height: 0.12em;
+  border-radius: 0.1em;
+  background: color-mix(in srgb, var(--od-plate-ink) 55%, transparent);
+  box-shadow: var(--od-groove);
+}
+
+/* The window: a slot in the plate, with the drums behind it. */
+.od-window {
+  position: relative;
+  display: flex;
+  height: var(--od-win);
+  padding: 0 0.045em;
+  gap: 0.04em;
+  background: #050506;
+  border: 0.036em solid;
+  border-color: var(--od-recess);
+  border-radius: 0.055em;
+  overflow: hidden;
+  box-shadow: var(--od-chamfer);
+}
+
+/* Glass over it: the lamp's reflection, the refracting edge, the window's walls. */
+.od-glass,
+.od-lens {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  border-radius: inherit;
+  background: var(--od-glass);
+  box-shadow: var(--od-wall);
+}
+.od-lens { display: none; }
+
+/* One drum: ten printed figures around an axle, seen through the window. The
+   drum's surface is the cell (a cylinder's colour does not turn); the faces
+   carry only ink, so a smeared figure can run into the next without a seam. */
+.od-cell {
+  position: relative;
+  flex: none;
+  width: var(--od-w);
+  background: var(--od-rim), var(--od-grain), var(--od-drum);
+  background-size: auto, 140px 140px, auto;
+  background-blend-mode: normal, overlay, normal;
+}
+/* Flat, with perspective: each face carries its own whole transform. */
+.od-rot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: var(--od-face);
+  margin-top: calc(var(--od-face) / -2);
+  perspective: 16em;
+}
+.od-face {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  backface-visibility: hidden;
+  color: var(--od-figure);
+}
+.od-ink {
+  position: relative;
+  font-size: 0.92em;
+  top: var(--od-lift, 0);
+  display: grid;
+  place-items: center;
+  opacity: var(--ink, 1);
+  transition: opacity 0.18s;
+}
+.od-blank .od-ink { opacity: 0; }
+.od-n,
+.od-m { grid-area: 1 / 1; }
+.od-n { opacity: calc(1 - var(--b, 0)); }
+/* The same figure smeared along the turn: shown as the drum speeds up. Long
+   enough that, at full speed, one figure's streak meets the next one's. */
+.od-m {
+  --s1: color-mix(in srgb, var(--od-figure) 6%, transparent);
+  --s2: color-mix(in srgb, var(--od-figure) 11%, transparent);
+  --s3: color-mix(in srgb, var(--od-figure) 16%, transparent);
+  --s4: color-mix(in srgb, var(--od-figure) 20%, transparent);
+  opacity: var(--b, 0);
+  color: transparent;
+  text-shadow:
+    0 -0.48em 0.1em var(--s1), 0 -0.4em 0.09em var(--s2), 0 -0.32em 0.08em var(--s3),
+    0 -0.24em 0.07em var(--s4), 0 -0.16em 0.06em var(--s4), 0 -0.08em 0.055em var(--s4),
+    0 0 0.05em var(--s4),
+    0 0.08em 0.055em var(--s4), 0 0.16em 0.06em var(--s4), 0 0.24em 0.07em var(--s4),
+    0 0.32em 0.08em var(--s3), 0 0.4em 0.09em var(--s2), 0 0.48em 0.1em var(--s1);
+}
+
+/* Light that does not turn: the drum rolls under it. */
+.od-cell::after,
+.od-sep::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: var(--od-spec), var(--od-shade);
+}
+
+/* The signal drum: the classic odometer tenths. */
+.od-red {
+  --od-drum: var(--od-signal);
+  --od-figure: var(--od-signal-figure);
+}
+
+/* Fixed plates between drums: group marks, the decimal point, the sign. */
+.od-sep {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 0.22em;
+  background: var(--od-rim), var(--od-grain), var(--od-drum);
+  background-size: auto, 140px 140px, auto;
+  background-blend-mode: normal, overlay, normal;
+  color: var(--od-figure);
+}
+.od-sign { width: 0.4em; }
+.od-glyph { font-size: 0.92em; position: relative; top: var(--od-lift, 0); transition: opacity 0.18s, transform 0.18s; }
+.od-off .od-glyph { opacity: 0; }
+.od-sign.od-off .od-glyph { transform: rotateX(90deg); }
+
+/* A window per drum, like a tally counter. */
+.od[data-bezel='cells'] .od-window {
+  background: none;
+  border: 0;
+  overflow: visible;
+  box-shadow: none;
+  padding: 0;
+  gap: 0.1em;
+}
+.od[data-bezel='cells'] .od-glass { display: none; }
+.od[data-bezel='cells'] .od-cell {
+  overflow: hidden;
+  border: 0.03em solid;
+  border-color: var(--od-recess);
+  border-radius: 0.06em;
+  box-shadow: var(--od-chamfer);
+}
+.od[data-bezel='cells'] .od-lens { display: block; }
+.od[data-bezel='cells'] .od-sep {
+  background: none;
+  width: 0.2em;
+  color: var(--od-plate-ink);
+  text-shadow: var(--od-engrave);
+}
+.od[data-bezel='cells'] .od-sep::after { display: none; }
+
+/* No housing: the drums alone, to sit in a line of text. */
+.od[data-bezel='bare'] .od-plate {
+  background: none;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+  color: inherit;
+}
+.od[data-bezel='bare'] .od-prefix,
+.od[data-bezel='bare'] .od-suffix,
+.od[data-bezel='bare'] .od-label {
+  color: inherit;
+  text-shadow: none;
+}
+.od[data-bezel='bare'] .od-label::before,
+.od[data-bezel='bare'] .od-label::after { box-shadow: none; background: currentColor; opacity: 0.35; }
+.od[data-bezel='bare'] .od-prefix { font-size: 0.8em; padding-inline-end: 0.1em; }
+.od[data-bezel='bare'] .od-suffix:not(.od-mark) { font-size: 0.42em; margin-bottom: 0.3em; padding-inline-start: 0.3em; }
+.od[data-bezel='bare'] .od-suffix.od-mark { font-size: 0.8em; }
+.od[data-bezel='bare'] .od-window { border-width: 0.02em; border-radius: 0.08em; }
+
+@media (prefers-reduced-motion: reduce) {
+  .od-ink,
+  .od-glyph { transition: none; }
+}