shadcn.io is not affiliated with official shadcn/ui
Scroll Depth Map Blog Block for Solid
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 Solid with Ark 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.