Departures Board
A departures board of flip-dot lines under an enamel fascia. A train starts boarding, another slips five minutes, the first departs and every row below moves up in a clattering cascade.
Built with Flip-Dot
What it is for
Live information that people watch: a transport operator's station page, an airport or ferry terminal, a venue's door times, any queue or schedule where the change itself is the news.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- One line board updates, Cascading row shift, Per column disc fitting, Hanging sign mounts, Accessible table mirror, Pausable live updates, Visibility gated timer, Container tiered sign layout
- Stack
- Vanilla ES modules, CSS, Canvas 2D, Container queries
- Needs
- Flip-Dot
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restEnamel fascia with the station, operator mark, platform plates and a flip-dot clock; the board asleep; the calling-at sign scrolling the first train's stops.
- Row updateEvery ~5 s while in view one line changes on its own (BOARDING, EXP 11:08, DELAYED, DEPARTED) with a wave confined to that line's rows.
- CascadeWhen the first train has gone every train line is rewritten top to bottom, 150 ms apart, and a new service is written in at the bottom; the calling-at sign follows.
- AnnouncedEach change is one polite sentence and the departures table (visually hidden, real th/caption) is rewritten.
- PausedA real toggle (aria-pressed) stops the updates (WCAG 2.2.2). The lamp goes dark and the notice says so.
- PaletteEnamel (a night concourse under navy) or daylight (pale concrete, black fascia); disc fitting mixed, amber or classic yellow-green.
- TabletThe foot stacks; notes in one column under 760 px.
- PhoneUnder a 640 px container the board goes to 100 columns, two lines per train (time and destination; platform and status); the fascia stacks with the clock beside the date; buttons full width.
- Reduced motionEvery sign swaps instantly and requests no frames; the cascade lands at once; the calling sign pages; every update still happens and is announced.
- Off screenThe update timer stops (IntersectionObserver, hidden tab) and every sign sleeps.
Notes
The board is the content; the table and the announcements carry the same news in words.
Original composition. Keston Parkway, the Harwick & Keston Railway, its mark and every service are invented. Imagery is SVG and CSS drawn for the scene; the signs are the Flip-Dot. Face: Work Sans (SIL OFL 1.1), Latin subsets as WOFF2.
Anatomy
One line board updates, Cascading row shift, Per column disc fitting, Hanging sign mounts, Accessible table mirror, Pausable live updates, Visibility gated timer, Container tiered sign layout
Usage notes
Live information that people watch: a transport operator's station page, an airport or ferry terminal, a venue's door times, any queue or schedule where the change itself is the news. The board is the content; the table and the announcements carry the same news in words.
Options
| Option | Type | Description |
|---|---|---|
| station | text | Station |
| operator | text | Operator |
| kicker | text | Beside the departures arrow, under the station name. |
| platforms | number | The numbered plates on the fascia. |
| notice | text | Station notice |
| cta | text | Button |
| ctaHref | text | Button link |
| trains | number | A phone shows the first four, two lines each. |
| live | boolean | Rows change one at a time while the section is in view, with a pause button. |
| palette | enum | A night concourse under navy enamel, or pale concrete by day. |
| scheme | enum | Mixed: white times, yellow-green destinations, amber status. Or one colour throughout. |
| finish | enum | Housings |
| glass | boolean | Glass covers |
| light | number | Light from (degrees) |
| waveSpeed | number | Wave speed (columns/s) |
Methods
- root
- signs
- sim
- step
- update
- destroy
How it works
Original composition. Keston Parkway, the Harwick & Keston Railway, its mark and every service are invented. Imagery is SVG and CSS drawn for the scene; the signs are the Flip-Dot.