Control Room
StableA home page where the product is the hero: a live dashboard shot, a bento of features, a run wall and an FAQ.
Home concept 01 for the agent-analytics product, written for platform and developer-experience engineers. A blur-in headline over a soft ceiling light, the dashboard framed by one lap of light, the founder’s own numbers counting up, five feature cards that lift under the cursor, the run wall, three steps with the OpenTelemetry settings, an FAQ and a closing panel whose corners draw themselves. Drawn dark-first, and complete in light too.
Updated View source
Control Room home page
import { HomeControlRoom } from '@rchursin/home'
/** * Home concept 01, for platform and developer-experience engineers: the product is the hero. * The page brings its own skip link, header, <main> with one <h1>, and footer. Numbers in the * product shots are labelled as sample data. */export default function ControlRoomPage() { return <HomeControlRoom />}Usage
import { HomeControlRoom } from '@rchursin/home'<HomeControlRoom />Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | The first stop is “Skip to content”, then the header’s logo, links and button, then the page in reading order. |
| Enter | On “Skip to content”: jump past the header to the page’s <main>. |
| EnterSpace | On an FAQ question: open or close its answer. Opening one closes the one that was open. |
| EnterSpace | Below 768 pixels, on the menu button: open or close the header’s links. |
| EnterSpace | On the run wall’s “Pause animation” button: stop or restart its moving scan line. The button is hidden when reduced motion is on, because nothing moves then. |
- One <h1>, a skip link to <main id="main">, a <header> with a navigation named “Main”, and a <footer>. Every section is labelled by its own heading.
- Arrivals (lux-reveal) start hidden only when motion is allowed and the script has run; with reduced motion or before hydration, everything is simply there.
- Numbers from a workspace are marked “Sample data” on the page. Bracketed text such as [YOUR PRICE] or [CONFIRM BEFORE LAUNCH] is a placeholder to replace before launch.
- The founder’s figures are a description list: each label is a <dt> and its number a <dd>; the numbers count up once and land on the real value.
- The coding agents strip is a section named “Supported coding agents”; its separators are hidden squares.
Guidelines
Do
- Keep the dashboard shot as the hero: this concept sells the product by showing it.
- Replace the sample dashboard with a real screenshot or the live product once you have one.
- Keep one primary button per section: “Start free” leads, “Read the docs” follows.
Don’t
- Don’t publish it with the sample numbers or bracketed placeholders still in.
- Don’t add a second <h1>; every section below the hero uses <h2>.
- Don’t force a theme on it: it is drawn for both and follows the page’s dark class.
In use
Related
- Site headerThe home pages’ sticky header in three styles: a full bar, a floating glass pill and a minimal mono row.
- Site footerThe home pages’ footer: three link columns with a cropped wordmark, or one simple row.
- Dashboard mockA still picture of the product: four headline numbers, a bar list of skill runs and a ledger with verdicts, on sample data.
- Run wallA month of agent runs as a wall of squares, with a sweeping day highlight you can pause.
- FAQQuestions and answers on native <details>: one answer open at a time, with no JavaScript required.
- Frame cornersThe logo’s two shapes as a viewfinder: an L bottom-left and a square top-right, drawn around any box.
- Count upA number that counts up once, the first time it scrolls into view. Screen readers get the final value straight away.
Source
The component’s own files, exactly as they run on this site.
/** * Home 01 · Control Room — the product is the hero. * For platform / developer-experience engineers. Default theme: dark. * * Mix: Tailwind Plus layout (header, "with bordered app screenshot" hero, three-column bento, * FAQ, footer) · shadcn/ui-style app mock (cards, table) · Magic UI (Shiny Text pill, * Border Beam, Dot Pattern) · the run wall (Warp-style tile grid in the logo's squares). * * Details: a soft ceiling light over the hero, film grain, the headline arriving out of a * blur, the product shot sinking into the page, cards that lift and catch a pool of light * under the cursor, counting figures, and a closing panel whose frame draws itself. */import { CountUp, useLuxe } from "../../components/motion"import { ShinyPill } from "../../screens/magic-ui/parts"import { HeaderLink, SiteFooter, SiteHeader, SkipLink } from "../Chrome"import { founderStory, sources, steps } from "../content"import { DashboardMock } from "../DashboardMock"import { Faq } from "../Faq"import { RunWall } from "../RunWall"import { ButtonLink, Container, delay, Eyebrow, FrameCorners, SectionHeading } from "../ui"