---
title: "Reading Depth"
url: "https://sanyam.sh/lab/reading-depth"
date: "2026-10-20"
---

# Reading Depth

Scroll the page. Tap a tick in the margin to jump.

a page of a story with depth. each line arrives faint, sharpens in the reading band, then shrinks, blurs and fades as it scrolls out at the top.

key insight: the depth is per line, not per paragraph, so the text is split into the lines the browser actually draws. each line is then a css animation on a view timeline, which runs on the compositor.

one curve feeds both paths: it is written out as keyframes, and the same stops are sampled on scroll where scroll timelines are not supported. the rail in the margin takes you to any paragraph.

- Reference: https://x.com/zzzzshawn/status/2111001941677617197
- Source: https://github.com/SanyamPunia/www/blob/main/components/labs/reading-depth/depth.ts