Control Room.

A monitoring console: four live instruments up top re-tune on every slide, a scanline sweeps down as each view cuts in.

Look

As designed

Use Control Room in the Studio Open full screen

How it moves

Near-black console with a faint graticule. A top strip of four KPI tiles (count-up numbers, sparklines that draw themselves, deltas) never unmounts and changes with each slide. A channel list on the left, a framed main panel with a LIVE badge, a segment meter and a mono readout at the bottom. Slides do not slide, they hard-cut with a clip-path wipe and a scanline. Use it for metrics-heavy, operational or status-report decks.

This is the specification the Studio sends to the model, written for Control Room's own look. Change the look in the Studio and every value follows.

Palette

Background#06090d
Text#e6edf5
Muted#7c8c9e
Accent#24d6a4
Surfacergba(230,237,245,.045)
Hairlinergba(230,237,245,.14)

Type: Space Grotesk. Corners: 4px.

Layout

- The whole viewport is one CSS grid on #06090d: two columns (a left gutter clamp(8.5rem, 13vw, 12.5rem) and the rest), three rows (top strip auto, main 1fr, bottom bar auto), gaps clamp(.55rem, 1.1vh, .9rem) by clamp(.6rem, 1.1vw, 1rem), page padding clamp(.8rem, 1.7vh, 1.35rem) by clamp(.9rem, 1.7vw, 1.5rem). Behind everything sits a faint graticule: 1px lines of #e6edf5 at 3% every 46px in both directions. Every panel is a rgba(230,237,245,.045) box with a 1px rgba(230,237,245,.14) border and 4px radius. Nothing floats; it is a console.

- Top strip (spans both columns): four equal KPI tiles that NEVER unmount. Each tile has a 2px rgba(230,237,245,.14) bar on its left edge, a tiny caps label (.6rem, tracked .18em, #7c8c9e), a big tabular value clamp(1.4rem, 2.15vw, 2.1rem) / 700 / -0.03em with an optional small suffix (.48em, #7c8c9e: %, d, wk), and on the right a 56x18 sparkline drawn in #24d6a4 (1.3px, round caps, end dot r 1.9) over a delta in mono .62rem ("up 11" as a triangle plus number in #24d6a4, or "-" in #7c8c9e when flat). Each slide declares its own four tiles in a data-kpi attribute: "Label|value|suffix|delta|comma,separated,series" joined by semicolons, e.g. Retention|92|%|+11|81,83,86,88,90,92;Week|4|d|-1|5,5,5,4,4,4. A leading "!" on the delta means off (muted).

- Left gutter: a bordered channels list. Header "Channels" (.58rem caps, tracked .2em, #7c8c9e) over a rule, then one button per slide in a vertically centred column: mono channel id (01...), the slide title (.8rem / 500), a status dot. Idle #7c8c9e; visited dimmer with a grey dot; the active channel is #e6edf5, has a 2px #24d6a4 left border, a background of #24d6a4 at 8%, weight 600 and an #24d6a4 dot that emits one ping ring. Footer "Session 2026" in mono .56rem caps.

- Main panel (column 2, row 2): a header bar (background #e6edf5 at 4%) with the slide title at clamp(.64rem, .8vw, .78rem) caps, tracked .26em, on the left and a "LIVE" badge on the right (a .4rem #24d6a4 dot plus mono caps). Below it the body holds the slides, padded clamp(.9rem, 2vh, 1.7rem) by clamp(1rem, 2vw, 2rem), with four 0.5rem #24d6a4 corner ticks (50% opacity) inset .4rem from each corner. Slide content is centred vertically: cover h1 clamp(2rem, 4.8vw, 4.4rem) / 700 / -0.035em; others use a plain lede plus objects, no in-slide title (the panel header carries it). Objects are tuned to the console: card and carousel backgrounds #e6edf5 at 4%, the compare "after" column gets an inset 1px #24d6a4 ring, rings use butt linecaps, numbers are tabular.

- Bottom bar (spans both columns, 1px top rule): left a segment meter, one button per slide, each clamp(1.6rem, 3.3vw, 3.1rem) x .4rem with a 1px rgba(230,237,245,.14) outline; visited fill #24d6a4 at 42%, active solid #24d6a4 scaled 1.9 in Y. Right a mono readout (.62rem caps, tracked .14em, #7c8c9e with #e6edf5 values): "Studio review 2026", "CH 03/07", a percent ("033%", index over last index, always 3 digits, padded), and "Uplink stable" in #24d6a4. The .wide items hide under 1100px.

- Closing slide is a hub: a core label ("Next twelve months") with four spokes; nothing else changes, the console stays.

Motion

- Slides HARD CUT, they do not travel. Every slide fills the same grid cell; inactive ones are clip-path inset(100% 0 0 0), the active one inset(0). clip-path transitions .32s cubic-bezier(.22,1,.36,1), so the new view wipes up from the bottom edge. Set body data-reveal-delay="380" data-animate-delay="420".

- Scanline: on each change a 1px horizontal line (gradient transparent, #24d6a4 16-84%, transparent) spans the panel, opacity 0 to .95 by 14% then fades, translating from the top to 100% of the panel height over .62s on the arrive curve. Restart it by removing and re-adding a class after a forced reflow.

- KPI retune on every change: numbers count from their previous value to the new one over 700ms with a cubic ease-out (round to integers); the sparkline re-rolls by resetting stroke-dashoffset 1 to 0 over .7s (pathLength 1, dasharray 1) with the end dot fading in at .5s; the delta text swaps instantly. Tiles are built once and reused, never re-created.

- Under 760px the grid collapses to one column: strip becomes 2x2, the channels list becomes a horizontal scrolling row of ids with an accent bottom border on the active one, and the panel, then bottom bar follow. Reduced motion: no clip transition, no scanline, no ping, instant numbers.

Navigation. arrows / Space / PageUp / PageDown / Home / End / 1-9; wheel and trackpad move one slide per gesture; every channel row and every meter segment is a button and jumps.