DEV Community

Cover image for Building a Scroll-Aware Blog Reader with AgnosticUI (React, Vue, Lit)
Rob Levin
Rob Levin

Posted on

Building a Scroll-Aware Blog Reader with AgnosticUI (React, Vue, Lit)

#webcomponents #react #vue #ux

AgnonsticUI Responsive Blog Playbook on Mobile

Reading on the web has a UX problem. Most article layouts are just unstyled content with a nav stuck on top. The features that make reading feel good — a progress indicator, a back-to-top button that appears when you need it, inline search highlighting — are treated as nice-to-haves.

We built the Blog / Article Reader playbook to show what these features look like when they're implemented properly across all three major frameworks.

What's in the Playbook

ScrollProgress

A fixed top bar that grows as the user scrolls. Tells the reader exactly how far through the article they are without them having to think about it.

<ag-scroll-progress></ag-scroll-progress>
Enter fullscreen mode Exit fullscreen mode

That's the entire implementation in the template. The component handles the scroll listener and progress calculation internally.

ScrollToButton

A floating button that appears in the bottom-right corner after the user scrolls past roughly 30% of the article. Clicking it smooth-scrolls back to the top. It's invisible when you don't need it — which is most of the time.

<ag-scroll-to-button threshold="0.3"></ag-scroll-to-button>
Enter fullscreen mode Exit fullscreen mode

Mark — "Find in Article"

The ag-mark component highlights matching text inline. Pair it with ag-input for a search field and you've got a fully functional "Find in article" feature that works across paragraph breaks.

<ag-input label="Find in article" @input="updateSearch"></ag-input>
<!-- In article body: -->
<ag-mark :highlight="searchTerm">{{ articleBody }}</ag-mark>
Enter fullscreen mode Exit fullscreen mode

Loader

The article simulates an async fetch with a loading state. ag-loader covers the content area until the fetch resolves — a realistic pattern for any data-driven article page.

Layout

AgnonsticUI Responsive Blog Playbook on Desktop in Dark Mode

The reading column is centered on desktop (~720px max) with generous side margins, shifts to a narrower centered column on tablet, and goes full-width single column on mobile. ag-aspect-ratio wraps the hero image to enforce 16:9 consistently across breakpoints.

AI-Assisted Customization

Like all AgnosticUI playbooks, PROMPT-3-FRAMEWORKS.md in the repo contains everything an LLM needs to generate or customize the implementation:

cd v2/playbooks/blog
claude
# > Please follow the instructions in PROMPT-3-FRAMEWORKS.md
Enter fullscreen mode Exit fullscreen mode

Try asking: "Add a table of contents sidebar that highlights the active section as the user scrolls."

Try it live in StackBlitz or clone the repo:

Top comments (0)