CRS Signage Systems

01 Overview

The CRS Signage System comprises two parallel applications — the Dark System (industrial, moody, street-facing) and the Light System (Scandinavian, clean, internal-facing). Both are standalone React + Vite applications deployed to Cloudflare Pages.

Each system contains 7 distinct "reels" (thematic carousels) plus a time-based Auto-Router that selects the correct reel by time of day and day of week. They are designed to run full-screen on digital signage displays, primarily via Yodeck integration.

02 Live URLs & Repositories

Each reel is accessible at a dedicated sub-path on its respective domain. The /auto path runs the time-based scheduler and is the recommended URL for Yodeck.

03 Technical Architecture

Both projects share an identical architecture, differing only in their brand implementation — colours, typography, and component styling. There are no external CSS libraries or component frameworks; all styling is inline CSS-in-JS.

04 Project Structure

The structure is identical for both crs-signage and crs-signage-light.

05 Brand System

brand.ts is the single source of truth for all visual tokens. It exports two primary objects and several shared style objects used across all reels.

Exported tokens

Dark System palette

Light System palette

06 Reel Components

Each reel is a self-contained React component. It defines its own FRAMES array at the top of the file — this is where all copy, durations, and pricing live. All reels are wrapped in CRSShell for the persistent UI chrome.

Editing a reel

Open the reel's .tsx file. The FRAMES array at the top controls everything:

const FRAMES = [
  {
    id: 'identity',
    duration: 12000,          // ms before advancing to next frame
    label: 'COWLEY ROAD STUDIOS', // small caps label above title
    title: "Oxford's Creative\nHeadquarters.",
    subtitle: 'Rehearse. Record. Work. Connect.',
    showPricing: true,
    pricingKey: 'recording',  // key into the PRICING object below
    accentColor: C.teal,       // overrides the default accent
  },
  // ... more frames
]

07 Auto-Router

AutoRouter.tsx contains the master schedule. It selects the correct reel by evaluating the current day and time against an ordered SCHEDULE array. The first matching window wins.

Default schedule

Civic Greeting injection cadence

How loop re-evaluation works

Each reel fires an onLoopComplete callback when it finishes one full cycle. AutoRouter increments the loop counter, re-runs the schedule resolver (so a time window change mid-loop is caught), and decides whether to inject a Civic Greeting. A 60-second fallback tick also runs in the background for any reel that does not yet fire onLoopComplete.

08 Local Development

# Dark System
gh repo clone captainburbseye-web/crs-signage

# Light System
gh repo clone captainburbseye-web/crs-signage-light

cd crs-signage
pnpm install

pnpm dev

09 Deployment

Both projects are deployed to Cloudflare Pages using the Wrangler CLI. A Cloudflare API token with Pages write permissions is required for manual deploys.

Manual deployment

# 1. Build
pnpm run build

# 2. Deploy
CLOUDFLARE_API_TOKEN=<API_TOKEN> \
CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> \
npx wrangler pages deploy dist \
  --project-name=crs-signage \
  --branch=main

# 1. Build
pnpm run build

# 2. Deploy
CLOUDFLARE_API_TOKEN=<API_TOKEN> \
CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> \
npx wrangler pages deploy dist \
  --project-name=crs-signage-light \
  --branch=main

Continuous deployment (recommended)

Connect the GitHub repo to Cloudflare Pages for automatic deploys on every push to main.

10 Yodeck Integration

The signage systems are designed to run full-screen as Web Page widgets in Yodeck. The /auto route handles all scheduling automatically — no playlist management needed for day-to-day operation.

https://crs-signage.pages.dev/auto

https://crs-signage.pages.dev/night
https://crs-signage.pages.dev/student
https://crs-signage.pages.dev/mostro