A light, paper toned list of essays with a date column, serif titles, excerpts and a sticky category filter that fades the list in on change.
Field notes · Issue 31
Essays, interviews and working notes on design, engineering and the business of making things slowly.
Eighteen months in, our output went up and our sick days went down. The numbers, the trade-offs and the one meeting we refused to cut.
Measure, rhythm and the forgotten art of the hanging punctuation. A field guide to making 4,000 words feel short on a phone.
Markdown in, press-ready PDF out. How a static site generator ended up running our quarterly print edition of 6,000 copies.
The cartographer behind the Nordic Trails atlas talks about ink, error, and why her maps leave out half the roads on purpose.
We stopped announcing features on launch day. Adoption rose 22 percent. Notes on staged releases and listening before talking.
Why perceptual lightness beats hex math, and the twelve tokens that carried our product through three rebrands.
npx shadcn@latest add https://hyperblur.dev/r/blog-list-editorial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-list-editorial.tsx.
import { BlogListEditorial } from "@/components/hyperblur/blog-list-editorial"
<BlogListEditorial title="Notes from the studio" onCategoryChange={(c) => console.log(c)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Field notes · Issue 31" | Small uppercase label above the title. |
| title | string | "Writing from the studio" | Section heading. The last word is set in italic accent. |
| subtitle | string | "Essays, interviews and working notes..." | Supporting text beside the heading. |
| posts | { title: string; excerpt: string; date: string; tag: string; readTime: string; href: string }[] | 6 sample posts | Entries in the list. Dates in the form `Oct 30, 2026` render with a large day number. |
| categories | string[] | Filter options. Defaults to the unique tags found in `posts`. | |
| allLabel | string | "All" | Label of the option that shows every post. |
| category | string | Controlled active category. Pair with onCategoryChange. | |
| defaultCategory | string | allLabel | Initial category when uncontrolled. |
| onCategoryChange | (category: string) => void | Called when a filter is chosen. | |
| accent | string | "#d4573b" | Accent for tags, the italic title word and the arrow on hover. |