# Autopilot Hero > A hero where the product demos itself. Under the headline, an Autopilot cursor takes a 3am page, reads the trace, writes the fix and opens the pull request in a working incident console, and steps aside when a visitor reaches for the mouse. With a navbar and a Release Pill over the headline. A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/autopilot-hero). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/autopilot-hero - Screenshot: https://shadcn.exchange/shot/keyframeui/autopilot-hero/light.png - Registry item: https://keyframeui.com/r/autopilot-hero.json - Categories: blocks, hero-sections - Listed: 2026-10-27, source last changed 2026-10-27 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/keyframeui/autopilot-hero.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `motion` - Registry items: `https://keyframeui.com/r/autopilot.json`, `https://keyframeui.com/r/release-pill.json` ## Notes from the registry Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/autopilot-hero ## Files ### `registry/blocks/autopilot-hero.tsx` ```tsx "use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { Autopilot, type AutopilotChapter } from "@/components/ui/autopilot"; import { ReleasePill, type Release } from "@/components/ui/release-pill"; /* ── Content ───────────────────────────────────────────────── * Everything you'd change to make the hero yours. The incident * console under the headline is plain markup further down; the * data it shows and the cursor's lines are here too. * ─────────────────────────────────────────────────────────── */ /** The one accent: the cursor, the primary buttons and focus rings. */ const ACCENT = "#6e56cf"; const BRAND = { name: "Nightjar", href: "#" }; const NAV_LINKS = [ { label: "Product", href: "#product" }, { label: "Customers", href: "#customers" }, { label: "Pricing", href: "#pricing" }, { label: "Docs", href: "#docs" }, ]; const SIGN_IN = { label: "Sign in", href: "#sign-in" }; const NAV_CTA = { label: "Start free", href: "#start" }; const RELEASES: Release[] = [ { version: "v3.0", title: "Autofix for Kubernetes", date: "Oct 21", href: "#changelog-v3-0", summary: "Rolls back a bad deploy first, then opens the real fix as a pull request.", }, { version: "v2.9", title: "Runbooks from Slack threads", date: "Oct 7", href: "#changelog-v2-9" }, { version: "v2.8", title: "OpenTelemetry traces", date: "Sep 23", href: "#changelog-v2-8" }, { version: "v2.7", title: "SOC 2 Type II", date: "Sep 9", href: "#changelog-v2-7" }, ]; const CHANGELOG_HREF = "#changelog"; const HEADLINE = "Sleep through the incident."; const SUBLINE = "Nightjar is the AI on-call engineer. It takes the page, reads the trace, writes the fix and opens the pull request. You review it over coffee."; const PRIMARY_CTA = { label: "Try it on your repo", href: "#start" }; const SECONDARY_CTA = { label: "Book a demo", href: "#demo" }; const FOOTNOTE = "Free for 14 days. Works with GitHub, Datadog and PagerDuty."; /* The incident console the cursor works in. */ const APP_URL = "app.nightjar.dev/incidents"; /** The console's clock as the night goes on: waiting, investigating, fixed, shipped. */ const CLOCK = ["3:12 AM", "3:13 AM", "3:15 AM", "3:16 AM"]; type Severity = "SEV-1" | "SEV-2" | "SEV-3"; const INCIDENTS: { id: string; code: string; title: string; service: string; severity: Severity; opened: string }[] = [ { id: "checkout", code: "INC-2041", title: "5xx spike on /v2/checkout", service: "checkout-api", severity: "SEV-1", opened: "now" }, { id: "search", code: "INC-2039", title: "Indexer queue lag over 90s", service: "search", severity: "SEV-3", opened: "26m" }, { id: "auth", code: "INC-2036", title: "p99 latency up on /token", service: "auth", severity: "SEV-3", opened: "1h" }, ]; /** What the console says about an incident nobody needs to wake up for. */ const WATCHING = "Below the paging threshold, so nobody gets woken up. Nightjar keeps watching and pages a human only if it gets worse."; const TRACE = { total: 48, // ms spans: [ { id: "request", name: "POST /v2/checkout", start: 0, end: 48, depth: 0 }, { id: "auth", name: "auth.verify", start: 2, end: 11, depth: 1 }, { id: "cart", name: "cart.load", start: 12, end: 29, depth: 1 }, { id: "totals", name: "cart.totals", start: 30, end: 33, depth: 2 }, ], /** The span that threw, and what Nightjar found in it. */ cause: { span: "totals", error: "TypeError: Cannot read properties of undefined (reading 'code')", at: "applyTax · src/cart/totals.ts:42", finding: "Since deploy #8812, 14 min ago. Carts saved before May have no currency.", }, }; const FIX = { file: "src/cart/totals.ts", lines: [ { kind: " ", n: 41, text: "export function applyTax(cart: Cart) {" }, { kind: "-", n: 42, text: " const rate = TAX_RATES[cart.currency.code];" }, { kind: "+", n: 42, text: " const code = cart.currency?.code ?? DEFAULT_CURRENCY;" }, { kind: "+", n: 43, text: " const rate = TAX_RATES[code];" }, { kind: " ", n: 44, text: " return cart.subtotal * (1 + rate);" }, ], title: "Default the currency on legacy carts", number: 4821, checks: "3 checks passed", }; /** The cursor's label as it works. */ const SAYS = { page: "Paged: checkout is failing", trace: "Reading the trace", cause: "It broke in deploy #8812", fix: "Writing the fix", title: "Naming the pull request", open: "Opening the pull request", done: "Fixed. Back to sleep", }; /** The chapters, as the strip under the console names them. */ const CHAPTERS = ["Page", "Trace", "Fix", "Ship"]; /* ── Hero ────────────────────────────────────────────────── */ type ConsoleState = { /** The incident open in the console. */ incident: string | null; /** The span picked in its trace. */ span: string | null; /** The fix is written. */ fix: boolean; /** The pull request's title, as typed. */ title: string; /** The pull request is open. */ pr: boolean; }; const QUIET: ConsoleState = { incident: null, span: null, fix: false, title: "", pr: false }; const OPENED: ConsoleState = { ...QUIET, incident: "checkout" }; const FOUND: ConsoleState = { ...OPENED, span: TRACE.cause.span }; const WRITTEN: ConsoleState = { ...FOUND, fix: true, title: FIX.title }; const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--accent)"; export function AutopilotHero() { const [state, setState] = React.useState(QUIET); const update = (patch: Partial) => setState((current) => ({ ...current, ...patch })); // Each chapter starts from a known state, so a takeover or a jump replays it cleanly. const chapters: AutopilotChapter[] = [ { title: CHAPTERS[0], setup: () => setState(QUIET), steps: [ { wait: 500 }, { move: "incident-checkout", say: SAYS.page }, { wait: 250 }, { click: "incident-checkout" }, { wait: 400 }, ], }, { title: CHAPTERS[1], setup: () => setState(OPENED), steps: [ { move: "span-request", say: SAYS.trace }, { wait: 350 }, { move: "span-totals" }, { click: "span-totals" }, { wait: 1100, say: SAYS.cause }, ], }, { title: CHAPTERS[2], setup: () => setState(FOUND), steps: [ { click: "write-fix", say: SAYS.fix }, { wait: 900 }, { type: FIX.title, into: "pr-title", say: SAYS.title }, { wait: 300 }, ], }, { title: CHAPTERS[3], setup: () => setState(WRITTEN), steps: [ { click: "open-pr", say: SAYS.open }, { wait: 1800, say: SAYS.done }, ], }, ]; return (

{HEADLINE}

{SUBLINE}

{FOOTNOTE}

); } /** A faint grid that fades out from the top, and a glow of the accent behind the console. */ function Backdrop() { return (
); } /* ── Navbar ──────────────────────────────────────────────── */ function Navbar() { const [open, setOpen] = React.useState(false); const reduced = useReducedMotion(); const rootRef = React.useRef(null); const buttonRef = React.useRef(null); const menuId = React.useId(); // Escape or a press outside closes the menu. React.useEffect(() => { if (!open) return; const onKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; setOpen(false); buttonRef.current?.focus(); }; const onPointerDown = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); }; document.addEventListener("keydown", onKeyDown); document.addEventListener("pointerdown", onPointerDown); return () => { document.removeEventListener("keydown", onKeyDown); document.removeEventListener("pointerdown", onPointerDown); }; }, [open]); return (
{BRAND.name}
{open ? ( ) : null}
); } /* ── Incident console ────────────────────────────────────── */ function IncidentConsole({ state, update, }: { state: ConsoleState; update: (patch: Partial) => void; }) { const incident = INCIDENTS.find((item) => item.id === state.incident); const step = state.pr ? 3 : state.fix ? 2 : state.incident ? 1 : 0; return (
{CLOCK[step]} {APP_URL} {/* Kept clear for the cursor, which parks top right while the visitor has control. */}

Open incidents {INCIDENTS.length}

    {INCIDENTS.map((item, i) => (
  • 0 ? "hidden lg:block" : undefined}>
    • ))}
{!incident ? ( ) : incident.id === OPENED.incident ? ( ) : ( )}
); } function Waiting() { return (

{INCIDENTS.length} open incidents

One just paged. Open it to watch {BRAND.name} work.

); } function Watching({ code, title }: { code: string; title: string }) { return (

{code}

{title}

{WATCHING}

); } function Investigation({ state, update }: { state: ConsoleState; update: (patch: Partial) => void }) { const incident = INCIDENTS.find((item) => item.id === OPENED.incident)!; const status = state.pr ? { label: "Mitigated", tone: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", dot: "bg-emerald-500" } : state.fix ? { label: "Fix ready", tone: "bg-(--accent)/10 text-(--accent) dark:text-[color-mix(in_oklab,var(--accent),white_45%)]", dot: "bg-(--accent)" } : { label: "Investigating", tone: "bg-amber-500/10 text-amber-700 dark:text-amber-300", dot: "bg-amber-500" }; return (

{incident.code} · {incident.service}

{incident.title}

{status.label}
update({ span })} />
); } function TraceCard({ picked, folded, onPick, }: { picked: string | null; /** Below md, once the fix is written, the trace folds down to its finding to make room. */ folded: boolean; onPick: (span: string) => void; }) { const span = TRACE.spans.find((item) => item.id === picked); const cause = TRACE.cause; return (
Trace {TRACE.total} ms · 500
    {TRACE.spans.map((item) => { const failed = item.id === cause.span; return (
    • ); })}
{span ? (
{span.id === cause.span ? ( <>

{cause.error}

{cause.at}

{cause.finding}

) : (

{span.name} took {span.end - span.start} ms with no errors.

)}
) : null}
); } function FixCard({ state, update }: { state: ConsoleState; update: (patch: Partial) => void }) { const reduced = useReducedMotion(); const found = state.span === TRACE.cause.span; const canOpen = state.title.trim() !== ""; return (
Fix {FIX.file}
{!state.fix ? (

{found ? "Root cause found. The fix is one line." : "Pick the span that failed to see why."}

) : ( <>
{FIX.lines.map((line, i) => ( {line.n} {line.kind === " " ? "" : line.kind} {line.text} ))}
{state.pr ? ( #{FIX.number} opened {FIX.checks} ) : (
update({ title: event.target.value })} onKeyDown={(event) => { if (event.key === "Enter" && canOpen) update({ pr: true }); }} placeholder="Pull request title" aria-label="Pull request title" className="h-8 min-w-0 flex-1 rounded-lg border border-zinc-950/10 bg-white px-2.5 text-base outline-none placeholder:text-zinc-400 focus:border-(--accent) focus:ring-3 focus:ring-(--accent)/20 data-[autopilot-focus]:border-(--accent) data-[autopilot-focus]:ring-3 data-[autopilot-focus]:ring-(--accent)/20 sm:text-xs dark:border-white/10 dark:bg-zinc-950" />
)}
)}
); } /* ── Small parts ─────────────────────────────────────────── */ const SEVERITY: Record = { "SEV-1": { dot: "bg-rose-500", tag: "bg-rose-500/10 text-rose-700 dark:text-rose-300" }, "SEV-2": { dot: "bg-amber-500", tag: "bg-amber-500/10 text-amber-700 dark:text-amber-300" }, "SEV-3": { dot: "bg-zinc-400", tag: "bg-zinc-950/5 text-zinc-600 dark:bg-white/10 dark:text-zinc-300" }, }; function SeverityDot({ severity, live }: { severity: Severity; live: boolean }) { return ( {live ? ( ) : null} ); } function SeverityTag({ severity }: { severity: Severity }) { return ( {severity} ); } function Logo() { return ( ); } function MoonIcon({ className }: { className?: string }) { return ( ); } function ArrowIcon({ className }: { className?: string }) { return ( ); } function SparkIcon({ className }: { className?: string }) { return ( ); } function PullRequestIcon({ className }: { className?: string }) { return ( ); } function MenuIcon({ open }: { open: boolean }) { return ( ); } ```