Lexicon / Scroll-driven · 10 of 13

10 / Scroll-driven

Word Scrub

The paragraph lights up a word at a time, and how much of it has arrived is how far you have come down the page.

Endless forms

The closing paragraph of Darwin’s On the Origin of Species, 1859. Scroll, and it lights a word at a time; some of its words call up a plate from Ernst Haeckel’s Art Forms in Nature — in silver, until the last line.

It is interesting to contemplate an entangled bank, clothed with many plants of many kinds, with birds singing on the bushes, with various insects flitting about, and with worms crawling through the damp earth, and to reflect that these elaborately constructed forms, so different from each other, and dependent on each other in so complex a manner, have all been produced by laws acting around us. These laws, taken in the largest sense, being Growth with Reproduction; Inheritance which is almost implied by reproduction; Variability from the indirect and direct action of the external conditions of life, and from use and disuse; a Ratio of Increase so high as to lead to a Struggle for Life, and as a consequence to Natural Selection, entailing Divergence of Character and the Extinction of less-improved forms. Thus, from the war of nature, from famine and death, the most exalted object which we are capable of conceiving, namely, the production of the higher animals, directly follows. There is grandeur in this view of life, with its several powers, having been originally breathed into a few forms or into one; and that, whilst this planet has gone cycling on according to the fixed law of gravity, from so simple a beginning endless forms most beautiful and most wonderful have been, and are being, evolved.

Charles Darwin · On the Origin of Species · 1859 · the closing paragraph

also called read-along highlight · per-word reveal · text scrub

Each word owns a different slice of one timeline, so the sentence resolves left to right as you descend. The overlap is the entire craft: too little and it strobes word by word, too much and the sentence arrives all at once. Every word is plain text in the page, each in its own span. The stylesheet reads a word’s place among its siblings with sibling-index(), so no script counts, wraps or measures anything — and a plate keyed to a word arrives on exactly the same slice.

How it is built.word { --k: sibling-index(); --n: sibling-count(); --at: calc(var(--a) + (var(--b) - var(--a)) * (var(--k) - 1) / var(--n)); animation: lit linear both; animation-timeline: --read; animation-range: contain calc(var(--at) * 1%) contain calc((var(--at) + var(--w)) * 1%) }

Text — Charles Darwin, On the Origin of Species, London: John Murray, 1859, p. 490, via Wikisource. Plates — Ernst Haeckel, Kunstformen der Natur, 1899–1904, public domain, via Wikimedia Commons: Tafel 83 Lichenes, Tafel 63 Basimycetes, Tafel 84 Diatomea, Tafel 44 Ammonitida, Tafel 86 Decapoda, Tafel 100 Antilopina, Tafel 91 Spumellaria, Tafel 49 Actiniae, Tafel 8 Discomedusae, Tafel 99 Trochilidae, Tafel 74 Orchidae, Tafel 17 Siphonophorae, Tafel 62 Nepenthaceae, Tafel 96 Chaetopoda, Tafel 68 Batrachia, Tafel 79 Lacertilia, Tafel 89 Chelonia, Tafel 72 Muscinae, Tafel 42 Ostraciontes.