Flip-Dot

A readout that is an object: a departures board, a live clock or scoreboard, a venue marquee, a status sign, or a hero the visitor writes on. Lines can be aligned, painted and rewritten one at a time; the message stays plain text for assistive technology; only the discs move.

Copy the flip-dot folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="flip-dot/flip-dot.css">
<div id="flip-dot" style="width: min(92vw, 1100px)"></div>

<script type="module">
  import FlipDot from './flip-dot/flip-dot.mjs';

  const flipDot = new FlipDot(document.getElementById('flip-dot'), {
    text: 'NOW BOARDING',
    mode: 'static',
    font: 'auto',
  });

  // flipDot.update({ … });   change any option in place
  // flipDot.destroy();        and take it away again
</script>

new FlipDot(element, options)

Builds it inside the element with these options.

update(opts = {})

Change options in place.

setText(text)

Show a new message, the departures-board way.

setLine(index, text, style = null)

Rewrite one line of the board: only its rows flip, with the wave, while the other lines hold (or finish their own wave).

setFrame(bits, label = '')

Show a raw bitmap (see normaliseBits for the shapes it takes).

replay()

Clear the sign with the wave, then write the message again.

pause()

Hold and release a marquee (give the page a control for it).

play()

state

message

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: flipdot:mode.

1. At restEvery disc latched against its stop; the loop is asleep and requests no frames.
2. Writing inThe first time the sign comes into view it starts dark and writes its message with the wave.
3. Changing messageOnly the discs that differ flip, in a sweep, diagonal, ring or scatter that starts at the first change; each lands, rebounds and latches.
4. MarqueeHolds the start of the message, then scrolls it a column at a time; stops while the pointer is over it or when paused.
5. ClockHH:MM from the local time; the colon flips every second and the digits change with the wave. The accessible name updates once a minute, silently.
6. DrawThe pointer inverts the discs it passes; each flips back after the configured time, in the order it was written.
7. A board, one line at a timesetLine(i, text) rewrites one line with a wave confined to its rows; the other lines hold, or finish their own wave. Each line (and each tab-separated column) can carry its own alignment, face and disc paint.
8. Glass coverOn by default: a 2.2 % veil and a reflection band with a firm edge and a soft tail on the lamp side, broken up by low-frequency unevenness, faded in under the bezel lip.
9. MountedHanging from two drop rods (ceiling flange, rod, clevis, tab, bolt) or bolted to the wall on four flat brackets with their shadows; all per pixel from the same lamp. The object grows by its mount in percentage padding.
10. RebuildingA resize, a colour, a lamp or a mount change is baked in 8 ms slices between frames (no task over 50 ms); the old picture stays up until the new one swaps in whole. A high-density first paint is a half-resolution draft, sharpened a moment later.
11. Mode taken oversetFrame() on a marquee or clock turns it static and dispatches a bubbling flipdot:mode event; the preview writes it back to the lab, so the Mode control stays true.
12. Off screen or hiddenThe loop pauses and the wave's clock stops; a returning tab cannot launch a disc with a long frame.
13. Reduced motionThe message on the first paint, every change an instant swap, no frames requested; a marquee becomes pages of whole words.

Made of: Latching disc physics, Scheduled wave, Banded line waves, Per line and column layout, Ray cast sprite atlas, Baked motion blur, Progressive sliced baking, Glass reflection layer, Lamp lit mount, Dirty cell redraw, Bitmap type, Sleeping loop, Synthesised clatter.

Original. Taken from the physical flip-disc sign, not from a catalogue reference, so references is honestly empty. Both bitmap faces were drawn for this piece; Canvas 2D only, every surface (discs, housing, glass, mount) shaded per pixel from one lamp, so no image or font ships. Presets: Now boarding, Platform 2, Night bus, Station clock, Write on it.

• 03.1Departures BoardA departures board of flip-dot lines under an enamel fascia.
• 03.2ScoreboardA match centre round a flip-dot scoreboard.
• 03.3Venue MarqueeA club’s site on the night, under a brass flip-dot marquee.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.