newsstand · Overview

newsstand is a wall of physical screens for the Mars private museum. One central touch panel (the controller) drives the surrounding display screens. The operator picks an item on the controller and sends it to one of the screens; the item animates out of the controller toward the target screen’s direction, and animates in on that screen from the opposite direction.

Roles

Each role is a separate HTML entry — three roles for production, plus a dev-only simulator and launcher.

Role	Entry	Purpose
Controller	controller.html	The touch panel: pick an item, send to a screen.
Screen	screen.html?id=<screen-id>	A wall display. Listens for show/clear messages.
Simulator	simulator.html	Dev tool: renders the whole wall + controller in one window via iframes.
Launcher	index.html	Dev tool: links to all the above.

Run

pnpm dev --filter newsstand

Open http://localhost:3000/ for the launcher, or http://localhost:3000/simulator.html to see the full wall.

Source layout

apps/newsstand/src/
├── channel.ts             # BroadcastChannel wrapper
├── settings-store.ts      # runtime settings (localStorage + BC sync)
├── config/
│   ├── settings.ts        # types + defaults (wall, controller, screens)
│   └── items.ts           # content (color cards for the PoC)
├── controller/main.tsx
├── screen/main.tsx
├── simulator/
│   ├── main.tsx
│   ├── SettingsPanel.tsx
│   └── ConfirmDialog.tsx
├── launcher/main.tsx
└── styles.css

Deeper docs

• Architecture — why these primitives
• Settings — config + runtime store
• Channel — cross-window messaging
• Simulator — wall scaling + edit mode
• Animation — direction-driven GSAP