The Receipt
StableAn editorial home page about cost: a printed receipt for agent work, figures that count up, a ledger and a cost chart.
Home concept 03, light-first, for engineering managers who own the AI budget. A large headline next to a tilted receipt that prints line by line, three “Fig.” figures with growing rules, a ledger with a line for every agent and skill, a bar chart of cost per finished task (stripes mark anything over twice the median), three steps, the founder’s quote, an FAQ and an inverted closing band.
Updated View source
The Receipt home page
import { HomeReceipt } from '@rchursin/home'
/** * Home concept 03, editorial and about cost: a printed receipt for agent work, three figures, * an itemised ledger and a cost chart. Complete page: skip link, header, <main> with one <h1>, * footer. The ledger and the chart are labelled as sample data. */export default function ReceiptPage() { return <HomeReceipt />}Usage
import { HomeReceipt } from '@rchursin/home'<HomeReceipt />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. |
- 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 chart is a list named “Cost per finished task by agent, sample data”, with every value written beside its bar; the caption gives the median and says what the stripes mean.
- The ledger is a table in a region named “Sample ledger”; verdicts are written words in badges of different shapes, never colour alone.
- The figures’ section has a hidden heading (“Why idle skills cost something”) so the outline stays whole.
Guidelines
Do
- Keep every number sourced: Fig. 1 links to Anthropic’s docs; replace the samples with your own data.
- Use the stripes, not colour, to mark outliers in the chart.
- Keep it for readers who care about cost; it is the most editorial of the four.
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
- ReceiptA paper receipt for one agent task: torn edges, dotted leaders, a total, and a FIX stamp that lands.
- Verdict badgeKeep, fix, merge or cut: a mono badge where each verdict has its own shape, and the word is always there.
- Count upA number that counts up once, the first time it scrolls into view. Screen readers get the final value straight away.
- FAQQuestions and answers on native <details>: one answer open at a time, with no JavaScript required.
- Site footerThe home pages’ footer: three link columns with a cropped wordmark, or one simple row.
- Scroll arrivalsContent that fades and rises in as it scrolls into view, bars that grow, stamps that land and a frame that draws itself.
Source
The component’s own files, exactly as they run on this site.
/** * Home 03 · The Receipt — editorial, about cost. Every agent task leaves a bill; we itemise it. * For engineering managers and leads who own the AI budget. Default theme: light. * * Mix: Tailwind Plus header, stats ("simple grid"), content sections and 4-column footer · * shadcn/ui-style table · a printed receipt with line-by-line reveal (Magic UI "Animated List" * idea, in CSS) · editorial figure labels (Linear "Fig." captions, PlanetScale-style numbers) · * an inverted closing band. */import { cx } from "../../components/cx"import { CountUp, useLuxe } from "../../components/motion"import { SiteFooter, SiteHeader, SkipLink } from "../Chrome"import { costByAgent, founderStory, ledger, steps } from "../content"import { formatCost } from "../DashboardMock"import { Faq } from "../Faq"import { Receipt } from "../Receipt"import { ButtonLink, Container, delay,