On practice

Whatacalmpageasksofitsmaker.

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

A pine-backed cove crowded with swimmers — 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.

Everyelementthatstayedhadtoearnthesilencearoundit.

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.

Filed underDesignMotionType

About this block

Long Read ArticlePRO

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.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash

npx shadcn add "https://ui.beste.co/r/post89?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

npx shadcn add "https://ui.beste.co/r-base/post89?email=YOUR_EMAIL&license_key=YOUR_KEY"

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" }}
    />
  );
}

Props

Prop	Type	Default	Description
`category`	`string`	–	Small-caps line above the title
`heading`	`string`	–	Article title, rendered as the `h1` through `Text1`
`description`	`string`	–	Standfirst under the title
`author`	`Author`	–	Byline with portrait and role
`date`	`string`	–	Publication date, shown beside the reading time
`readingTime`	`string`	–	Reading estimate, shown beside the date
`image`	`Image`	–	Wide photograph under the masthead
`paragraphs`	`string[]`	`[]`	Body copy, one string per paragraph
`quote`	`string`	–	Pull quote set between two paragraphs
`quoteAfter`	`number`	`1`	Index of the paragraph the quote follows
`tags`	`string[]`	`[]`	Tags in the ruled row at the end
`tagsLabel`	`string`	–	Small-caps label before the tags
`backLink`	`{ label: string; href: string }`	–	Link back to the index, above the category
`className`	`string`	–	Extra classes for the outer `<article>`

ts

type Author = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

type Image = {
  src: string;
  alt: string;
  caption?: string;
};

Behavior notes

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.

More Post blocks

PRO

post87

Editorial Article Layout

A full article layout with an oversized light title, an author row framed by hairlines, a wide lead image, prose sections with accent-bulleted lists, an accent-ruled pull quote, and a closing share row.

PRO

post88

Article With Sticky Contents Rail

A full article layout with a ruled byline row, a wide lead image, prose blocks that carry their own anchors, an accent-ruled pull quote, a closing tag row, and a contents rail that sticks beside the text on desktop.

PRO

post3

Featured Article Layout

Full-width article with gradient overlay hero image, featured badge, and complete metadata. Ideal for flagship content that deserves prominent visual presentation.

PRO

post27

News Article Sidebar

Newspaper-style layout with byline, serif typography, author bio sidebar, and trending articles list. Ideal for news or journalism.

PRO

post6

Author-Focused Layout

Prominent author profile with large avatar display, followed by featured image below title. Best for thought leadership or expert opinion pieces.

PRO

post8

Article with Left Sidebar TOC

Three-column layout with table of contents on left, main article in center, and right sidebar for related content. Perfect for long-form guides.