# Control Room — Animated Section Block for React

> A live monitoring feature grid: a hairline-bordered 2×2 of living data vignettes — a giant odometer-rolling uptime stat, a self-drawing latency chart, a pulsing world map with landing arcs, and a scrolling activity feed — booting in a diagonal stagger from the headline stat, then settling to a low idle intensity. Composed from Tally, Plotter, Mercator, and Wire; panels accept custom children.

- Page: https://crucibleui.com/components/sections/control-room
- Category: [sections](https://crucibleui.com/components/sections)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/control-room
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/control-room`.

## Props (`ControlRoomProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading?` | `string` | — | Optional `h2` rendered above the grid. Omitted by default. |
| `description?` | `string` | — | Optional lede under the heading. |
| `panels?` | `ControlRoomPanel[]` | `the four-vignette monitoring room: headline uptime stat, self-drawing latency chart, pulsing world map, scrolling activity feed` | The panels, in grid order. |
| `columns?` | `1 \| 2 \| 3` | `2` | Grid columns at `md` and up (always 1 column on mobile). |
| `bootStagger?` | `number` | `0.5` | Seconds between boot waves. Panels boot diagonally outward from the headline stat — the number lands first, the evidence draws in around it. |
| `threshold?` | `number` | `0.3` | IntersectionObserver threshold that boots the section. |
| `idleIntensity?` | `number` | `0.3` | Global activity multiplier (0–1) applied once the boot moment has played: the feed's interval is divided by it and the map's arc frequency is multiplied by it, so the section settles to a quiet hum instead of fighting the page's real CTA. 1 keeps full intensity forever. |
| `colors?` | `ControlRoomColors` | — | Per-vignette accent hues (a panel's own `accent` wins). |
| `borderColor?` | `string` | `"rgba(255,255,255,0.08)"` | Hairline color for the outer border and internal dividers. |
| `paused?` | `boolean` | `false` | Render every vignette at its final, static frame — no boot, no loops. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"section">, "children">`.

## Usage example

```tsx
import { ControlRoom } from "@/components/crucible/control-room";

export default function ControlRoomDemo() {
  return (
    <div className="relative isolate flex h-full min-h-[420px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div className="w-full">
        <p className="pt-8 text-center text-[11px] font-medium uppercase tracking-[0.2em] text-neutral-500">
          Scroll into view — the number lands first, then the room boots around it
        </p>
        <ControlRoom
          heading="The whole system, one room"
          description="Uptime, latency, traffic, and events — measured live, then idling quietly once you've seen them."
          className="py-10 sm:py-12"
        />
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.