Skip to the object
TACTILE UI

Ticker

An announcement bar made as a ticker-tape window. A paper tape in the Receipt Printer’s stock and typewriter face runs behind a glass lip a character cell at a time, holds still when you go near it, and closes with a key that has weight.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Whole cell tape steps, Ch unit cell offset, Sleeping timer, Hover focus pause, Printer paper tokens, Glass lip overlay, Latched pause key, Grid row retract, Id keyed dismissal, Guarded local storage, Words once for readers, Reduced motion static tape, Finish following
Stack
Vanilla ES modules, CSS, Container queries
Needs
Nothing — no dependencies
States
10 documented
Version
0.1.0
Licence
With a Pass

States

  1. RunningThe tape steps one character cell every 143 ms (seven cells a second by default): the track is moved by whole cells, so it jumps and never glides. The lamp at the left is lit green only while it moves.
  2. HeldHover with a mouse or pen over the tape, focus on the tape, or the pause key (a toggle that stays down): the timer stops, the lamp goes dark, and a link’s tape is underlined.
  3. LinkWith an href the whole slot is one link; its name is the words in the page. Without one it is only a message.
  4. ClosingThe close key drops 2px; the bar folds up over 280 ms, becomes inert and hidden, focus stays on the region so Tab goes on from there, and tk-dismiss fires with the id and whether it was remembered.
  5. RememberedThe dismissal is written to localStorage under the id, inside try/catch. A remount with the same id is closed from the first paint; a new id shows the bar; restore() forgets it and opens it again. Storage that throws just shows the bar every time.
  6. TabletThe bar keeps its height; the slot takes what the keys leave.
  7. PhoneUnder 560px of its own width the label is hidden and the tape, the pause key and the close key fill the bar; no sideways scroll.
  8. Reduced motionNo tape and no timer: the messages are set still in the same paper, wrapping if they must; the pause key is hidden.
  9. Off screenOff screen or in a hidden tab the timer is cleared and nothing runs.
  10. FinishesAluminium and graphite by data-finish; the paper stays thermal stock in both.

What it is for

The strip at the top of a page that says one small thing: a release, a maintenance window, a change of terms. It is a slim machined bar with a narrow slot cut in it; behind the glass lip the tape steps along one cell at a time, the way a stock ticker does, and stops when a pointer or a focus ring comes near it or when the visitor presses the pause key. The close key has a real press and the dismissal is remembered by the announcement’s id, so a new id is a new announcement. The words are in the page once, still, as text and as the link when there is one; the moving tape is only for the eye.

Original composition; Lode and its announcements are invented. It is built on the Receipt Printer’s language rather than its code: the paper, the ink and the typewriter face are the Printer’s, written into ticker.css with the same values (test/ticker.test.mjs holds them to printer.css), so the bar imports nothing and is filed as built from the kit alone (00.10). The slot, the glass lip and the keys are CSS drawn here in the kit’s tokens; no image. Faces: Geist Mono and Instrument Sans (SIL OFL 1.1).