# 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.

Block · With a Pass · https://tactileui.dev/blocks/ticker

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| messages | text | Separated by “\|”, up to five. Short ones read best: the tape prints plain characters, one cell at a time. |
| href | text | A page, a path, an anchor, mailto: or tel:. The whole tape is the link. Empty: no link. |
| label | text | Engraved beside the lamp. Hidden on a narrow bar. |
| speed | number | A stock ticker runs at about ten. It stops on hover and on focus whatever this says. |
| id | text | What a dismissal is remembered by. Change it for a new announcement and everyone sees the bar again. |
| remember | boolean | Keeps a closed bar closed, in localStorage under the id. Off: it comes back on every visit. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. The paper stays paper. |

## Methods

- dismissed
- running
- pause
- play
- dismiss
- restore
- update
- destroy

## States

1. **Running**: The lamp at the left is lit green only while it moves.
2. **Held**: Hover 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. **Link**: With an href the whole slot is one link; its name is the words in the page. Without one it is only a message.
4. **Closing**: 
5. **Remembered**: The 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. **Tablet**: The bar keeps its height; the slot takes what the keys leave.
7. **Phone**: 
8. **Reduced motion**: No tape and no timer: the messages are set still in the same paper, wrapping if they must; the pause key is hidden.
9. **Off screen**: Off screen or in a hidden tab the timer is cleared and nothing runs.
10. **Finishes**: Aluminium and graphite by data-finish; the paper stays thermal stock in both.

## How it works

Original composition; Lode and its announcements are invented. It is built on the Receipt Printer’s language rather than its code. The slot, the glass lip and the keys are CSS drawn here in the kit’s tokens; no image.