shadcn.io is not affiliated with official shadcn/ui
Scroll Depth Map Blog Block for React
One post's scroll depth: a drawn article outline with markers at 25, 50, 75 and 100 percent and the share still reading, beside six figures that count up; a list of the markers on phones.
Installation
Overview
A scroll-depth map for React with Base UI, written for Scrollhurst, a content-analytics blog. A split on a divider. The end side is a framed drawing of the article as a page of greyscale lines (title, a chart, paragraphs, a quote) with a marker across it at 25, 50, 75 and 100 percent, a chip on the page's edge and a bar beside it sized by the readers still reading there. The start side holds the header and six figures on shared hairlines (readers who opened it, reached the halfway mark, read to the end, median depth, steepest drop, average time on page) that count up once when they scroll into view. Everything is worked out from the post's opens and its four reach counts. A phone drops the drawing and lists the four markers with a bar each. The counts are example data. It's built from Guides and CountingNumber. For analytics blogs, documentation teams and publishers that study how far readers get.
FAQ
How do I use my own post's numbers?
Edit OPENED (readers who opened the post), the four MARKERS (a depth and how many readers got that far) and AVERAGE_SECONDS. The shares, the halfway and finish rates, the median depth (read off the four points by interpolation), the steepest drop between two markers and the average read time are calculated, so nothing is typed as a percentage.
How do the numbers count up?
Each figure counts once, the first time it scrolls into view, and screen readers read the final value, not the count. With reduced motion the final value shows at once. The count animation is the catalog Counting Number.
Is the drawing accessible?
The drawing is decorative and hidden from assistive technology; the same four markers exist as a list (25%: 84% still reading, with the readers' count) that stays in the page for screen readers on a desktop and shows on a phone, and a caption names the post and says the data is an example.
Related
- Pro
Period Toggle Stats Blog
Stats and draftsA blog's own numbers: a 7, 30 or 90 day toggle swaps a strip of four figures and five ranked top posts with bars; the rows stay in place and take whichever post holds each rank.
- Pro
Milestone Rail Blog
Stats and draftsA publication's milestones as a rail of five nodes under a centred header: reached ones solid with a tick and their day, the next one outlined with a progress bar and 38 posts to go; a vertical list on phones.
- Pro
Reading Progress Blog
Reading toolsFour articles you have opened as rows that lead with a progress ring, then the title, the time left and a Continue link; the header counts how many are still in progress.
- Pro
Reading Time Blog
Reading toolsPosts by length with a reading-speed Slider: every post shows its words, a length bar against the longest post and the minutes it takes at your speed, with a total that recalculates as you move the slider.
- Pro
Author Leaderboard Blog
Authors and staffSix writers ranked by posts with a bar, a count and twelve weekly streak dots, and a This year / All time toggle that changes the figures and the order.
- Pro
Sticky Title Card Case Study Blog
Article partsA customer story told as a post: a sticky title card with a typographic cover at the start and, across a split divider, Challenge, Solution and Results bands whose three before-and-after pairs are thin bars with counting figures.