crucıble

Control Room

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.

motionpro

Installation

CLI

npx shadcn@latest add @crucible/control-room

Manual — install dependencies, then copy the source

npm install motion

Props

PropTypeDefaultDescription
headingstringOptional h2 rendered above the grid. Omitted by default.
descriptionstringOptional lede under the heading.
panelsControlRoomPanel[]the four-vignette monitoring room: headline uptime stat, self-drawing latency chart, pulsing world map, scrolling activity feedThe panels, in grid order.
columns1 | 2 | 32Grid columns at md and up (always 1 column on mobile).
bootStaggernumber0.5Seconds between boot waves. Panels boot diagonally outward from the headline stat — the number lands first, the evidence draws in around it.
thresholdnumber0.3IntersectionObserver threshold that boots the section.
idleIntensitynumber0.3Global 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.
colorsControlRoomColorsPer-vignette accent hues (a panel's own accent wins).
borderColorstring"rgba(255,255,255,0.08)"Hairline color for the outer border and internal dividers.
pausedbooleanfalseRender every vignette at its final, static frame — no boot, no loops.
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children"> — they pass through to the underlying element.

Honors prefers-reduced-motion with a designed static fallback, and passes className through.