Progressive Blur
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-activetoggles 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.
Age 32, Alicante, SpainReply by email