# Black Box Feature
> A how-it-works section with the product as a black box and its steps beside it. The box opens one face per step on its own while a hairline fills under the step that's playing; point at a step and its face opens, point at a face and its step lights up, pick one and it stays.
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-feature).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/black-box-feature
- Screenshot: https://shadcn.exchange/shot/keyframeui/black-box-feature/light.png
- Registry item: https://keyframeui.com/r/black-box-feature.json
- Categories: blocks, feature-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/black-box-feature.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`, `utils`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/black-box-feature
## Files
### `registry/blocks/black-box-feature.tsx`
```tsx
"use client";
import * as React from "react";
import { animate, useInView } from "motion/react";
import { cn } from "@/lib/utils";
import { BlackBox, type BlackBoxFace } from "@/components/ui/black-box";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the section yours: the
* palette, the copy and the three steps. The box opens one face
* per step on its own, with a timer line under the step that's
* playing; point at a step (or a face) and the other follows,
* pick one and it stays.
* ─────────────────────────────────────────────────────────── */
const PALETTE = {
light: { paper: "#ffffff", ink: "#0a0a0b", accent: "#3355ff" },
dark: { paper: "#060709", ink: "#f4f5f7", accent: "#7088ff" },
};
const EYEBROW = "How Basalt closes";
const HEADLINE = ["Three passes.", "Every one leaves a trail."];
const SUBLINE =
"Close the month without a spreadsheet in sight, and still open any total down to the receipt behind it.";
/** Time each step stays open while the section plays on its own, in ms. */
const STEP_TIME = 3600;
const STEPS: (BlackBoxFace & { proof: string; body: string })[] = [
{
id: "pull",
label: "Pull",
detail: "Bank, card and payroll feeds",
body: "Read-only feeds from every bank, card program and payroll run, refreshed each night before anyone's up.",
proof: "3 banks · 2 card programs · payroll",
icon: (
),
},
{
id: "match",
label: "Match",
detail: "Every line to its receipt",
body: "Each transaction is tied to its invoice, receipt or contract. Anything it can't place goes to the person who spent it.",
proof: "2,024 of 2,031 matched on their own",
icon: (
),
},
{
id: "close",
label: "Close",
detail: "Locked, with the working",
body: "The period locks with a close pack your accountant can read: every adjustment, who approved it and why.",
proof: "Locked Oct 3, 06:12 · 41-page pack",
icon: (
),
},
];
/* ── Section ─────────────────────────────────────────────── */
export function BlackBoxFeature() {
const [value, setValue] = React.useState(null);
const [holding, setHolding] = React.useState(false);
const [picked, setPicked] = React.useState(false);
const [overBox, setOverBox] = React.useState(false); // the box holds its own autoplay; this just hides the timer
const playing = !holding && !picked;
return (
{EYEBROW}
{HEADLINE[0]}{HEADLINE[1]}
{SUBLINE}
{
setValue(id);
if (reason === "pick") setPicked(true);
}}
autoplay={playing ? STEP_TIME : false}
labels={false}
onPointerEnter={(event) => {
if (event.pointerType === "mouse") setOverBox(true);
}}
onPointerLeave={() => setOverBox(false)}
className="mx-auto max-w-[34rem] [--black-box-light:var(--accent)]"
aria-label="Basalt's three passes"
/>
setHolding(false)}
onFocus={() => setHolding(true)}
onBlur={(event) => {
if (!event.currentTarget.contains(event.relatedTarget as Node)) setHolding(false);
}}
>
{STEPS.map((step, i) => {
const on = value === step.id;
return (
{on && playing && !overBox ? : null}
);
})}
);
}
/* ── TimerLine ─────────────────────────────────────────────── */
// A hairline under the step that's playing, filling over the step's time. It starts again
// whenever it comes back into view, as the box's own timer does.
function TimerLine({ duration }: { duration: number }) {
const ref = React.useRef(null);
const inView = useInView(ref);
React.useEffect(() => {
const line = ref.current;
if (!line || !inView) return;
const run = animate(line, { transform: ["scaleX(0)", "scaleX(1)"] }, { duration: duration / 1000, ease: "linear" });
return () => run.stop();
}, [inView, duration]);
return (
);
}
```