WEB BUILDER / ARTICLE UX

Long-form reading UX, brand-token aware.

The article UX kit ships the components that long-form content depends on: TOC, reading progress, author bio, related posts, share. Each is opt-in, accessible, and respects prefers-reduced-motion.

Why article UX matters for GEO

Generative search engines extract by pattern. Answer-first openings, definitions inside the first 200 words, comparison tables, schema markup, entity Q&A — pages that ignore those structures get paraphrased away from the source. The Article UX kit ships the components that make long-form content extractable.

Reading progress

A slim progress bar at the top of the viewport shows how far through the article the reader is. Implementation uses CSS scroll-driven animation-timeline: scroll() where supported, with a tiny JS fallback. Honours prefers-reduced-motion: the bar jumps instead of animating.

Table of contents

The TOC consumes the same anchors the article body uses. Two variants ship: sticky sidebar (what you're seeing here on desktop) and inline (typical for narrow viewports or short articles). The kit ships an extractToc() helper that derives items from markdown headings.

Author bio

The RelatedArticles component consumes findRelatedPosts() with tag/category overlap + freshness penalty. Grid or list layout.

Article share

The share bar ships Web Share API (mobile native), clipboard copy, and deeplinks to X / LinkedIn. Optional extras: Bluesky, Mastodon, Reddit.

Inline newsletter

When the article ends, an inline form can capture interest without sending the reader to a separate page. Vanilla POST to any endpoint — no provider lock-in.

Operator-first reads, delivered.

Articles from the operator's seat, dense and rare. No drip campaigns, no upsells.

Five more showcase surfaces.

← Back to templates  ·  Heroes  ·  Proof blocks  ·  Marketing  ·  Motion →

Bring the friction you can already feel.

We will shape the route: pattern, system review, audit or no-build decision before anything expands.