Venue Marquee

A venue's tonight: a club, a music hall, a theatre, a cinema's showings or a festival stage, where the line-up is the product and the sign is how a venue has always announced it. The running order drives the sign; the ticket card sells the night.

Copy the venue-marquee folder and the flip-dot folder from its package next to your page, link the stylesheets and mount 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">
<link rel="stylesheet" href="venue-marquee/venue-marquee.css">
<div id="venue-marquee"></div>

<script type="module">
  import FlipDot from './flip-dot/flip-dot.mjs';
  import { mount } from './venue-marquee/venue-marquee.mjs';

  const venueMarquee = mount(document.getElementById('venue-marquee'), {
    club: 'Undercroft',
    address: 'Arch 14, Keston Road',
    date: 'Saturday 27 September',
  }, { FlipDot });

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

mount(element, options, { FlipDot })

Builds the block inside the element and returns its handle. Hand it the Flip-Dot it is built with.

handle.root

handle.sign

handle.shown

handle.show(i)

Put an act on the sign (−1: the night itself).

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. ArrivalThe marquee writes TONIGHT and the shortened date in with the wave when it first comes into view.
2. RotatingEvery 5.6 s while seen the next act clatters in: the name in amber (large face), time and room in white (small face), only the discs that differ flipping, at random moments with the scatter wave.
3. ChosenAn act row is a real button: pressing it writes that act on the sign and presses the row (aria-pressed, accent bar, accent time); the rotation rests 14 s.
4. PausedA real toggle (aria-pressed) stops the rotation (WCAG 2.2.2) with a play/pause glyph.
5. PaletteSodium (amber on near-black) or ultraviolet (lilac on violet-black); fitting sodium, white or signal; brass, ink, graphite or steel housing; wall, hanging or no mount.
6. TabletThe running order and the ticket card stack; the card turns sideways, releases left and the price and button right.
7. PhoneUnder a 720 px container the bar wraps with the nav on its own scrolling row, the meta stacks one fact a line, the act rows restack (time and room, then name, then note).
8. Reduced motionEvery name swaps in at once and no frame is requested; the rotation is off; every act is in the running order and on the sign when chosen.
9. Off screenThe rotation timer stops and the sign sleeps.

Made of: Scatter wave arrival, Per line disc fitting, Wall bracket mount, List driven sign, Pausable rotation, Visibility gated timer, Reduced motion static sign.

Original composition. The Undercroft, its address and every act are invented. Imagery is CSS drawn for the scene; the marquee is the Flip-Dot with its wall mount. Faces: Boldonse and Geist Mono (SIL OFL 1.1), Latin subsets as WOFF2.

• 03Flip-DotThe flip-disc sign from buses and stations.

More blocks on the same object:

• 03.1Departures BoardA departures board of flip-dot lines under an enamel fascia.
• 03.2ScoreboardA match centre round a flip-dot scoreboard.
• 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.