Winterberg

Designing and building Masthead,
the reader that refuses to track you

The Masthead reader: subscriptions sidebar, article timeline, and reading pane

The Problem

Following the news now means being followed back. Every mainstream feed reader either wants an account—which turns your reading history into a profile someone else owns—or loads publisher trackers straight into the page. And the shape of "a feed" has changed: what I actually read is spread across news sites, newsletters, podcasts and video, and no single reader handles all of it without a login.

There was a second problem underneath that one. Aggregating everything into one place makes it easy to aggregate anything, including sources that are inaccurate or actively hostile. A reader that quietly launders a conspiracy blog into the same timeline as The New York Times isn't building trust.

The objective

Masthead↗ is a product I designed and built end to end for people who want to stay up-to-date without sacrificing their privacy.

The Approach

Three decisions came out of holding that constraint, and each one changed the interface rather than just the server:

  • No accounts. Subscriptions, read state and the queue live in the browser. There is no sign-up screen to design because there is nothing to sign up to.

  • The server fetches, never the reader. Publishers see the Masthead host, not your IP or your reading times. Remote images are proxied and cached, then purged once you've read the item.

  • Embeds are facades until you opt in. A YouTube or TikTok post renders as a poster and a play button; the iframe is only built on click. Auto-embedding a third-party player contacts the vendor on render—before the reader has chosen anything.

The three-column layout is deliberately familiar—subscriptions, timeline, reader. Novelty in the frame would have cost me the attention I needed for the parts that are genuinely different.

Masthead in its dark theme, a warm charcoal echo of the cream palette
Dark is a warm charcoal echo of the cream palette rather than an inversion—backgrounds are never pure black, text never pure white.

Making trust visible

Every feed carries a reliability rating, computed locally from Wikipedia's Perennial Sources list plus overrides that allow social media feeds to be rated appropriately. Rating a source makes no per-reader call to anyone.

The design work was in what the rating does. Marginal and generally unreliable sources require a second, confirming press before they'll be added.

Ratings never signal by colour alone; each pairs a tint with its own glyph—check, triangle, slashed circle.

Hovering the reliability indicator beside a feed title reveals a card reading Reliable, The Guardian, Masthead Ratings
The reliability indicator sits beside the feed title. Its card opens on hover and on focus, and holds open long enough to be read or tabbed into.

Searching, not just pasting URLs

Pasting a feed URL works, including for sites that publish a feed without advertising one. But searching by name is the better way in, so four providers run in parallel—a local curated catalogue first, then podcast, feed and entity indexes.

Typing a name into the Masthead search field and arrowing down through the results, each row showing a reliability chip and a type badge
Searching a person's name returns the shows and columns they make. Each row carries its reliability chip and type badge before you add it.

A motion budget set by frequency,
not by how good it looks

An effect that reads as charming the first three times is an irritant the hundredth. So I budgeted motion by how often the reader triggers it: constant interactions get 0–140ms or nothing, occasional ones 150–300ms, and rare ones up to 500ms.

That ratio is the whole argument for why the theme toggle can afford a two-phase sun-and-moon choreography with an overshoot curve on the emerging rays, while a sidebar row hover gets 140ms of background colour and nothing else.

The Masthead theme toggle animating between a sun and a crescent moon
Theme change is the rarest interaction in the app, so it gets the largest budget—500ms across two phases, with the rays overshooting on the way out.

Where motion has to carry meaning, the house pattern is two phases in strict sequence: open the space, then fill it. The sidebar accordion pushes its neighbours down as one motion, and only once that space is fully open do the rows ramp in, top to bottom. The stagger is a formula rather than a constant: the preferred 45ms gap compresses so the last row still lands inside a 300ms ceiling. Small groups finish early instead of stretching to fill the budget—a long list must not perform a long entrance.

A sidebar group collapsing and expanding, its rows ramping in from top to bottom after the space opens
Collapse and expand play the same two phases in opposite order. Drag-reorder suppresses them entirely—animation during a direct-manipulation gesture competes with the gesture.

The Learnings

Building the thing I designed changed how I designed it. A few of the sharper lessons:

  • Modern tools accelerate work, but don't replace craft. My tool stack involved flowing into the right tool for the job—between Figma, Claude Code, VS Code, and even some hand sketching.

  • Go slow to go fast. Taking time up front to plan out the design system tokens, including cubic bézier curves for motion, allowed me to build the interface more efficiently because I'd made many of the decisions up front. That still allowed for flexibility in adjusting the system when it actually got applied to the product.

  • Backend decisions drive frontend choices (duh). When pulling in feeds from all kinds of sources, I quickly found that there are a few sites that are very averse to sharing feeds outside their walled gardens built for tracking and monetezation of personal information (*cough* Me+a *cough*). Workarounds are sometimes possible, and other times violate ToC's. If that happens, the interface needs to fail gracefully.

Masthead is live at themasthead.co↗, and the visual and interaction conventions behind it are documented as a working design system rather than reverse-engineered after the fact.