Reading Depth

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.