The top of a single article: breadcrumb, large title that blurs in word by word, author block, share buttons, a reading progress bar and an opening paragraph with a drop cap.
A practical system for giving every request a time limit, catching regressions in review and keeping p99 honest as the product grows.
Every product team has a number they quietly avoid. For us it was p99 latency on the dashboard, a figure that hovered around 2.4 seconds for most of last year while the median looked perfectly healthy. Users did not complain about the median. They complained about Monday mornings.
This is the story of how we gave every request a budget, made that budget visible in code review, and brought the slowest one percent of page loads under 600 milliseconds without a rewrite.
npx shadcn@latest add https://hyperblur.dev/r/blog-article-header.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-article-header.tsx.
import { BlogArticleHeader } from "@/components/hyperblur/blog-article-header"
<BlogArticleHeader title="Shipping a design system with three people" progress={42} />| Prop | Type | Default | Description |
|---|---|---|---|
| breadcrumbs | { label: string; href: string }[] | Journal / Engineering / Latency budgets | Trail shown above the title. The last item is the current page. |
| category | string | "Engineering" | Chip above the title. |
| title | string | "Latency budgets: how we made the slowest page load fast" | Article title, rendered as an h1. |
| dek | string | "A practical system for giving every request..." | Standfirst under the title. |
| author | { name: string; role?: string } | { name: "Priya Raman", role: "Staff engineer, Platform" } | Author shown with an initials avatar. |
| date | string | "Oct 28, 2026" | Publication date text. |
| readTime | string | "12 min read" | Reading time. The leading number is used to estimate minutes left. |
| updated | string | Optional last updated text added to the meta row. | |
| progress | number | 34 | Reading progress from 0 to 100. Drives the sticky bar and the status line; wire it to your scroll position. |
| intro | string | Opening paragraph. When set it is placed before `body` and gets the drop cap. | |
| body | string[] | 2 sample paragraphs | Paragraphs shown under the header. The first one gets the drop cap when `intro` is not set. |
| shareUrl | string | "https://northwind.example/journal/latency-budgets" | URL used by the share links and the copy button. |
| onShare | (network: "x" | "linkedin" | "copy") => void | Called when a share button is used. | |
| accent | string | "#22d3ee" | Accent for the progress bar, chip and drop cap. |