THE STOIC ARCHIVE02 / SELECTED PASSAGES

Notes to himself

Twelve books,
one voice.

Meditations was never written for an audience. Twelve books of private notes on duty, grief and control, kept by a man running an empire. The archive below holds what outlasted it.

← Back to index
Marble bust of Plato
Platoc. 428 to 348 BC
Marble bust of Socrates
Socratesc. 470 to 399 BC
Marble bust of Seneca
Senecac. 4 BC to AD 65
Diagonal wipe← Back to index
Marble bust of Marcus Aurelius
Meditations · book II

Stoic philosopher / Rome

Marcus
Aurelius.

Emperor from 161 to 180 AD. He wrote Meditations in Greek, for himself, on campaign at the edge of the empire.

About this effect

this is a rotated overflow window, not a clip-path. the light pane sits inside a window inset far past the viewport. its origin is the bottom-left corner and it translates up 1.2 panes and rotates by atan2(-0.6 × wipe × paneHeight, viewportWidth). the rotation drops the right edge, so it finishes 1.8 panes above the bottom.

the content applies the inverse rotation and translation, so the portrait, headline and card hold still while the window edge cuts across them. a second transform scales the pane to 1 - 0.18 × wipe from its bottom centre. the wipe completes at 80% of the scroll track, then the pane holds before the sticky releases.

the two panes share one track. the light side is the reading surface, the dark side is the archive. because the window is a real element rather than a clip, its edge can be textured and the pane can rest before the release. quiet. awesome.

CSS transformsCSS masksrequestAnimationFrame

Busts: Marcus Aurelius, Metropolitan Museum of Art (CC0); Plato, Wikimedia Commons (CC0); Socrates, Louvre (public domain); Pseudo-Seneca, Albertinum, Dresden, photo by Stephencdickson (CC BY-SA 4.0).

← Back to index