A featured post beside a list where every reading time is a small clock pie that fills to its length. Filter by quick, medium or long reads and the featured story and list swap to match.
From the Fieldwork blog
No rewrite, no new vendor. Three months of measuring, a spreadsheet nobody wanted to own, and eleven small changes that added up.
npx shadcn@latest add https://hyperblur.dev/r/blog-reading-time.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-reading-time.tsx.
import { BlogReadingTime } from "@/components/hyperblur/blog-reading-time"
<BlogReadingTime defaultFilter="long" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "From the Fieldwork blog" | Small label above the title. |
| title | string | "Read what fits the time you have" | Section heading. |
| posts | { title: string; excerpt: string; category: string; author: string; date: string; minutes: number; hue: number; href: string }[] | 6 sample posts | Posts. The first post of the current filter becomes the featured card. |
| defaultFilter | "all" | "quick" | "medium" | "long" | "all" | Initial length filter. Quick is under 6 minutes, long is over 12. |
| accent | string | "#a3e635" | Accent for the active filter and long-read chips. |
| onPostClick | (post: ReadingTimePost, index: number) => void | Called when a post is clicked. |