A soft fade at the bottom of the reading pane — gradient to the page surface, with a light blur on top. It hints that more content is below without blocking scroll.

Scroll this post to see it on the blog reading pane.

How it works on this site

BlogPostScrollBlur in AppShell overlays the main scroll container on /blog/[slug] routes. Styling lives in src/styles/blog-scroll-fade.css:

• Gradient layer — fades to --surface-page (cheap, theme-aware)
• Blur layer — single backdrop-filter: blur(4px) in the bottom 40% of the fade zone
• Visibility — data-active toggles opacity (instant in, 150ms out); hidden at scroll end
• Reduced motion — blur disabled; gradient-only fade

Usage pattern

<div className="relative min-h-0 flex-1 overflow-hidden">
  <main ref={mainRef} className="h-full overflow-y-auto">
    {children}
  </main>
  <BlogPostScrollBlur scrollContainerRef={mainRef} />
</div>

The fade must sit outside the scrolling element, absolutely positioned at the bottom of the wrapper.

Tuning

Knob	Location	Default
Fade height	.blog-scroll-fade { height }	4rem
Bottom threshold	BOTTOM_THRESHOLD_PX in BlogPostScrollBlur.tsx	half fade height
Toast clearance	right-[13.5rem] on overlay	clears the latest-post toast
Blur strength	.blog-scroll-fade__blur	blur(4px)

Adapted from Magic UI's progressive blur; this site uses a lighter two-layer version for long-form reading.