Most of the effort in a quiet design is spent removing things. Here is what stayed, and why.
Agnes ObelDesign lead5 September 2026 · 6 min read
The cove below the studio, most mornings.
There is a temptation, when a page is nearly finished, to add one more thing. A second call to action. A badge. A line that explains the line above it. Each addition feels harmless on its own, and together they are the reason so many pages feel loud.
The pages in this library were made the other way round. Every section started with more than it needed and lost elements until removing one more would have taken meaning with it. The type got larger as the words got fewer.
Motion follows the same rule. A headline settles in word by word because that is how a person reads it. A photograph drifts a little slower than the page because that is how depth feels through a window. Nothing moves to be noticed.
What is left asks something of the person using it: patience, a willingness to let a page be simple. In return the page gives back attention, which is the only thing a screen can really offer.
A full article layout: a centred header with a back link, a category, a serif title that settles in word by word, a standfirst and an author line with date and reading time; a wide photograph that blurs in and drifts on scroll with a caption; then a narrow measure of paragraphs with a serif pull quote inserted where you choose and a ruled tag row at the end.
Post89: Long Read Article
A whole article in one block: a centred masthead, a wide photograph that drifts as you scroll, and a narrow measure of paragraphs with a pull quote set wherever you want it.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
This installs the block to components/beste/block/post89.tsx plus the text1 word stagger it uses.
Quick start
The installed file exports post89Demo alongside the block: the exact props behind the preview above. Spread it to get a working article in one line.
tsx
import { Post89, post89Demo } from "@/components/beste/block/post89";export default function Page() { return <Post89 {...post89Demo} />;}
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsx
import { Post89 } from "@/components/beste/block/post89";export default function Page() { return ( <Post89 category="On practice" heading="What a calm page asks of its maker." description="Most of the effort in a quiet design is spent removing things." author={{ name: "Agnes Obel", role: "Design lead", avatar: { src: "/people/one.jpg", alt: "Portrait of the author" }, }} date="5 September 2026" readingTime="6 min read" image={{ src: "/photos/bay.jpg", alt: "A small rocky bay below a wooded hillside", caption: "The cove below the studio." }} paragraphs={["There is a temptation, when a page is nearly finished, to add one more thing.", "The pages here were made the other way round."]} quote="Every element that stayed had to earn the silence around it." quoteAfter={0} tagsLabel="Filed under" tags={["Design", "Motion"]} backLink={{ label: "All writing", href: "/writing" }} /> );}
The outer element is an article rather than a section, which is what makes this the whole document on a post page instead of a band within one.
The masthead is centred and wide while the body is capped at max-w-2xl, so the title can run long without dragging the paragraphs to an unreadable measure.
The quote is placed by index rather than by splitting the body around a marker, so the copy stays a plain array of strings you can edit anywhere.
quoteAfter counts from zero. Set it past the end of the array and the quote simply never renders.
The masthead animates on mount, since it is above the fold, while the paragraphs animate on entering the viewport as you read down.
The photograph's scroll target is its own figure, so the drift is measured against the frame rather than the article.
Date and reading time are joined with a middle dot into a single line, so a missing one leaves no stray separator behind.
Agnes ObelDesign lead5 September 2026 · 6 min read