# Black Box Hero
> A hero for an AI product that shows its work. A question drops down a wire into a glossy black box, its three faces open in turn with what each part did for that question, and the answer comes back up beside it. Point at a face to hold it open. Under it, four numbers in oversized type roll into place.
A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/black-box-hero).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/black-box-hero
- Screenshot: https://shadcn.exchange/shot/keyframeui/black-box-hero/light.png
- Registry item: https://keyframeui.com/r/black-box-hero.json
- Categories: blocks, hero-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/black-box-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/black-box.json`, `https://keyframeui.com/r/odometer.json`, `utils`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/black-box-hero
## Files
### `registry/blocks/black-box-hero.tsx`
```tsx
"use client";
import * as React from "react";
import { animate, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { BlackBox, type BlackBoxFace } from "@/components/ui/black-box";
import { Odometer } from "@/components/ui/odometer";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the hero yours: the palette,
* the nav, the copy, the questions the box answers and the
* numbers under it. Each question drops into the box, its three
* faces open in turn with what that part did for this question,
* and the answer comes back out. Point at a face to hold it open;
* click one and the questions stop on their answer.
* ─────────────────────────────────────────────────────────── */
/**
* Crisp paper and ink, and one electric blue: the light inside the box,
* the agent's avatar and the working dot. Dark mode turns the box to glass.
*/
const PALETTE = {
light: { paper: "#fbfbfc", ink: "#0a0a0b", accent: "#3355ff" },
dark: { paper: "#060709", ink: "#f4f5f7", accent: "#7088ff" },
};
const BRAND = { name: "Basalt", handle: "@basalt", href: "#" };
const NAV_LINKS = [
{ label: "Product", href: "#product" },
{ label: "Customers", href: "#customers" },
{ label: "Pricing", href: "#pricing" },
{ label: "Docs", href: "#docs" },
];
const NAV_ACTIONS = {
demo: { label: "Book a demo", href: "#demo" },
signIn: { label: "Sign in", href: "#sign-in" },
signUp: { label: "Start free", href: "#start" },
};
const HEADLINE = ["Books that close", "themselves."];
const SUBLINE =
"Basalt reconciles every account overnight. Ask it anything about your numbers and it opens up to show where each answer came from.";
const PRIMARY_CTA = { label: "Start closing", href: "#start" };
const SECONDARY_CTA = { label: "Talk to an accountant", href: "#talk" };
/** The person asking, shown as initials beside each question. */
const ASKER = "MO";
/** The three parts of the box, in the order they work: top, left, right. */
const PARTS = [
{
id: "pull",
label: "Pull",
icon: (
),
},
{
id: "match",
label: "Match",
icon: (
),
},
{
id: "explain",
label: "Explain",
icon: (
),
},
] as const;
type PartId = (typeof PARTS)[number]["id"];
/** Each question, what every part of the box did for it, and the answer that comes back. */
const QUESTIONS: { ask: string; steps: Record; answer: React.ReactNode }[] = [
{
ask: "Why is software spend up 22% in October?",
steps: {
pull: "1,284 October transactions, and September's to compare.",
match: "41 charges tied to invoices. Two are annual renewals.",
explain: "Without the renewals, software is down 3%.",
},
answer: (
<>
Two annual renewals landed in October: Northwind CRM ($14,400) and Tinta ($6,100). Without them,
software is down 3%.
),
},
{
ask: "Are we still on track for 18 months of runway?",
steps: {
pull: "Cash in 3 accounts, 6 payroll runs, every contract.",
match: "Forecast within 2% of the last 90 days of actuals.",
explain: "Two March hires raised burn; runway was 19 months.",
},
answer: (
<>
Yes, just: 18.4 months, down from 19 after the two March hires. A third hire takes it to 16.9.
),
},
{
ask: "What's still blocking the September close?",
steps: {
pull: "14 accounts, 2,031 September transactions.",
match: "2,024 matched on their own. 7 have no receipt.",
explain: "The 7 belong to three people. Each has been asked.",
},
answer: (
<>
Seven card charges without receipts, from three people. I've messaged each of them; the books close
when they reply.
),
},
];
/** The numbers under the hero. `value` rolls in when the strip scrolls into view. */
const STATS: { value: number; format?: Intl.NumberFormatOptions; suffix?: string; caption: string }[] = [
{ value: 2400000, format: { notation: "compact", maximumFractionDigits: 1 }, caption: "transactions matched last month" },
{ value: 4, suffix: " hrs", caption: "to close the month, down from six days" },
{ value: 0.997, format: { style: "percent", maximumFractionDigits: 1 }, caption: "of transactions matched without a person" },
{ value: 1900, suffix: "+", caption: "finance teams closing on Basalt" },
];
/** How long each beat of a question plays, in ms: asked, the three parts at work, answered, cleared. */
const BEATS = [900, 2600, 2600, 2600, 5200, 450];
const ANSWERED = 4;
/* ── Section ─────────────────────────────────────────────── */
export function BlackBoxHero() {
const reduced = useReducedMotion();
const [question, setQuestion] = React.useState(0);
const [beat, setBeat] = React.useState(0);
const [visitor, setVisitor] = React.useState(null);
const [picked, setPicked] = React.useState(false);
const pulseRef = React.useRef(null);
// The questions play on their own until the visitor picks a face; pointing at one holds the
// current beat. Under reduced motion the first question rests on its answer.
React.useEffect(() => {
if (reduced) {
const timer = window.setTimeout(() => setBeat(ANSWERED), 0);
return () => window.clearTimeout(timer);
}
if (picked || visitor !== null) return;
const timer = window.setTimeout(() => {
if (beat + 1 < BEATS.length) setBeat(beat + 1);
else {
setBeat(0);
setQuestion((question + 1) % QUESTIONS.length);
}
}, BEATS[beat]);
return () => window.clearTimeout(timer);
}, [beat, question, visitor, picked, reduced]);
// A pulse runs down the wire into the box as a question is asked, and back up with the answer.
React.useEffect(() => {
const pulse = pulseRef.current;
if (!pulse || reduced || (beat !== 0 && beat !== ANSWERED)) return;
const down = beat === 0;
const run = animate(
pulse,
{ transform: down ? ["translateY(-100%)", "translateY(300%)"] : ["translateY(300%)", "translateY(-100%)"], opacity: [1, 1] },
{ duration: 0.55, ease: [0.65, 0, 0.35, 1], delay: down ? 0.25 : 0 },
);
return () => run.stop();
}, [beat, question, reduced]);
const current = QUESTIONS[question];
const faces: BlackBoxFace[] = PARTS.map((part) => ({ ...part, detail: current.steps[part.id] }));
const working = beat >= 1 && beat <= 3;
const value = visitor ?? (working ? PARTS[beat - 1].id : null);
return (
{BRAND.name}
);
}
/* ── Marks ─────────────────────────────────────────────────── */
function AgentAvatar() {
return (
);
}
// A basalt column seen end-on: a hexagon with the three edges of a cube's near corner.
function BasaltMark({ className, cut = "var(--paper)" }: { className?: string; cut?: string }) {
return (
);
}
```